第5章 リスト要素でメニューを作る
| idセレクタによるスタイル指定
|
さらに制作を進めるに当たって、より効率良くスタイルを指定していくためにidセレクタという指定方法を利用することにします。 HTMLソース中にid属性で名前を付けて、そのid名をセレクタにするということです。
HTMLファイルのindex.htmlに以下の記述を追加してください。
HTMLソース（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<h1>ウェブサンプル株式会社</h1>
<!-- メインメニュー -->
<ul id="menu">
<li>ホーム</li>
<li>製品紹介</li>
<li>会社概要</li>
<li>お問合せ</li>
</ul>
<h2>新着情報</h2>
<h3>新商品のご案内</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<h3>展示会への出展</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<h3>環境への取り組み</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small>
</body>
</html>CSSソース（base.css）@charset "utf-8";
body {
font-size:95%; /* フォントサイズを95%にする */
font-family: "ＭＳ ゴシック",sans-serif; /* フォントの種類をゴシック系にする */
line-height:1.5; /* 行の高さを1.5倍にする */
color:#333333; /* 文字色を濃い目のグレーにする */
}
#menu li {
list-style-type:none; /*リストマーカー無しにする*/
display:inline; /*リスト項目をインライン表示にする*/
}HTMLファイルとCSSファイルをそれぞれ保存したら、ブラウザで表示してみましょう。 ブラウザ上の表示に変化が無く、スタイルがそのまま維持されていれば成功です。
li要素の表示形式は、初期値ではリスト項目が改行されて縦に並べて配置されるリストアイテム表示となっています。 これを横に並ぶようにli要素をインライン表示に変更します。 要素の表示形式を変更するには、CSSのdisplayプロパティを使用します。
▶︎変更前を確認する
CSSには、idセレクタ以外にも様々なセレクタ（selector）が用意されています。
▶︎ 変更前を確認する
|
| 要素の表示スタイルは、displayプロパティで変更できる
|
i {display:inline;} は、「li要素をインライン表示にしなさい」という意味です。 li要素の表示スタイルは、初期値ではdisplay:list-item; というリストアイテム表示になっています。
以下の一覧は、すべてを覚える必要はありません。 今の時点では、CSSでは様々なセレクタが利用できるということを知っておけば十分です。 将来、スタイルを適用する対象を様々な条件で指定する際に、より効率良く指定できるセレクタは無いか確認する際に見返せば良いでしょう。
尚、以下の一覧のなかに出てくるEというのはElement、つまり、要素のことです。また、fooやbarは属性名や属性値などを表しています。
* …… すべての要素
E …… 特定の要素 E , E …… 複数のセレクタに同じスタイルを適用する E[foo] …… foo属性を持つE要素 E[foo="bar"] …… foo属性の値にbarを持つE要素 E[foo~="bar"] …… foo属性の値候補（ホワイトスペース区切り）にbarを持つE要素 E[foo^="bar"] …… foo属性の値がbarで始まるE要素 E[foo$="bar"] …… foo属性の値がbarで終わるE要素 E[foo*="bar"] …… foo属性の値にbarを含むE要素 E[foo|="en"] …… foo属性の値候補（ハイフン区切り）がenで始まるE要素 E:root …… 文書のルートとなる要素 E:nth-child(n) …… n番目の子となるE要素 E:nth-last-child(n) …… 後ろから数えてn番目の子となるE要素 E:nth-of-type(n) …… n番目のその種類の要素 E:nth-last-of-type(n) …… 後ろから数えてn番目のその種類の要素 E:first-child …… 子として最初のE要素 E:last-child …… 子として最後のE要素 E:first-of-type …… 最初のその種類の要素 E:last-of-type …… 最後のその種類の要素 E:only-child …… 子として唯一となるE要素 E:only-of-type …… 子として唯一となるその種類の要素 E:empty …… 要素内容が空となるE要素 E:link …… 未訪問のリンク E:visited …… 訪問済のリンク E:active …… クリック中の要素 E:hover …… カーソルが乗っている要素 E:focus …… フォーカスされた要素 E:target …… リンクのターゲット先となるE要素 E:lang(fr) …… 特定の言語を指定された要素 E:enabled …… 有効となっているユーザーインターフェース要素（テキストエリアなど） E:disabled …… 無効となっているユーザーインターフェース要素（テキストエリアなど） E:checked …… チェックされているユーザーインターフェース要素（ラジオボタン・チェックボックスなど） E::first-line …… 要素の最初の行 E::first-letter …… 要素の最初の文字 E::before …… 要素の直前に内容を挿入する E::after …… 要素の直後に内容を挿入する E.warning …… 特定のclass名がつけられた要素 E#myid …… 特定のid名がつけられた要素 E:not(s) …… sで指定するセレクタに当てはまらないE要素 E F …… E要素の子孫となるF要素 E > F …… E要素の子となるF要素 E + F …… E要素が直前に隣接しているF要素 E ~ F …… E要素の後ろにある同じ階層のF要素 ここまでの制作段階で、サンプルサイトは以下の状態となっています。
|
まとめ
- 要素にid名を付けて、そのid名をセレクタにしてスタイル指定する
- idセレクタを利用すると、効率良くスタイル指定できる
- CSSには、idセレクタ以外にも様々なセレクタ（selector）が用意されている
