idセレクタによるスタイル指定
さらに制作を進めるに当たって、より効率良くスタイルを指定していくためにidセレクタという指定方法を利用することにします。
HTMLソース中にid属性で名前を付けて、そのid名をセレクタにするということです。
HTMLファイルのindex に以下の記述を追加してください。
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を以下のように変更してください。
CSSソース(base.css)
@charset "utf-8";
body {
font-size:95%; /* フォントサイズを95%にする */
font-family: "MS ゴシック",sans-serif; /* フォントの種類をゴシック系にする */
line-height:1.5; /* 行の高さを1.5倍にする */
color:#333333; /* 文字色を濃い目のグレーにする */
}
#menu li {
list-style-type:none; /*リストマーカー無しにする*/
display:inline; /*リスト項目をインライン表示にする*/
}
HTMLファイルとCSSファイルをそれぞれ保存したら、ブラウザで表示してみましょう。
ブラウザ上の表示に変化が無く、スタイルがそのまま維持されていれば成功です。
変わったのは、スタイルの内容ではなくスタイルの指定方法です。
idセレクタ
今まで、スタイルの指定をする際には、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は属性名や属性値などを表しています。
- * …… すべての要素
- 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)が用意されている
<前へ | 目次へ | 次へ> |