MB-Support

パソコン初心者のサポートページ

より柔軟にスタイルを指定する class と id

 class ( クラス ) と id (アイディー)は、どちらも任意で名前を付けれら、その名前を指定された特定の範囲にスタイルを適用します。


前回は、スタイルの導入方法を3つ説明しました。 3つの方法では、最も柔軟にデザインできるのがタグに直接スタイルを記述する方法となります。 しかし、これでは管理する事が事実上できません。 かといって、外部スタイルシートや <head> 〜 </head> でタグごとにスタイルを決めてしまうと、ガチガチになりすぎてデザイン性が乏しくなります(管理する意味では便利ですが)。

そこで、class ( クラス ) と id (アイディー)でスタイルを指定する方法を紹介します。 簡単に言ってしまうと、どちらも任意の名前を付けて、その名前をタグに記入します。 こうすることで、タグによる指定よりも柔軟にデザインする事が可能になります。

しかし、class と id を知る前に、親要素と子要素を知っておきましょう。 例えば、以下の文章を入力する場合。


どちらも「ホームズ」だけ色を変更していますね。 一色で統一するのであれば、「ホームズ」の部分を範囲を指定するインラインレベルの <span> 〜 <span> で囲み、スタイルシートで要素 span に特定の色を指定すれば終了です。

しかし、上の例では赤と青の2色を使っています。 この場合は、親要素に対して異なるスタイルを適用します。


HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" x-undefined>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<style type="text/css">
<!--
p span    {
                color:#FF0000;
                font-weight:bold;
}
ul span   {
                color:#0000FF;
}
-->
</style>
</head>
<body>
<p>
探偵 シャーロック<span>ホームズ</span>
</p>
<ul>
 <li>シャーロック<span>ホームズ</span>の冒険</li>
 <li><span>ホームズ</span>の四人の署名</li>
</ul>
</body>
</html>

ブラウザ

親要素 <p> で囲まれた部分で、子要素である <span> で囲まれた範囲を、文字色赤、太字にするためのスタイルは以下。親要素の次に半角スペースを入れて子要素を指定します( p span )。

p span    {
                color:#FF0000;
                font-weight:bold;
}

これと同じで、親要素 <ul> で囲まれた部分で、子要素である <span> で囲まれた範囲を、文字色青にするためのスタイルが以下です。親要素の次に半角スペースを入れて子要素を指定します( ul span )。

ul span   {
                color:#0000FF;
}

親要素によって指定する事で、同じ子要素であっても別のスタイルを指定できます。 しかし、これだけでは柔軟に対応する事はできません。そこで、class と id を利用します。 class と id でも、親要素と子要素を利用する事が可能です。


親要素と子要素で柔軟にスタイルを適用するためには、文章の構成を明確にする必要があります。 例えば以下のサンプルは、ヘッダー、ドキュメント、フッターを<br />だけで記述した場合です。


HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>MB-Support</title>
</head>
<body>
<a href="URL">MB-Support</a> ヘッダー
<a href="URL">メニュー1</a>
 <a href="URL">メニュー2</a>
 <a href="URL">メニュー3</a><br /><br />
このページは<a href="URL">ホームページの作り方</a>
「CSS」に関するサンプルです。この文章はページのドキュメント部分となります。
<br /><br />
<a href="URL">コピーライト</a> フッター
</body>
</html>

ブラウザ

さて、この文章でヘッダーとフッターだけリンク文字色と下線を除去して、ドキュメントに埋め込まれたリンクだけ通常のリンク文字の動作を実現するにはどうすれば良いのでしょうか? リンクの文字色を変更する方法と、リンクの下線を消す方法を利用しますが、指定する場所がbodyでは、 <body>〜</body>の範囲のソースに全て適用されてしまいます。そこでページ構成を<div>(ディビジョン)で分けると便利です。


HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>MB-Support</title>
<style type="text/css">
<!--
.menu a,menu a:link,menu a:visited,menu a:active {
color:#000000;text-decoration:none;
}
-->
</style>
</head>
<body>
<div class="menu">
<a href="URL">MB-Support</a> ヘッダー<br />
<a href="URL">メニュー1</a>
 <a href="URL">メニュー2</a>
 <a href="URL">メニュー3</a>
</div>
<div class="doc">
<p>
このページは
<a href="URL">ホームページの作り方
</a>
「CSS」に関するサンプルです。この文章はページのドキュメント部分となります。
</p>
</div>
<div class="menu">
<a href="URL">コピーライト</a> フッター
</div>
</body>
</html>

ブラウザ

ヘッダー、ドキュメント、フッターをそれぞれ<div>〜</div>で囲み、ヘッター、フッターとドキュメントのclassを変更してあります。 これにより、ドキュメントに埋め込まれたリンクはノーマル表示で、メニューであるヘッダーとフッターのリンクだけにスタイルが適用されます。 文章を表示するだけと考えた場合、 <div>や<p>を利用する意味が分かりにくいですが、スタイルを埋め込む場合は文章構造が重要になります。


任意の名前を付けれらる class と id

<p>、<div>、<span> などで囲まれた部分に名前を付けてスタイルを指定する方法です。例えば、<span> 〜 <span> の部分に id として名前を付けると以下になります。


HTMLソース(メモ帳)

〜 省略 〜
#red   { color : #FF0000 }
〜 省略 〜
<p>私は<span id="red">ホームズ</span>だ</p>

ブラウザ

スタイルシートでidを指定する場合は、先頭に「#(半角シャープ)」を付け、アルファベットから始まる文字を付けます。 先頭がアルファベットであれば、半角数字を挿入しても構いません。「_(アンダーバー)」は解釈できないブラウザもあるので、なるべく使わない様に心がけましょう。

id で指定したスタイルを読み込むためには、タグに id="idの名前" を入力します。上の例では、インラインレベルの <span> に挿入しています。これで、<span id="red"> 〜 </span> で囲まれた範囲は、#red で指定したスタイルが適用されます。次は class で同じ事を実行してみましょう。


HTMLソース(メモ帳)

〜 省略 〜
.red   { color : #0000FF }
〜 省略 〜
<p>私は<span class="red">ホームズ</span>だ</p

ブラウザ

スタイルシートでclassを指定する場合は、先頭に「.(ドット)」を付け、アルファベットから始まる文字を付けます。 先頭がアルファベットであれば、半角数字を挿入しても構いません。「_(アンダーバー)」は解釈できないブラウザもあるので、なるべく使わない様に心がけましょう。

class で指定したスタイルを読み込むためには、タグに class="idの名前" を入力します。上の例では、インラインレベルの <span> に挿入しています。これで、<span class="red"> 〜 </span> で囲まれた範囲は、#red で指定したスタイルが適用されます。



class と id の違い

. と # の違いですが、. で始まる class は、一つのページに何度でも利用する事ができます。 つまり、頻繁に同じフォントカラーを利用するのであれば、上の例では class を使うのが良いでしょう。 .red は body 内で何度でも指定できます。

一方、# で始まる id は、一つのページで1度しか指定できません。 しかし、現在の主流なブラウザでは、正しく解釈されてしまうようです。 つまり、気にする事は無い・・・と言いたいところですが、やっぱり気にする必要があります。

id は、一つのページに絶対に1つしか使ってはいけません。 もちろん、id 名が異なれば問題ありません。 スタイルシートにおいては、class と似ている様に解釈されますが、JavaScript などが絡んでくると id の一意性が露骨にでます。 JavaScript で処理した結果を返す場所に、id を用いるからです。 これにより、同じ id 名を付けてしまうとトラブルの元になります。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項