横並びのナビゲーションを作成するためにスタイルシートの解説本で調べて
【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.1
- 回答日時:
セレクタの書き方をしっかり理解しておきましょう。
CSSで最も重要な部分です。プロパティだけいくら覚えても使い物になりません。
セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
セレクタは、基準となるセレクタに接続詞でつなげて適用させたい要素(タグで囲まれた文書を構成する要素)を特定していきます。
* --全称セレクタ すべての要素に当てはまります。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をよく理解することで、レベルは上がるはず。そのために詳しい説明は省いてあります。仕様書と見比べながら勉強しましょう。
No.2ベストアンサー
- 回答日時:
<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の中にあるli
で指定すると今、見せていただいている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が主でcssが従ですので、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です。
このあたりは詳細度、とかかわってきます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像にリンクを張ると画像がず...
-
ポップアップメニューを表のよ...
-
リストの数字のフォントサイズ...
-
ポップアップメニューの作成方...
-
HTMLで組織図を作成する方法
-
<li>でドロップダウンボタンを...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
「olタグ」内に「hタグ要素」...
-
リンク文字同士の間隔を開ける...
-
バーナーヘッダーを固定する方法
-
罫線の長さが可変するテキスト...
-
タイトルの横にサブタイトルが並ぶ
-
css 横並びのナビゲーションバ...
-
ol、liをスタイルシートで中央寄せ
-
画像横のテキストをセンターに...
-
HTMLで語の先頭をそろえるには?
-
テーブル内のプルダウンの下に...
-
「・」(黒い点)を非表示にした...
-
CSSでリスト[li]の表示がズレる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html/cssの、navを2段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報