これまでhead内でスタイルを設定する時、
セレクタにクラス名を指定する方法を使いました。
これによりそのタグ名の要素全体でなく、複数の限定したタグに対してスタイルを
指定できます。
例えば次のようなスタイルがheadの中で指定されているとします。
<style type="text/css">
p { background-color: yellow; line-height: 1.5em; margin: 5px;}
span { font-weight: bold; }
p.waku { border: double 3px green; } /* 緑2重線の枠 */
span.waku { border: double 3px green; } /* 緑2重線の枠 */
</style>
上記では、wakuのクラス名で
p と spanの要素名に限定して
使うスタイルを指定しています。
さてこのように、異なるタグで同じスタイルを施したい場合、
要素名を限定しない .クラス名だけのセレクタでスタイルを指定できます。
上記の例であれば次のように書きます。
<style type="text/css">
p { background-color: yellow; line-height: 1.5em;}
span { font-weight: bold; }
.waku { border: double 3px green; } /* 緑2重線の枠 */
</style>
上記の.wakuのセレクタは、
*.wakuと書いても同じです。
*は、「任意の〜」という意味の表現です。
（当サイトでは、*を書かないスタイルで
表現します。出題に答える場合もそうしてください。）
このようなクラス名を使うbody内の記述例を示します。
左のイメージに見えるソースが右です。
|
TCP/IPは、 インターネットで使われる プロトコルの集合を意味する用語です。 プロトコルとは、 手続きや仕様などの規則を意味する言葉です。 |
<p>TCP/IPは、 <span class="waku">インターネット</span>で使われる <span>プロトコル</span>の集合を意味する用語です。</p> <p class="waku">プロトコルとは、 手続きや仕様などの規則を意味する言葉です。</p> |
上記で２通りの<style > 〜</style>を示しました。
要素名をp と spanに
限定したクラス名指定と、
限定をしないwakuのクラス名指定です。
どちらを使っても、右上のソースで左上のイメージの表示が得られます。
では、どちらを使うべきでしょうか？
後述の限定なしであれば、
例えば他のh1、li、b 、aなどにもにも使えて便利そうです。
しかし実は、どのタグにも使えるということが不便の場合もあるのです。
例えば過去に作った（または別の人が作った）大きなHTMLの内容を
修正する場合を想像してください。
希望の箇所のスタイルを変更したい場合、
そのクラス名がどのタグにでも使えると、
たくさんの箇所でも使われて
変更が希望しない広範囲に影響することがあります。
その場合は修正に大きな手間が必要でしょう。
対してタグの要素名を限定したクラス名であれば、
限定される分だけ変更の影響は少なくなります。
つまり後からの修正を考えた場合は、タグ要素を限定してクラス名を
付けた方が手間を少なくできる可能性が高いという訳です。
ですが、「クラス名がどのタグにでも使える」ようにするこは利便性を高める効果もあります。
タグ内のclass=""の設定では、クラス名を半角スペースで複数指定できるからです。
例えば<p class="waku BW">○○○○</p>ではれば、
「waku」と「BW」のクラスで指定した2種類のスタイルを指定できたことになります。