リストタグを横並びにする方

質問

横並びのナビゲーションを作成するためにスタイルシートの解説本で調べて
【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を入れずに進めても問題ないでしょうか？

回答No.2

DrFell · ベストアンサー

<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>

上の構造を日本語でいうと、
naviっていう名前の塊の中に、箇条書きリストが3行あります。
ということです。
で、上手くいかなかった
ul#navi li ｛は
nabiっていう名前のulの中の、liに対する指定です。
cssでスペースがなくクラスやアイディを指定すると、「～という名のdiv（この場合）」
半角スペースを空けてclassやidを指定すると「divの中の～という名前の」という指定になります。

#navi ul li{
意味：naviと名前のついた要素の中にあるのulの中にあるｌi
で指定すると今、見せていただいているhtmlに作用します。

ul#navi li {
意味：naviと名前のついたulの中にあるli
を固持したければ、
<ul id="navi">
<li><a href="toiawase.html">問い合わせ</a></li>
<li><a href="accsess.html">アクセス</a></li>
<li><a href="top.html">TOP</a></li>
</ul>
のようにhtmlを変えます。（本質的にはhtmlが主でｃｓｓが従ですので、htmlはデザインの都合で変えるべきではありません。が説明の便宜上です。）

頭のulを取ったら出来ました。
#navi li
naviという名前のついた要素の中にあるli
への指定となりますので、当てはまったのです。さっきはnaviという名前のついたulと指定していたのにnaviと名前をつけたのはdivだったのではまらなかったというわけです。

また、ulを入れずに進めても問題ないでしょうか？
本来「id」はたった1つのものです。idが1つあることでその場所は特定できるはずです。今現在、思い通りの作用が出来ているなら、問題ありません。

おまけ
将来は問題が出てくるかもしれません。まずは、上述のことを抑えられてからでないと、次には進めないと思いますが一応。
例
<div id="navi">
<ul id="mainnavi">
<li><a href="toiawase.html">問い合わせ</a></li>
<li><a href="accsess.html">アクセス</a></li>
<li><a href="top.html">TOP</a></li>
</ul>
</div>
#mainnavi li{color:blue;}
#navi li{color:red;}
実際に表示されるのはredです。

ul#mainnavi li{color:blue;}
#navi li{color:red;}
実際に表示されるのはblueです。

このあたりは詳細度、とかかわってきます。

お礼

大変判りやすいご回答をありがとうございました。

回答No.1

ORUKA1951

セレクタの書き方をしっかり理解しておきましょう。CSSで最も重要な部分です。
プロパティだけいくら覚えても使い物になりません。
セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )

セレクタは、基準となるセレクタに接続詞でつなげて適用させたい要素(タグで囲まれた文書を構成する要素)を特定していきます。
* --全称セレクタ すべての要素に当てはまります。CSS2で追加(詳細度0)
ul,li,p -- タイプセレクタ:HTMLの要素に該当します。詳細度c=1
　-- 子孫セレクタ 半角スペースで子孫に適用される
>-- 子供セレクタ 直接の子孫に適用
#--- 一意セレクタ、HTMLのID　　詳細度[b=1]
.-- クラスセレクタ、HTMLのclass属性の値がひとつないし複数が空白で区切られているときのひとつ。詳細度[c=1]
[] -- 属性セレクタ　詳細度[c=1]
+ -- 兄弟セレクタ
他にも、擬似要素[詳細度d=1],擬似クラス[詳細度c=1]などがあります。それぞれに詳細度が定められています。

ul#nav はulのうち、ID属性がnavであるものに当てはまります。HTMLだと<ul id="nav"></ul>に当てはまります。詳細度は[0,0,1,1]
★書かれたHTMLにそのようなものはありません。id="nav"は、<DIV>要素についてます。
★書くのならul#navでないといけませんね。

#navは、CSS2では、*#navとみなされます。*(全称セレクタ)は詳細度ゼロで、一意セレクタは詳細度[b=1]ですから、このセレクタの場合、詳細度は[0,1,0,0]
　全称セレクタですから、id="nav"のすべての要素に当てはまります。ただし、HTMLにおいては、特定のIDは一箇所にしか存在しませんから、詳細度[0,1,0,0])(#nav)だろうが詳細度[0,1,0,0](ul#nav)だろうが同じと思われるでしょうが、大きな違いがあります。　たとえば他のページで、<div id="nav">と書かれている場合、前者は適用されますが、後者は適用されません。しかも詳細度が高いですから、前の記述はそのままで上書きされますね。
・・・詳細度の計算はCSS2.1で変更されていますから、上の日本語訳ではなく「6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )」を参照してください。

　サンプルに示されたHTMLだと、
div#nav ul{}、div#nav ul li{}だと適用されます。それぞれの意味は理解されてますか？
★単純にタイプセレクタだけ（ul,li）だと、そのHTML内のすべてのul,liに適用されますから、この様に他のセレクタと組み合わせて詳細度を上げて期待した要素にのみ適用させるように書きます。
　リンク先でない場合は
<div class="nav">
　<ul>
　　<li></li>
のほうが良いです。リンク先であっても
<div class="nav" id="navigation">
　<ul>
　　<li></li>
とするほうが、色々な面でベストです。

例] タブが全角スペースに置換してあります。

<div class="nav">
　<ul id="navigation">
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ul>
</div>
　に対して
div.nav ul,/* 詳細度[0,0,1,2] */
div.nav ul li{ /* 詳細度[0,0,1,3] */
/* セレクタはグループ化して記述すると同じプロパティを何度も書かなくて良い */
　　display:block; /* リストをリストでなく単なるブロックにする */
　　list-style:none; /* 古いIEは上記だけではマークが残る */
　　margin:0;/* ブラウザによって差があるのでいったん0にする */
　　padding:0;/* ブラウザによって差があるのでいったん0にする */
}
div.nav ul{/* 詳細度[0,0,1,2] */
　　width:80%;
　　margin:0 auto;
　　line-height:30px;/* 継承されるので上位に */
}
div.nav ul li{/* 詳細度[0,0,1,3] */
　　width:30%;
　　float:left;
}
div.nav ul li a{/* 詳細度[0,0,1,4] */
　　display:block; /* インライン要素をブロックら変換する */
　　width:100%;
　　height:100%;
　　text-align:center;
　　text-decoration:none;
}
div.nav ul li a:hover{ /* 動的な擬似クラス　詳細度[0,0,2,4] */
　　color:red;
　　background-color:yellow;
}
div.nav ul li a:active{/* 詳細度[0,0,2,4] */
color:yellow;
background-color:red;
}

簡単なCSSですが、これだけのHTML/CSSをよく理解することで、レベルは上がるはず。そのために詳しい説明は省いてあります。仕様書と見比べながら勉強しましょう。

お礼

判っていなかった事を再認識しました。
ありがとうございました。