初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL3. スタイル設定の書式　その1★外部ファイルを作成する

２．「idセレクタ」と「クラスセレクタ」

例えば段落を示す p 要素は、ひとつのページ内で右寄せ、左寄せ、中央表示が選べるわけですが、ページ内でこの段落は右寄せ、あの段落は左寄せと p 要素の扱いを変えたい場合が出てきますね。また、段落によってはフォントの種類や色などをデザインに応じて変えたい場合も出てきます。この時、CSS外部ファイルに p というセレクタに対する設定がひとつしか行えないとしたら、大変困るでしょう。そこで、ひとつの要素に対して複数の設定が必要になった時に、それぞれの設定に任意の名前を付けてHTML上で個別に呼び出せるようにしたのが「idセレクタ」や「クラスセレクタ」と呼ばれるものです。

�@）ｉｄセレクタ　... 基本的に以下の3通りの書式があります。

例えばページ内の一部をグループ化する div 要素に、いくつか個別の設定をしたい場合、

div#header {  　設定     }

div#links {   　設定     }

div#contents { 　  設定　　　}

div#footer {    設定    }

以上のように要素名の後に「#」を付けて、任意の名前を指定します。公式化すると...

要素名#任意の名前 {   設定   }

また、要素を限定せず、どのタグからでも特定の id を呼び出すようにすることもでき、その場合CSSでの設定は要素名の代わりに「*」を用いて以下のように書きます。また、「*」はこのように組合わせて用いられている場合は省略も可能なので、以下の二つは同じ意味を表していることになります。記述が最も短くて済むのは最後の例ですので、一般によく用いられているようです。

*#任意の名前 {  　設定     }

#任意の名前 {  　設定     }

こうして設定された内容をHTML上で呼び出すためには、タグ内に <div id="任意の名前">　のように記述します。上の例では、

<div id="header"> 〜 </div>

<div id="links"> 〜 </div>

<div id="contents"> 〜 </div>

<div id="footer"> 〜 </div>

のようになり、それぞれ任意の名前で設定が呼び出されている<div>〜</div>の範囲内でのみ、CSSが反映されます。

�A）クラスセレクタ ... 基本的に以下の3通りの書式があります。

今度はクラスセレクタで、画像を指定する img 要素に個別の設定をしてみましょう。

img.left {  　設定     }

img.right {   　設定     }

クラスセレクタでは、以上のように要素名の後に「.」を付けて、任意の名前を指定します。公式化すると...

要素名.任意の名前 {   設定   }

また、idセレクタ同様に要素を限定せず、どのタグからでも特定のクラスを呼び出すようにすることもでき、その場合もCSSでの設定は要素名の代わりに「*」を用いて以下のように書きます。また、「*」はこのように組合わせて用いられている場合は省略も可能なので、以下の二つは同じ意味を表していることになります。記述が最も短くて済むのは最後の例ですので、一般によく用いられているようです。

*.任意の名前 {  　設定     }

.任意の名前 {  　設定     }

こうして設定された内容をHTML上で呼び出すためには、タグ内に <img class="任意の名前">　のように記述します。上の例では、

<img src="画像名"　width="..." height"..." class="left"> 

<img src="画像名"　width="..." height"..." class="right"> 

のようになり、それぞれ任意の名前で設定が呼び出されている<img>タグが指定する画像にのみ、CSSが反映されます。

「idセレクタ」も「クラスセレクタ」も、任意の名前による設定が可能であることは同じですが、W3Cによる定義では「idセレクタ」はページ内で一度しか呼び出せないという規定があるようです。現在のブラウザでは一般に idセレクタを何度呼び出しても動作していますが、この規定に従うとすれば以下のような使い分けが考えられます。

Webページにおいて視覚性を構成する要素は、「レイアウト（段組み）」と「細部デザイン」に大別できますので、

★レイアウト（段組み）に関わる指定に 「idセレクタ」

★細部デザインに関わる指定に「クラスセレクタ」

これは私見ですが、ひとつのページでレイアウトのためにグルーピングする設定は一度しか呼び出すことがなく、詳細設定は何度も呼び出す必要があることを考えれば、このように分けておくとHTMLやCSS上でページの構造を見るのにも便利ではないかと思います。

初級篇2.VOL3.スタイル設定の書式・その1-1 <<

>> 初級篇2.VOL3.スタイル設定の書式・その1-3