CSS はじめの一歩 (3)
CSS はじめの一歩 (2) からの続きです。CSS: 適用する要素の指定方法 (セレクタ)
要素名で指定する
- TestCSS_selector01.html
要素名 {...} で指定する。
文書内のすべての指定要素に対してスタイルが適用されます。 - TestCSS_selector02.html
親要素名 子要素名 {...} で指定する。
スタイルを適用する範囲を親要素以下に制限できます。
特定のブロック以下の要素にスタイルを適用したい場合に使います。 - TestCSS_selector03.html
要素名は 3段以上の深さ (親要素名 子要素 孫要素 ... {...}) も指定できます。
クラス (class) 名で指定する
div、p など HTML 内で多く使用される要素で、 同じスタイルを適用したい要素が複数の場所に分散しているときに クラス (class) 指定を使用すると便利です。
使用例- 同じ要素 (divなど) が複数並んでいるが、 それぞれ別のスタイルを適用したい場合。
- main p {...} のように、親要素から限定する指定だけでは 対応できない場合。 異なるブロックにある要素に同じスタイルを適用したい場合。
◎ CSSの書き方 .classname { /* 先頭にピリオドをつけてクラス名を書く */ ... } ◎ HTMLの書き方 <要素名 class="classname"> /* class="クラス名" で指定 */
ID 名で指定する
ID名を持つ要素は、HTML ファイル内で 1つの ID名に対して 1回だけ使えます。 同じ ID名を 2箇所以上で使いません。 もし誤って同じ ID名を繰り返し使うと、誤った表示や JavaScript の誤動作の原因になります。
タグ内に style="..." で直接記述する
タグ内に style="スタイル" と書いて直接指定する方法もあります。
例 <p style="color:#f00; line-height:1.8;">....</p>
どちらかというと間に合わせ的な書き方です。 同じスタイルが繰り返し出てくる用途には適しません。 同じスタイルを複数の場所に繰り返し書くと、 書く手間や変更の手間が増えるのでメリットがありません。 なるべく <style> や CSS ファイルに分離した方がよいです。
style= 指定は HTML 内でそのスタイルを適用したい場所が 1箇所しかないときに使うことがあります。 たとえば、 Web アプリケーションの部品のサイズ指定など、 CSS ファイルに分離するよりも HTML 内に一緒に書いてある方が分かりやすい場合に使います。
以上まとめ
セレクタの種類 (基本的なもの)
- 要素名で指定する
main { ... } main p { /* 親要素と組み合わせてスタイルが適用される範囲を限定する */ ... } main p b { /* 3段以上の深さも指定可能 */ ... }
- クラス名で指定する。
/* 名前の先頭にピリオドをつける。 */ .class_name { ... }
- ID 名で指定する。
/* 名前の先頭に # をつける。*/ #id_name { ... }
- タグ内に style="スタイル" で直接書く。
<p style="color:#f00;">....</p>
その他
HTML 次の一歩 に続く