2009/12-2022/04/06

CSS はじめの一歩 (3)

CSS はじめの一歩 (2) からの続きです。

CSS: 適用する要素の指定方法 (セレクタ)

TestCSS_selector01.html
要素名 {...} で指定する。
文書内のすべての指定要素に対してスタイルが適用されます。
TestCSS_selector02.html
親要素名子要素名 {...} で指定する。
スタイルを適用する範囲を親要素以下に制限できます。
特定のブロック以下の要素にスタイルを適用したい場合に使います。
TestCSS_selector03.html
要素名は 3段以上の深さ (親要素名子要素孫要素 ... {...}) も指定できます。

div、p など HTML 内で多く使用される要素で、同じスタイルを適用したい要素が複数の場所に分散しているときにクラス (class) 指定を使用すると便利です。

使用例

◎ CSSの書き方

.classname {    /* 先頭にピリオドをつけてクラス名を書く */
  ...
}

◎ HTMLの書き方

<要素名 class="classname">  /* class="クラス名" で指定 */

ID名を持つ要素は、HTML ファイル内で 1つの ID名に対して 1回だけ使えます。同じ ID名を 2箇所以上で使いません。もし誤って同じ ID名を繰り返し使うと、誤った表示や JavaScript の誤動作の原因になります。

タグ内に 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 {
  ...
}