- ベストアンサー
ＣＳＳで思うようにいかないところがあります。
現在ＣＳＳ勉強中の初心者です。 ＣＳＳを使って、ナビゲーションシステムを作ろうと、本に書いてある通り、打ち込んでみたのですが、borderで囲まれた部分を1行にしたいのですが、なぜか、2行になってしまっているようです。上の行には表示させたい文字が書かれているのですが、下の行が空欄になってしまって、スペースができてしまいます。ＣＳＳの書き方が悪いのでしょうか？解決方法を教えてください。うまく説明できなくてわかりにくいかもしれませんが、宜しくお願いいたします。 ＣＳＳは以下です。 #nav { margin: 0px; padding: 0px; list-style: none; float:left; width:100%; } #nav li { float:left; background-color:#f0f0f0; border: 1px solid #000; font-size:12px; text-align:center; width:160px; height:20px; margin-top:1px; margin-right:0px; margin-left:3px; } #nav a{ color:#000; width:170px; height:20px; display:block; } #nav a:hover{ color:#fff; background-color:#0f314e; text-decoration:none; height:20px; } HTMLは以下です <ul id="nav"> <li><a href="">ホーム</a></li> <li><a href="">Gallery</a></li> <li><a href="">プロフィール</a></li> <li><a href=""></a>お問い合わせ</li> </ul>
- HTML
- 回答数9
- ありがとう数6
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
質問の意味と理想の形が把握できなかったので回答を控えておりましたが、 あなたが#7のお礼で「思い通り表示できることがわかりました。」と仰られたのを参考に実現してみました。 その上で私が解釈できた範囲で、あなたの理想とする形を実現するソースを示します。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>TITLE</title> <style type="text/css"> ul#nav { margin:0px; padding:0px; list-style:none; /*◆ float:left; /* 無意味なのでfloatを削除 */ width:100%; background-color:#ff0; /*◆ 確認のため（削除してください） */ } ul#nav:after { /* ul要素領域の確保 */ content:""; display:block; clear:both; } #nav li { float:left; background-color:#f0f0f0; border:1px solid #000; font-size:12px; text-align:center; width:160px; /*◆ height:20px /* 削除 */ margin-top:1px; margin-right:0px; margin-left:3px; } #nav a{ color:#000; width:100%; /* 親要素の表示領域幅最大に指定 */ /*◆ height:20px; /* 削除 */ padding:3px 0; /* これで余白を実現 */ display:block; background-color:#f90; /*◆ 確認のため（削除してください） */ } #nav a span{ /* テキストの下辺揃え */ vertical-align:text-bottom; } #nav a:hover{ color:#fff; background-color:#0f314e; text-decoration:none; /*◆ height:20px; /* 削除 */ } </style> </head> <body> <ul id="nav"> <li><a href="/"><span>ホーム</span></a></li> <li><a href="/"><span>Gallery</span></a></li> <li><a href="/"><span>プロフィール</span></a></li> <li><a href="/"><span>お問い合わせ</span></a></li> </ul> </body> </html> ● スタイルシート指定については、◆がある行を削除してください。 ※ 可読性に欠けるので回答を分けます。
その他の回答 (8)
- quads
- ベストアンサー率35% (90/257)
#8の続き。 ●---> ul#nav:after { /* 領域の確保 */ については、 http://www.geocities.jp/multi_column/float/05.html をご覧ください。 NNではこれを用いても領域が確保されない場合がありますが、今回は議論しません。 ※この件についての対策は、 http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html をご覧ください。 ●---> #nav a span{ /* テキストの下辺揃え */ については、Operaで見栄えを統一させるために記述しています。 詳細については今回は省略します。 ●---> padding:3px 0; /* これで余白を実現 */ プロパティ値を2つ記述した場合は、「上下」「左右」の指定になります。 左右については、 width:100%; /* 親要素の表示領域幅最大に指定 */ を指定しているため、0を指定してください。 line-height:20px; でテキストの高さを確保するのは妥当ではありません。 テキストの上下に余白を付けたいのであれば、リンクの指定などを考慮すると、 ブロックレベルとして振舞っている a 要素に対して padding 指定するのが妥当です。 ●---> #nav a span{ /* テキストの下辺揃え */ Operaでは、テキストに日本語（というと少し厳密でないが）が含まれている場合と含まれていない場合で行の高さが異なってしまいます。 メニューとして見栄えを統一するために指定しました。 これに伴い、body 部では a 要素の内容を span 要素で包含しています。 vertical-align プロパティの適用がインライン或はテーブルセルであるためです。 a 要素は display プロパティで block を指定しているため適用できません。 > border: 1px solid #000; > をliからaに移して、 > height:20px;を > line-height:20px;に変えたら、思い通り表示できることがわかりました。 > なぜ、liじゃだめで、aに属性をつけなきゃいけないのかと考えると、まだ気持ち悪いですが、解決できてとてもありがたく思っています。 height 指定は、そのブロックの高さを指定できます。 内容は、ブロックの上端に表示されるのが基本ですから、縦方向の中央に表示されていないのです。 あなたは、これを改善するために line-height プロパティを用いました。 a 要素の内容（リンク）のテキストが必ず1行になるという前提であればそれでもよいのですが、 20pxという絶対値では、ブラウザ側が文字のサイズを変更したときに表示が予期しないものとなってしまいます。 だからといって相対値では、確保できる上下の余白を柔軟に指定できません。 であれば、親要素に対する padding として指定する方が適切です。 > できれば、どうして、liと、aに属性をつけるのとは全然ちがった表現になるのか教えていただけるとありがたいのですが、 構造（どこにどんな「余白」があるのか、など）をしっかり理解されていれば分かるはずです。 理解したいのであれば、li要素の構造をきちんと見つめてみましょう。
- yambejp
- ベストアンサー率51% (3827/7415)
ネタ的には＃６さんがご指摘のとおりだとおもいますが aをblockにするのであればliに対しては最小限の設定にとどめ aに対して属性をつけていく方が吉です。 <style type="text/css"> #nav { margin: 0px; padding: 0px; list-style: none; } #nav li { float:left; } #nav a{ font-size:12px; text-align:center; vertical-align:middle; line-height:20px; color:#000; width:170px; display:block; border: 1px solid #000; margin-left:3px; text-decoration:none; } #nav a:hover{ color:#fff; background-color:#0f314e; } </style> <ul id="nav"> <li><a href="">ホーム</a></li> <li><a href="">Gallery</a></li> <li><a href="">プロフィール</a></li> <li><a href="">お問い合わせ</a></li> </ul>
お礼
ありがとうございました。 すべて解決しました。 </a>をつけていなかったのは、こちらの質問に載せるときに、うっかり消してしまっていただけで、それが原因ではなかったのですが。 liに属性をつけるよりも、blockがあるaに属性をつけなきゃいけなかったんですね。いろいろ検証して、 border: 1px solid #000; をliからaに移して、 height:20px;を line-height:20px;に変えたら、思い通り表示できることがわかりました。 なぜ、liじゃだめで、aに属性をつけなきゃいけないのかと考えると、まだ気持ち悪いですが、解決できてとてもありがたく思っています。 できれば、どうして、liと、aに属性をつけるのとは全然ちがった表現になるのか教えていただけるとありがたいのですが、時間がありましたら、ご指導を宜しくお願いいたします。 とにかく、ありがとうございました。
- rakuson
- ベストアンサー率44% (8/18)
<li><a href=""></a>お問い合わせ</li> の記述が間違っています <li><a href="">お問い合わせ</a></li> に訂正してもだめですか？
#nav { margin: 0px; padding: 0px; list-style: none; text-align:center; font-size:12px; } #nav li { float:left; width:160px; } #nav a{ background-color:#f0f0f0; border: 1px solid #000; color:#000; padding:2.5px 0; display:block; margin:1px 0 0 3px; } #nav a:hover{ color:#fff; background-color:#0f314e; text-decoration:none; } こんなのではどうでしょうか？ 未検証です。
- ICHI-yan
- ベストアンサー率33% (45/134)
liの幅より aの幅が広く取られてる為はみ出すのでは？ 未検証です。
- key-child
- ベストアンサー率54% (25/46)
１． #nav li { width: 160px; } #nav a { width: 170px; } あわせましょう
お礼
紛らわしい書き方してすみません。 それも試しましたが、幅を同じにしても、変わらないんですよね；
- vista2446
- ベストアンサー率46% (131/279)
「お問い合せ」のHTMLは、<li><a href="">お問い合わせ</a></li>ですよね。 ＞borderで囲まれた部分を1行にしたいのですが、なぜか、2行になってしまっているようです。 height:20pxのブロック（？）に配置されている文字の下に空白ができているため、2行になっているように見えるだけだと思います。なので、行の高さを20pxにすれば良いのではないでしょうか。。。 #nav li { float:left; background-color:#f0f0f0; border: 1px solid #000; font-size:12px; text-align:center; width:160px; line-height:20px; margin-top:1px; margin-right:0px; margin-left:3px; }
お礼
ありがとうございます。 ご指摘の通りやってみましたが、うまくいきません。 height:20px;を消したりいろいろやってみましたがダメでした。 「お問い合せ」のHTMLは、<li><a href="">お問い合わせ</a></li>は下記間違いでした；
「height:20px;」を消せば1行になります
お礼
height:20px; を全部消しましたが、やはり2行になってしまします。
お礼
ご指導ありがとうございました。 勉強します。