Perl Perl_3 css

2015年01月21日

! Perl - CSS 利用 05 CSS のセレクタと class, id (0x151)

目次 - Perl Index

Theme

Perl について、復習を兼ねて断片的な情報を掲載して行く連載その 0x151 回。

CGI.pm で、「カスケーディングスタイルシート」( Cascading Style Shieets : CSS ) の指定方法を確認する。

今回は、Getting Started - MDN "チュートリアル第1章" の "Selectors" ( セレクタ ) を確認します。

CSS の用語

マークアップ言語のスタイルを記述する「 CSS 」は、スタイルを記述するためのプログラミング言語です。「 CSS 」は、その他のプログラミング言語と同じように、独自の用語を持っています。

今回は、「 CSS 」の用語の中から「セレクタ」を確認します。

セレクタ

(0x14e) では、 CSS のサンプルファイル「 style1.css 」に、次のスタイルを記述しました。



strong {color: red;}

(0x14d) では、この記述の内、「 color 」を「 property 」と呼び「 red 」を「 value 」と呼ぶことを確認しました。また、「 { } 」で囲まれた部分は「ブロック」と呼び、全体を「規則セット」( ruleset ) と呼ぶことも確認しています。

つまり、「 : 」( colon ) でセパレートされた「 color: red 」が「規則」( rule ) であり、「規則」はブロック内で複数記述 ( rule set ) 出来ます。

上記ルールは、文字列「 strong 」から始まっています。(0x14e) で確認した通り、これは、HTML 要素「 strong 」を指定しますが、CSS ではこれを「セレクタ」( selector ) と呼びます。

「セレクタ」は、HTML 要素だけを指定するものではありません。

CSS の「セレクタ」は、HTML 要素 ( element ) の他に、HTML 属性 ( attribute ) である「 class 」と「 id 」の指定にも利用します。

属性 class

HTML 属性「 class 」は、HTML 要素 ( タグ ) 内で、「 class="class_name" 」と記述して、その HTML 要素を「 class_name 」という名前のクラスに所属させます。

次の項で確認する属性「 id 」と異なり、属性「 class 」は 1 つのドキュメント ( 1 ページ ) 中で複数回利用することが出来ます。

つまり、次の様に「 class_name 」というクラスに属する要素はいくつあっても構いません。



<p class="class_name"> ... </p>

   ...

   ...

<p class="class_name"> ... </p>

   ...

<p class="class_name"> ... </p>

属性 id

HTML 属性「 id 」は、HTML 要素内で、「 id="identification" 」と記述して、その HTML 要素に「 identification 」という識別子を与えます。

前述した属性「 class 」と違い、識別子とは固有の情報であるべき ( そうでなければ識別出来ない ) なので、1 つのドキュメント中では 1 つしか利用出来ません。

これは、通常ページのヘッダやフッタといった 1 ドキュメント中に 1 つしかない要素に指定します。

例えば、同じ要素「 div 」でも次の様に指定することで、まったく固有の要素として識別することが出来ます。



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

<div id ="main"> ... </div>

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

また、属性「 id 」は 1 ドキュメント中で固有であることから、次の様に「 # 」( numerical sign : hash mark ),「 id 」と指定することで、ページ内リンクを作ることも出来ます。



<a href="#identification">id が identification の要素に移動</a>

次のリンクは、属性「 id 」を利用したページ内リンクです。

--- id が identification の要素に移動 ---

属性「 id 」はこうした特性と利用方法を持つため、1 ドキュメント内で 1 つしか利用出来ないわけです。

HTML 属性「 class 」と「 id 」の使い分けについては、次のページに詳しく記載されています。具体的でポイントを押さえた分かりやすい解説です。

スタイルシートの class と id の使い分け - All About

なお、属性「 id 」は固有でなければなりませんが、「 id 」と「 class 」は併用 ( ひとつの要素に同時に指定 ) 可能です。

CSS セレクタとしての「 class 」と「 id 」

Selectors - MDN の例示では、HTML 要素「 p 」に対して、次の様に「 id 」と「 class 」を指定しています。



<p class="key" id="principal">

この class「 key 」と、id「 principal 」に対して CSS でスタイルを指定するには、次の様に記述します。

まず、class を指定します。CSS で class を指定する場合は、クラス名の先頭に「 . 」( period ) を追加します。



.key {color: green;}

id を指定する場合は、ページ内リンクを生成する場合と同じく、id の先頭に「 # 」を追加します。



#principal {font-weight: bolder;}

セレクタの優先度

1 つの HTML 要素に対して、複数のルールが同じ property で指定されていた場合は、class セレクタより id セレクタの方が優先されます。これは、より限定的なセレクタの優先度が高いことを意味します。

つまり、通常の HTML 要素名 ( タグ ) と class セレクタを比較した場合は、class セレクタの方がより限定的なので、class セレクタが優先されますが、class セレクタと id セレクタを比較した場合は、より限定的な id セレクタが優先されるということです。

また、同じ class セレクタであっても、次の様に HTML 要素名と組み合わせることで、より限定的して優先度を上げることが可能です。



p.key {color: green;}

また、セレクタには「 [type=button] 」の様に、属性「 type 」に値「 button 」が指定された要素のみを指定するものもあります。

仮に、同じスタイルシート内に、同レベルの限定度合いを持ったセレクタの衝突があった場合は、より末尾に近い ( 後から読み込まれる ) ルールを優先します。

セレクタの実例

Selectors - MDN の例示では、実施例として次の HTML コードが例示されています。

これは、"What is CSS" で作成したサンプルファイル「 doc1.html 」の中で、要素「 p 」で囲んだ行をコピーして、個別の属性「 id 」と属性「 class 」を指定したものです。



<!DOCTYPE html>

<html>

  <head>

  <meta charset="UTF-8">

  <title>Sample document</title>

  <!-- add css 00 -->

  <link rel="stylesheet" href="style1.css">

  </head>



  <body>

    <p id="first">

      <strong strong class="carrot">C</strong>ascading

      <strong strong class="spinach">S</strong>tyle

      <strong strong class="spinach">S</strong>heets

    </p>

    <p id="second">

      <strong>C</strong>ascading

      <strong>S</strong>tyle

      <strong>S</strong>heets

    </p>

  </body>

</html>

次に、(0x14e) で作成した CSS ファイル「 style1.css 」で次のスタイルを記述します。



strong {color: red;}

.carrot {color: orange;}

.spinach {color: green;}

#first {font-style: italic;}

これは、Web ブラウザによって次の様に表示されます。

! Perl - CSS 利用 05 CSS のセレクタと class, id (0x151)

HTML 要素名のセレクタ「 strong 」よりも、class セレクタ「 carrot 」と「 spinach 」が優先されています。

なお、この中で最も優先度が高いのは、id セレクタ「 font-style 」です。

0x151 -> 0x152 へ

CSS の「 class 」と「 id 」の使い分けをしっくり理解出来なかった僕は、過去に何度か Web 制作関係の方々に質問して来ましたが、いまいちしっくりくる回答を得ることが出来ませんでした。

しかしながら、今回の確認でその理解はかなり進みました。理解が進むのは気持ちがいいことです。

次回も引き続き CSS を確認します。

参考情報は書籍「初めての Perl 第 6 版」を中心に perldoc, Wikipedia および各 Web サイト。それと詳しい先輩。

目次 - Perl Index

同じカテゴリー（Perl）の記事

Perl mp2 翻訳 Web コンテンツ圧縮の FAQ (d228)
Perl mp2 翻訳既知のブラウザのバグの回避策をいくつか (d227)
Perl mp2 翻訳 Perl と Apache でのキュートなトリック (d226)
Perl mp2 翻訳テンプレートシステムの選択 (d225)
Perl mp2 翻訳大規模 E コマースサイトの構築 (d224)
Perl mp2 翻訳チュートリアル (d223)