- ベストアンサー
ヘッダ（横並び）の作り方について
横並びメニューのヘッダーを作る例として、<div1>Text</div1><div2><ul><li></li><li></li></ul></div2>という構成※divの数字は便宜上で、cssで<li>&<div1>&<div2>にfloat:left指示する物ががありましたが、<div2>のfloat leftの役割が分かりません。 宜しくお願いします。
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
float:left を取ってみればわかりますよ。 それと、一番最後に、clear:both;もしているとは思いますが。 http://www.htmq.com/style/clear.shtml 通常、<OL>, <UL>などは、「縦に段組み」されます。 それを、1つ表示後に、下にではなく、横に詰めろって指示が float:leftです。 しかし、それでは、全部が左詰めになるので、 最後にclearを行い「ここで終わりだよ！」と教えてる感じになります。 ただ、それだと、左に詰められない場合や、自動回り込みが 発生することもあり、あなたの言うdiv2はサイズがないのが特徴です。 本格的にデザインをやりだすとこのサイズがない問題にぶつかりますが。 要素を強制的にブロック要素にするやり方や、 https://www.indetail.co.jp/blog/8134/ FlexBOXなどの手法もあり、どれがいいとは言い切れませんが、 カンプ単位で、最適なものを選ぶところから コーディングがスタートすることもよくありますね。 ということで、回答は 「通常縦に配置される要素を強制的に、左詰めするCSSです」 となります。
関連するQ&A
- ナビゲーションを横並びにして真ん中配置にしたい
ナビゲーションをulタグを使って作り、横並びにしています。 さらにそれをブラウザの真ん中に配置したいのですが、真ん中になってくれません。 HTMLは以下のようにしています。 <div id="menu_top"> <ul> <li>Profile</li> <li>Information</li> <li>History</li> <li>Invitation</li> </ul> </div> CSSは以下のとおりです。 #menu_top{ margin:auto; width:90%; height:20px; text-align: center; } #menu_top li{ float:left; list-style-type:none; margin:15px; } あとbody要素にはtext-align:centerを入れています。 現状では、ナビゲーション自体は横並びになるものの、左に寄っています。横並びのまま、真ん中に表示させるにはどのようにしたらいいでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 横並びのメニューにならない
初心者です。 dreamweaverで、メニューを横並びにしたいのですが、縦のままです。 <div id="#navi"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">お支払・送料</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> という風に作って CSSが、 #navi { height: 30px; width: 750px; } #navi ul { list-style: none; } #navi li { display: inline; float: left; } #navi li a{ text-align: center; display:block; } としました。 どこが間違っているのでしょうか？ あるいは何か足りないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- <li>による横並びメニューの記述法
こんにちは。 CSSで<li>を使って横並びメニューを作っているのですが、メニューのイメージとイメージの隙間を空けるにはどうすればよいのでしょうか？ 現在の記述はこうです。 -----------------html------------------------ <div id="menu"> <ul> <li id="menu01"><a href="index.html"></a></li> <li id="menu02"><a href="business.html"></a></li> </ul> </div><!--menu--> -----------------css------------------------ #menu ul{ margin:95px 0 0 25px; padding:0; width:100%; float:left; list-style:none; } #menu ul li { float:left; } #menu ul a{ text-decoration:none; display:block; width:125px; height:30px; } #menu ul a:hover{ text-decoration:none; display:block; width:125px; height:30px; } #menu01 a{ background-image:url(img/menu01a.gif); background-left:0 0; } #menu01 a:hover{ background-image:url(img/menu01b.gif); background-position:0 0; } #menu02 a{ background-image:url(img/menu02a.gif); background-position:0 0; } #menu02 a:hover{ background-image:url(img/menu02b.gif); background-position:0 0; } 現状だと、画像（menu01.gif）と画像（menu02.gif）がどうしてもつながってしまうんです。 どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- レンタルサーバ・ASP
- 横並びのメニューボタンについて
float:leftでメニューボタンを横並びにしています。 表示を100％にするとうまく並ぶのですが、 100％以上にすると左端に隙間が、 100％未満にすると、ある時点からメニューボタンが2列になってしまいます。 これを回避する方法はあるでしょうか。 <<html>> <body> <div id="wrap"> <img src="image/photo1.jpg"> <div id="navi"> <!-- ナビボタン ここから --> <ul class="menu"> <li><a href="index.html" >ホーム</a></li> <li><a href="page1.html" >ページ１</a></li> <li><a href="page2.html" >ページ２</a></li> <li><a href="page3.html" >ページ３</a></li> <li><a href="page4.html" >ページ４</a></li> <li><a href="page5.html" >ページ５</a></li> </ul> </div> <!-- /navi --> </div> <!-- /wrap --> </body> <<css>> body { text-align: center; background-color:#EEEEEE; font-size: 12px; margin-top: -10px } #wrap{ margin: 0 auto; text-align: left; background-color: #ffffff; width: 752px; border: 1px solid #404040; border-collapse: collapse; padding: 0; } .navi{ width:750px; } ul.menu { margin: -5 0 0 0px; padding :0; list-style-type : none; } ul.menu li { margin:0; float:left; width: 125px; line-height: 30px; } ul.menu li a{ display:block; text-align:center; text-decoration: none; background-image: url(menu1.jpg); background-repeat: no-repeat; color: #ffffff; font-size: 12px; } ul.menu li a:hover{ background-image: url(menu2.jpg); color: #404040; } よろしくお願いします。
- ベストアンサー
- HTML
- float横並びにしたブロックの中のul/liを縦並びにさせたい
float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。
- ベストアンサー
- CSS
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- リストタグを横並びにする方
横並びのナビゲーションを作成するためにスタイルシートの解説本で調べて 【html】 <div id="navi"> <ul> <li><a href="toiawase.html">問い合わせ</a></li> <li><a href="accsess.html">アクセス</a></li> <li><a href="top.html">TOP</a></li> </ul> </div> 【css】 ul#navi li { float: right; } ul#navi li a { display: block; text-decoration:none; } と記述しましたがうまくできず、頭のulを取ったら出来ました。 タグの位置がセレクタの前と後では、どう違うのでしょうか？ また、ulを入れずに進めても問題ないでしょうか？
- ベストアンサー
- CSS
- cssでリストを横並びのセンタリング
現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？ さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。 現在のHTML <!-- ヘッダ開始 --> <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><a href="#">１</a></li> <li><a href="#">２</a></li> <li><a href="#">３</a></li> <li><a href="#">４</a></li> <li><a href="#">５</a></li> <li><a href="#">６</a></li> <li><a href="#">７</a></li> </ul> <hr class="none"> </div> <!-- ヘッダ終了 --> 現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。 まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html
- ベストアンサー
- CSS
- float:leftで<li>要素を横並びさせてから、中央揃えする方法は？
ＨＴＭＬ <dir id="footer"> <ul> <li>個人情報保護方針</li> <li>サイトマップ</li> <li>組織概要</li> <li>お問い合わせ</li> </ul> </dir> ＣＳＳ #footer ul li{float: left;} 上記の場合、li要素は横並びするのですが、 <div>要素の中で中央揃えするには どうしたらいいのでしょうか？
- ベストアンサー
- HTML
- メニューの横並びで改行されてしまう。
ul li を使用して、横並びのメニューを作成したいのですが、 最後の項目が、横に並びきれなくて、下の段に移ってしまいます。 border幅や、marginも計算してpxで指定しているつもりですが、上手くいきません(TдT) 何故ですかね？ HTML <body> <div id="wrapper"> <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> <!-- /wrapper --></div> CSS #wrapper { width: 985px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } nav ul { list-style-type:none; } nav li { float:left; width:190px; border: 1px #ffb366 solid; text-align:center; margin-right:5px; }
- ベストアンサー
- CSS
お礼
学習教材の学習途中なので、続きが有るのかもしれません。clear:both;も有りませんでした。ありがとうございます。
補足
それが取ってみても分からなかったのです。<li>は、複数要素を横並びにして左詰にしますよね。<div1>は、<div2>と横並び且つその左に置きますよね。この時点で、<div1>のtextと<div2>のli要素はすべて横並びになっていますよね。そして、テキストは何も指示しなければ左詰だから、<div2>はもともと左に寄ってますよね。<div2>をわざわざfloat:leftする意味がわからないです。