スタイルシートの技

スタイルシートにおけるクラスとIDの役割

それでは先ほどの3通りの書き方をマスターしたのであれば、 それらふまえてもう少し実用的な使い方をしてみます。 クラス（class）を作成すると色々場合に応じた使い分けができるようになります。 先程は要素に対してのスタイルシートでしたが、 例えば領域を赤色にする「red」というクラスを自分で用意して、 それを特定の文章やあらゆるものに対して適応させたい時には「.」（ピリオド）を付けます。 以下のサンプルを見てみましょう！このファイルを「color.css」とします。 訳あって、コンテンツは英文にしています。

color.css
*.red
{
   color: #ff0000;
}
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <link rel="stylesheet" href="color.css" type="text/css">
   <title>TEST</title>
</head>
<body>
   <h1 class="red">Technique of Style Sheet</h1>
   <hr>
   <p class="red">Style Sheet is very interesting !!</p>
</body>
</html>

これを作成してプレビューして見て下さい。 クラスで指定した箇所が赤色になっていますか？なっていない方は「lynx」のようなテキストベースのブラウザとか、 相当古いブラウザをお使いかも知れません。 このような場合にスタイルシートを利用します。 この場合の「*」はワイルドカードと言って、すべての属性を指すことになります。 ワイルドカードは省略可能で「.red」とも記述できますが、私はあった方がしっくりくるので付ける事にしています。 また、ある要素にしかそのクラスを適応したくない場合には、以下のようにします。

color.css
hr.red
{
   color: #ff0000;
}

今度も同様にプレビューしてみて下さい。「h1」の箇所は赤くならずに「hr」の箇所だけ赤くなりましたよね？ つまりそういう事なんです。また、class属性は殆どすべての要素の属性として存在します。 さて、応用としてクラスの中で更に細かい条件分けをしたい場合には、idと呼ばれるものを使います。 使い方は説明するよりも見た方が早いと思いますので、見て見ましょう。

color.css
*.red
{
   color: #ff0000;
}

*.red#Arial
{
   font-family: Arial;
}

*.red#Times
{
   font-family: 'Times New Roman';
}

これで、指定した部分を赤色にする「red」クラスの中にさらに詳細な分類分け 「Arial」「Times」というものが作成できました。 この「#」（シャープ）以降に書くと、「id」として扱われます。 「id」は英語の意味にもありますように、ユニークなものです。 文書中ではidで指定したものを複数の箇所で使う事は好ましくありません。 使い方は以下のようにします。尚、「font-family」というスタイルシートは指定箇所のフォント名を設定するものです。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <link rel="stylesheet" href="color.css" type="text/css">
   <title>TEST</title>
</head>
<body>
   <h1 class="red" id="Arial">Technique of Style Sheet</h1>
   <hr>
   <p class="red"  id="Times">Style Sheet is very interesting !!</p>
</body>
</html>

英字フォントである「Arial」と「Times New Roman」を利用しているのでコンテンツを今回は英語にしているという事でした。 実行結果をプレビューすると、フォントが変わっています。 「id」を使うと、更に細かい分類ができる…という事です。 使用頻度はあまり高くありませんが、使う事が出てくる事はありえますので覚えておくと良いと思います。 また、今回ではWindowsユーザに限った話しであり、 Macintoshでは存在しないフォントがありますので、 Macintoshの方は「Chicago」や「Helvetica」や「Osaka」にして見て下さい。

top