- ベストアンサー
横並びのメニューを作成する方法
- 横並びのメニューを作成するためには、CSSのfloatプロパティを使用します。ulタグ内のliタグにfloat:leftを指定することで、メニュー項目を横並びにすることができます。ただし、最後の項目が横に並びきれずに次の行に移動する場合、ulタグの幅がメニュー項目の合計幅よりも短くなっている可能性があります。幅を適切に設定し、marginやpaddingも考慮することで、メニューの横並びを実現できます。
- また、メニュー項目の幅やmarginの計算には、px単位を使用することが一般的です。幅が一定でない場合やブラウザのデフォルトのスタイルが影響する場合は、paddingなども考慮して調整する必要があります。さらに、リンクのテキストの幅が表示に影響することもありますので、必要に応じてテキストの折り返しなども検討してください。
- 問題が発生している場合は、HTMLやCSSのコードを見直して、間違いやtypoがないか確認しましょう。また、ブラウザの開発者ツールを使用して要素のスタイルや配置を確認することもおすすめです。問題が解決しない場合は、具体的なコードやスクリーンショットなどを提供して、より詳細なサポートを受けることができます。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<nav>要素を使われていることから、HTML5だと思います。その場合は、 <doctype html> になります。これで、ほとんどのブラウザは標準モードで動作しますので、ブラウザによるレンダリングの差はなくなるはずです。 ★HTML5では、原則として<div>要素は使いません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )］より 著者は、 他に適切な要素がないときなど、最後の最後の手段としてDIV要素を使うよう強く推奨する。DIV要素でなく適切な要素を使うことによって、読者にとってはアクセシビリティ向上に、著者にとってメンテナンス性の向上につながります。 HTML4.01(1999年)でもすでに「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」と書かれていたのですから、<div id="wrapper">も好ましくはありません。 この場合、<article>でしょう。なくても良いはずです。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 標準モードでは、サイズはpadding辺の内側です。 ⇒8.1 ボックスの寸法（Box dimensions）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions ) リストは、各項目を字下げしてレンダリングするブラウザが多いのですが、それにpaddingを使用するかmarginを使用するかはブラウザによって異なります。 この場合 nav ul,nav ul li{ list-style-type:none; margin:0;padding:0; } とそれらを消してから、改めて指定すると確実です。 最近のように、スマホやタブレット、幅広ディスプレイと様々な端末が想定される場合、固定ではなくリキッドでデザインするほうが良いですし、楽です。 <body> <header> <nav> <ul> <li><a href="#">about</a></li> <li><a href="#">information</a></li> <li><a href="#">party</a></li> <li><a href="#">access</a></li> <li><a href="#">contact</a></li> </ul> </nav> </header> header,section,footer{ width:980%;min-width:640px;max-width:980px; margin:0 auto; } header nav ul,header nav ul li{ list-style:none; display:block; text-align:center; margin:0;padding:0; line-height:2em; } header nav ul{font-size:5px;} header nav ul li{ display:inline-block; width:18%; border: 1px #ffb366 solid; position:relative; } header nav ul li a{ display:block; width:100%;height:100%; text-decoration:none; } ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
その他の回答 (3)
- naokita
- ベストアンサー率57% (1008/1745)
失礼 (pddding → padding) html,body,h1,h2,h3,ul,ol,li,dl,dt,dd{ margin:0; padding:0;}
- naokita
- ベストアンサー率57% (1008/1745)
貴方が見えてない部分が未計算だからです。 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 指定のCSSがなくてもHTMLだけで見やすくなるように、 ブラウザ側のデフォルト値でレンダリングしてくれていますので・・・ html,body,h1,h2,h3,ul,ol,li,dl,dt,dd{ margin:0; pddding:0;} みたいなリセットして一旦「0」にしないと計算できないでしょ また、 DTD 過去互換/標準 DOCTYPEスイッチによって、 border,padding IE6のfloat向きのmarginなどによって、 合計値を把握して設定しないと段落ちしますよ・・・
お礼
naokitaさん ご回答ありがとうございました。 上手く出来ました。
- play_with_you
- ベストアンサー率37% (112/301)
「改行」じゃなくて「折り返し」ね。 まったく別のもなので混同しないようにしましょう。 で、答え。 (190+2+5)*5+●●＞985 ●●って何か分かります？<ul>のデフォルトパディングです。ちなみに私の手もとのIE10では40でした。 <li>はほとんどのブラウザでインデントがかかるでしょう？あれです。 各タグのデフォルト表示はきちんと把握しましょう。 というかFirefoxにもChromeにも（IEは最近）デバッグ用の表示をしてくれる機能があるんだからちゃんと使いましょう。
お礼
play_with_youさん いろいろとご指摘ありがとうございます。 上手く出来ました。 ありがとうございました。
お礼
ORUKA1951さん 御回答有難う御座います。 また、HTML5でのdivについてのご指摘もありがとうございます。