初心者でもわかるCSS ②【idセレクタ・classセレクタ】

id属性とclass属性を使ってCSSを書いてみる【入門・初心者向】






HTMLにスタイルシートを適用する場合「要素セレクタ」「idセレクタ」「classセレクタ」の3種類の指定方法があります。

CSSの基本的な書き方については、過去記事で解説しているので読んでみてください。
DTPデザイナーでもわかるCSS【入門・初心者向】

同じコードを記述すれば、見た目も同じ結果になりますが、それぞれ用途と書き方が違います。コーディングする際に、しっかりと使い分けする必要がありますので解説したいと思います。

HTML側で事前に id属性・class属性 を決めておく

HTMLでid名・class名指定する

CSSでコードを記述する前に、HTML側で準備をしておく必要があります。
要素名の後ろにid属性またはclass属性を追加し、値としてid名・class名を決めておきます。

HTMLで属性名を指定

要素にid属性を追加する場合

要素にclass属性を追加する場合

どれだけCSS側でコードを書いても、HTML側でid属性またはclass属性が指定されてないと、スタイルが反映されません。HTML側で必ずid名・class名を指定してください。

セレクタを要素名にしてCSSを書く

用途

セレクタを要素名にすると、指定した全ての要素にスタイルを適用します。
サイト内の本文・見出し・リンク色など、ページをまたがって同じ見せ方をする部分に対して有効な指定方法です。

コードの書き方

CSSを要素で指定する

値の後ろの「;」(セミコロン)を忘れずに記述しましょう。

ページの<p>〜</p>で囲まれた全ての箇所の文字サイズが16pxになります。

デメリット

指定したタグ全てにスタイルが適用される為、部分的に処理を変える事ができません。

セレクタにid名を追加してCSSを書く

用途

セレクタをid属性にすると、セレクタで指定したid名が記述されている箇所に限定してスタイルを適用します。

id名は「固有の名前」を割り当てるので、同じid名は1ページ中に1度しか使えません。
特定の箇所に限定的にスタイルを適用する場合に使用します。

コードの書き方

CSSをid属性で指定する

id名の前に「#」(シャープ)をつけます。要素名は省略可能です。

<p id=”id-name”>〜</p>で囲まれた1箇所だけ文字サイズが16pxになります。

デメリット

ページ内に1度しか使用する事が出来ない為、複数箇所で同じ処理をしたい場合は不向きです。
ページが変わればid名は重複できるので、ヘッダーやフッターなどのページをまたがって使うパーツには、同じid名を使用できます。

セレクタにclass名を追加してCSSを書く

用途

class属性は、複数箇所に同じスタイルを適用する場合に使用します。

class名は、id名と違ってページ内で何回でも使用できるので、汎用性もありデザインの幅が大きく広がります。

コードの書き方

CSSをclass属性で指定する

class名の前に「.」(ドット)をつけます。要素名は省略可能です。

ページ内の<p class=”class-name”>〜</p>で囲まれた箇所の文字サイズが16pxになります。

デメリット

基本的にclass属性を使用するデメリットはないと思いますが、あらゆる箇所で使用できるので、class名にルール付けをしておく必要があります。
好き勝手にclass名を付けると、自分以外がコードを編集する場合や、メンテナンス時にどの箇所のスタイルか判別がつきにくくなります。

スタイルシートの優先順位

CSSには「優先順位」という考え方があります。
「優先順位」について知っておくと、思ったようにスタイルが反映されない場合やコーティングをする際に役立ちます。.

後から書いたコードが優先される

上記のように<p>に対して、文字色を黒にするスタイルを指定した後に、文字色を赤にするスタイルを指定すると、後から記述したコードが優先されます。

思ったようにコードが反映されない時は、記述が重複して上書きされている場合もあるので、一度確認してみる事をオススメします。

セレクタはid名が優先される

セレクタに指定する要素名・id名・class名の3つの中では、id名が一番優先順位が高く設定されています。
例えば、下記のようなコードの場合は何色になるでしょうか。

HTML

CSS

文字色は「red(赤色)」になります。
本来は後から記述したp.blue{color: blue;}が優先されて、文字色は青色になるはずですが、class属性よりid属性の方が優先順位が高いので、結果的に文字色は赤色になります。

CSSの優先順位

CSSの優先順位はデザイン処理を施す時や、スタイルがうまく反映されない時の解決策にもなりますので、しっかりと覚えておきたいですね。

まとめ

CSSはWEBデザインには欠かせない知識で、特にid属性・class属性はあらゆるページで色々な使い方をします。それだけ用途が多いので、WEBデザイン初心者でも避けては通ることはできません。

id名の制約と優先順位さえ覚えてしまえば、特に難しい事もないと思うので、WEBデザイン初心者の方はコードをたくさん書いて慣れてください。

id属性とclass属性を使ってCSSを書いてみる【入門・初心者向】でした


HTML&CSSとWebデザインが 1冊できちんと身につく本

これから本気で学びたい人の最高の教科書!
Amazon内のレビューでも高評価の書籍です。初心者向けのCSSの基本から、レスポンシブデザインなどのワンランク上の内容まで、わかりやすく丁寧に解説されています。写真も多く使用されているので全体的に見やすい構成になっています。HTMLはわかるけどCSSはちょっと…という方にオススメです。







id属性とclass属性を使ってCSSを書いてみる【入門・初心者向】