- ベストアンサー
リンクＢＯＸと見出しに空白が出来る
- 独学でHTMLとCSSの勉強をしている方が、リンクBOXと見出しの配置に空白が生じる問題について質問されています。
- 提供されたHTMLとCSSのソースコードを確認したところ、スタイル指定の方法に問題があることがわかりました。
- HTML要素に対してスタイルを指定する際に、相対的な位置指定を行っているため、予期しない空白が生じているのです。
- miyamasa5330
- お礼率0% (0/2)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
div id=about*に適用されている、display:block;が入っているために下がっています。 それではなく、float:leftを適用させればご質問者様のお考え通りの機能になるのではと想像しまして。 スマートな方法ではないかもしれませんが、div#top aとdiv#about* a のdisplay:block;とtop:-*pxとleft:*pxを消します。 その後で"div#about* a"に "float:left"を追加して左揃えにします。 更に、h2の要素に"clear:left;"を追加して、あとはh2の要素を適宜いじればいけるのではないでしょうか。 以下ソース <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0 Transitional//EN"http://www.w3 org/TR/xhtml1/DTD/xhtml1-transitional.did"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>会社方針</title> <style type="text/css"> div#container{border:solid 2px black; padding:10px; width:1200px; margin-left:auto; margin-right:auto} div#top a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; left:1px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about1 a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about2 a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about3 a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about4 a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about5 a { width:166px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about6 a { width:168px; height:64px; background:#ffcc00; position:relative; float:left; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } h2{ clear:left; padding:0px 0px 0px 0px; font-size:1.15em; border-left:solid 18px #ffcc00; padding-left:5px; margin:3px; } p { margin: 0.5em 0px; } </style> </head> <body> <div id="container"> <h1><img src="title.png" alt="株式会社＊＊＊＊"/></h1> <div id="top"> <a href="../index/index.html"><p align="center">TOP</p></a> </div> <div id="about1"> <a href="about1.html"><p align="center">会社方針</p></a> </div> <div id="about2"> <a href="about2.html"><p align="center">企業概要</p></a> </div> <div id="about3"> <a href="about3.html"><p align="center">製品</p></a> </div> <div id="about4"> <a href="about4.html"><p align="center">福祉サービス</p></a> </div> <div id="about5"> <a href="about5.html"><p align="center">スタッフ紹介</p></a> </div> <div id="about6"> <a href="about6.html"><p align="center">お問い合わせ</p></a> </div> <h2>会社方針</h2> </div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なぜそんなに長大で複雑怪奇なHTMLスタイルシートになるのでしょう。他人は無論、あなた自身も手がつけられないのでは？ 理由は単純です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから relative ボックスの位置はまず通常フローにて計算され（この計算で得られた位置 を通常位置と呼ぼう）、その通常位置から相対的に配置される。 なお、あ るボックスBが相対配置される場合、それに後行するボックスの位置は、 Bが相対配置されていないかのように計算される。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#propdef-position )］より と言うことです。元々あったところは席は空くけど席は残っている。 しかし、それ(スタイルシートでデザインする)より前に、HTMLの文法チェックを～必ずしましょう。ミスがあると期待通りにデザインでき ませんし、ブラウザ間でエラー処理が異なるため表示差で悩まされます。 ・A要素の中に<p>は入れられません。 ・idやclass名は文書構造を補完するために書くのであって、デザインのために書くのではありません。その文書構造を利用してスタイルは 書きますが。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』 また、現在作成されるならHTML4.01strictが良いでしょう。transitionalは使うべきではありません。 1999年のHTML4.01の勧告以来・・『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 次期HTML5、や現行のXHTML1.1にはtransitinal(互換仕様)はありません。strictを学んでおけば、HTML5 にはすぐ移行出来るでしょう。 ★横幅1200pxは広すぎます。スマホや最も普及している1028pxのディスプレイでは苦痛です。 下記サンプルはスマホの640px以上でしたら伸縮して表示されます。幅広ディスプレイだと中央 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みのHTML4.01strictです。 ★タブは＿に置換してあるので戻すこと。また文字コードはShift_JISです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>会社方針</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.header,div.section,div.footer{ ＿border:2px black solid; ＿margin:0 10px; ＿width:95%;max-width:1000px;min-width:620px; ＿margin:0 auto;padding:10px; } div.header h1{ ＿width:95%;margin:0 auto; ＿position:relative; ＿text-align:center; } div.header h1 img{display:block;width:100%;height:auto;} div.header{ ＿border-bottom-width:0; ＿padding-bottom:70px; ＿background-color: ＿rgb(255,204,00); } div.section{border-width:0 2px;clear:left;} div.footer{border-top-width:0;} h1,h2,h3,p,ol,ul{margin:0;line-height:1.6em;} div.header ol,div.header ol li{ list-style:none;display:block; text-align:center; line-height:64px;font-size:0.9em; } div.header div.nav ol li{width:13.5%;float:left;border:solid 1px black;} div.header div.nav ol li a{background-color:#FFCC00;display:block;width:100%;height:100%;text-decoration:none;} div.header div.nav ol li a:hover{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header" id="TOP"> ＿＿<h1><img src="./images/title.png" alt="株式会社＊＊＊＊" width="600" height="60"></h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="../index/index.html">TOP</a></li> ＿＿＿＿<li><a href="about1.html">会社方針</a></li> ＿＿＿＿<li><a href="about2.html">企業概要</a></li> ＿＿＿＿<li><a href="about3.html">製品</a></li> ＿＿＿＿<li><a href="about4.html">福祉サービス</a></li> ＿＿＿＿<li><a href="about5.html">スタッフ紹介</a></li> ＿＿＿＿<li><a href="about6.html">お問い合わせ</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>会社方針</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
