スタイル・シートで<p>タグについてデザインを指定すると,ページ内すべての<p>タグにスタイルが適用されてしまいます。場合によってはページ内の特定の<p>タグのみにスタイルを適用したいといったこともあります。例えば,Webページの本文についてはフォント・サイズを12pt,注意書きの文書についてはフォント・サイズを10ptにしたいなどです。
この様な場合には,「クラス」が利用できます。クラスはタグに別称を付けて,それぞれに個別なスタイルを指定指定することが可能です。例えば,<p>タグをそのまま利用した場合はフォント・サイズを12pt,<p>タグのnoteクラスではフォント・サイズを10ptにするといった事が可能です。
クラスでスタイルを指定する場合は,以下のように対象のタグの後ろにピリオド(.)で区切って任意のクラス名を指定します。
タグ名.クラス名 { プロパティ : 値; }
例えば,上記したフォントの指定をする場合は以下のように記述します。
p { font-size : 12pt; }
p.note { font-size : 10pt; }
1行目は通常<p>タグに適用されるスタイル,2行目はクラス「note」を指定した<p>に適用されるスタイルです。
クラスでのスタイルを利用する場合は,以下のようにタグにclass属性でスタイル・シートで指定したクラス名を記述します。
<タグ class="クラス名">
例えば,上記の<p>タグについてのスタイルであれば以下のように利用します。
<p>Linuxは,様々な企業や団体が提供しています。この提供する配布形態を「Lin
uxディストリビューション」といいます。</p>
<p class="note">Linuxディストリビューション:OSの中核となるLinuxカーネ
ルのほかに,ブート・ローダーやグラフィカル環境,各種アプリケーションなど
のアプリケーションをパッケージングして配布する形態のこと。また,パソコン
にインストールするためのインストーラが付属することが多い。</p>
この場合は,下の<p class="note">タグの文書のフォント・サイズが10ptで表示されます。
また,タグ名を省略することもできます。省略をすると,すべてのタグについてクラスのスタイルが有効になります。例えば,以下のようにスタイルおよびHTMLを記述すると,「class="bold"」属性の付いたすべてのタグに対してboldクラスのスタイルが適用されます。
● スタイルの記述
.bold {font-weight : bold;}
● HTMLの記述
<h1 class="bold">クラスの指定</h1>
<p>クラスを利用すれば,「<span class="bold">特定のタグに対してのみスタイ
ルを指定</span>」指定することができます。</p>