締切済み

CSSで横並び→HTMLの記述は？

2015/02/24 13:09

最近、独学でプログラミングを学び始めた初心者です。で、HTML&CSSで「メニューリストを横並びにする」にする方法がわかりません。どうしたら良いでしょうか？ CSSでは、 /* すべてのページに適用 - navまわり - */ #nav li { display: inline; list-style-type: none; padding-right: 30px; } で合っていると思いますが、HTMLでは何が間違ってますか？知識が浅くざっくりとした質問で申し訳ありません。これだけの情報だと回答が難しいかもしれませんが、非常に困っております。よろしくお願いします。

abcabc119
お礼率86% (287/332)

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

みんなの回答

DrFell
ベストアンサー率55% (305/551)

2015/02/24 17:46 回答No.3

勉強を始めたばかりなら、つまみ食い的にソースをコピーするよりも体系的に基礎を勉強されることをお勧めします。その方が、断然早いです。htmlはマークを付けるだけです。cssも簡単な事の組み合わせですが、組み合わせによっておこる現象が、基本がわかっていないと理解できなく、また、スパゲティソースになってしまいます。取りあえず、４つのやり方を、上げてみます。まだ、他にもありますが、ややこしくなりそうなので、４つです。説明はしません。興味があれば、ご自身でお調べください。 <html> <head> <style type="text/css"> li{background:#eeeeee;width:150px;} ul{background:#ffdddd;padding:1em;} #nav li { display: inline; list-style-type: none; padding-right: 30px; } #nav1 li { display:table-cell; list-style-type: none; padding-right: 30px; } #nav1{ display:table-row; } #nav2 { display: flex; list-style-type: none; padding-right: 30px; } #nav3 li { float:left; list-style-type: none; padding-right: 30px; } </style> </head> <body> <h1>横並びのリスト</h1> <p>ulの背景はピンク、liの背景はグレーを入れています。</p> <h2>display:inlineの場合</h2> <ul id="nav"> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>display:inlineだと、高さや幅が持てません。paddingやmarginの挙動もちょっと特殊です。</li> </ul> <h2>display:flexの場合</h2> <ul id="nav1"> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>display: flexという手も</li> </ul> <h2>display:table-cellの場合</h2> <ul id="nav2"> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>表のセルのように見せかける手法もあります。</li> </ul> <h2>floatの場合</h2> <ul id="nav3"> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>floatだと、自分自身には高さや幅が持てます。が、浮いちゃうので親要素に対しての高さがなくなりますの背景がめんどうです。また、次の要素が入れば、左に来るのでclearする必要があります。</li> </ul> </body> </html>

質問者