さらに制作を進めるに当たって、より効率良くスタイルを指定していくためにidセレクタという指定方法を利用することにします。
HTMLソース中にid属性で名前を付けて、そのid名をセレクタにするということです。
HTMLファイルのindex に以下の記述を追加してください。
<!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ファイルをそれぞれ保存したら、ブラウザで表示してみましょう。
ブラウザ上の表示に変化が無く、スタイルがそのまま維持されていれば成功です。
変わったのは、スタイルの内容ではなくスタイルの指定方法です。
今まで、スタイルの指定をする際には、body要素に文字サイズの指定をしたり、li要素にリストマーカーなしにする指定をするなど、
要素の名前でスタイルの適用対象を指定していました。
今回変更したスタイルの指定方法では、ul要素にmenuというid名を付けて、そのid名をセレクタにしてスタイルを指定しています。
#menu li { ～ } は、「menuというid名が付けられた要素の下にあるli要素にスタイルを適用しなさい」という指定をしていることになります。
要素名でスタイル指定をすると、例えばli要素にスタイル指定をすると、ウェブページ内のすべてのli要素がそのスタイル指定の影響を受けてしまうことになります。
それを避けるために、id名を付けることでその箇所を特定してスタイル適用できるようになります。
今の段階ではスタイル指定の内容がまだ単純であるため、あまり必要のない変更かもしれません。
しかし、この先スタイル指定がだんだん複雑になっていくにつれて、このidセレクタによるスタイル指定がとても便利に感じられるようになってきます。
CSSでは、要素名をセレクタにするだけではなく、idセレクタのようにスタイルを指定する対象を制作者側で設計できることを覚えておきましょう。
CSSには、idセレクタ以外にも様々なセレクタ（selector）が用意されています。
以下の一覧は、すべてを覚える必要はありません。
今の時点では、CSSでは様々なセレクタが利用できるということを知っておけば十分です。
将来、スタイルを適用する対象を様々な条件で指定する際に、より効率良く指定できるセレクタは無いか確認する際に見返せば良いでしょう。
尚、以下の一覧のなかに出てくるEというのはElement、つまり、要素のことです。また、fooやbarは属性名や属性値などを表しています。
ここまでの制作段階で、サンプルサイトは以下の状態となっています。
| <前へ | 目次へ | 次へ> |