同じタグでデザインを分ける（CSS）

CSSはＨＴＭＬのタグに対してデザインの定義をおこないます。

ただ、同じタグでもデザインを違うものにしたい（分けたい）という場合がでてきます。
例えば、通常では文字を黒くして、ある特定の場所だけ文字を赤くしたいといった場合です。

こういったときに使われるのが「id」と「class」です。

「id」と「class」とは？

「id」と「class」は、HTMLタグの属性の一種で、そのタグに付ける名前みたいなものです。
設定をおこなったとしても表示上はなんも変わりはありません。

このように「id="●●"」や「class="●●"」という風にタグの中に記述します。
●●の部分は自由に決めて入力することができます。

「id」と「class」は何が違うのかというと、
「id」は固有のもので同じHTML内に同じ値をつけた「id」を複数使うことができません。
「class」は同じHTML内で同じ値を持つ「class」があってもＯＫです。

「id」は同じ名前を複数使えない、「class」は同じ名前を複数使えるということですね。

「id」と「class」を使ってデザインを分ける

「id」と「class」を使ってタグに名前を付けることで、そのタグを指定してデザインを変えることができます。

例えばHTMLとCSSは以下のようにしたとします。

ブラウザで表示すると上のようになります。
CSSがpタグを赤文字に変えるとなっているのですべての文字が赤色に変わります。

それでは、「おはようございます」だけを赤文字に変えるためにCSSを以下のように変更します。

このように「p#oha{ ～ }」というようにタグ名の後に「#」と値を指定すると
指定した値のidがついたタグだけをデザイン定義することができます。

次は、「こんにちは。」と「こんばんは。」を赤文字に変えるためにCSSを以下のように変更します。

「kon」というクラス名がついた「こんにちは。」と「こんばんは。」が赤く変わりました。
idの場合は「#」でしたが、クラスの場合は「.」（ピリオド）で値を指定する違いがあります。

このように「id」と「class」を使うことによって、同じタグであってもデザインを変えることができます。

１点だけ注意したいのは、「id」と「class」で指定したとしてもタグ全体の設定は引き継ぐという点です。

例えば以下のようにHTMLとCSSを指定したとします。

すべてのpタグが赤文字になっている点に注目してください。

id="oha"とclass="kon"には文字を赤くするというデザイン定義をしていませんが
pタグ全体として赤文字にするという設定を引き継いでいるためすべてのpタグが赤文字に変わっています。

全体の設定を引き継ぎたくない場合には、idやclassでデザインを再定義する必要があります。

HTML・CSS講座　記事一覧