BLOG

CSSセレクタからid属性が消える！？class属性一択のシンプルな時代へ

Web制作に携わったことのある方ならご存知かと思いますが、HTMLのすべてのタグには、id属性とclass属性を追加することができます。もちろん同じタグに両方を追加しても大丈夫です。例えば…

<div id="wrap" class="wrap">

といった感じに、id属性とclass属性を<div>タグに追加しました。普段何気に使っている、それぞれの属性ですが、詳しい特徴などは意外と知らないものなんです。

私も駆け出しのころは、id属性、class属性、使い分けが分からず何となく使っていました。今回は、正しい使い方ということで、まずはそれぞれの特徴を見ていきましょう。

id属性の特徴

id属性は、要素に「ID名」をつけるために使われます。class属性と比べて大きく違う所は、同じHTMLドキュメントの複数タグに、同じID名をつけることはできないんです。例えば…

<h1 id="title">大見出し</h1>
<p>ホームページに必要なのは戦略である。</p>
<h2 id="title">中見出し</h2>
<p>ただデザインだけが良ければいいというものではない。</p>

というように、同じHTMLドキュメント内で同じid名はつけることはできないんです。

昔から思ってましたけど、このルールかなりややこしいですよね。idを複数使ってたのを、後から気づくこともありました。

id属性を使用してcssを適用する場合は、「idセレクタ」を使用します。

今でもcssで、idセレクタをせっせと記入しているコーダーの方も多いかと思いますが、idセレクタはどうしても使わなければいけないとき以外は、使用しない方が望ましいんです。知ってました？

なぜidセレクタは使用しない方がいいのか？

どうしてidセレクタは、使わない方がいいのでしょうか？それはclassセレクタに比べて、cssのスタイルを上書きしづらいんです。分かりやすく説明すると、idセレクタはかなり強いんです。なのでidはclassよりも優先されるんです。ということはclassをはじめ、他の弱いセレクタでは上書きできなくて、新規ページなどでデザインの変更が難しくなり、コードがかなり複雑になるんです。なので、原則としてidセレクタは使用しないようにしてください。

使用するのが「class」のみなら、シンプルで分かりやすいですよね。いつでも上書きできますから。これまでidとclassの使い分けが、曖昧でしたよね。ただ、下記の場合だけid属性を使用するようにしましょう。

これらの場合は、id属性の使用が必要となりますので、覚えておいてください。

class属性の特徴

class属性は、要素に「クラス名」をつけるために使われます。クラス名は、基本的にCSSセレクタで使用するための名前となっていて、先述したようにidセレクタは極力使用せず、classセレクタを使うようにしましょう。

classセレクタは上書きがしやすく、コードも分かりやすくシンプルに記述できるので、idセレクタの使用は避け、classセレクタを積極的に使ってくださいね。

また、class属性の大きな特徴として、HTMLドキュメント内で、同じクラス名を使用できるんです。さらに1つの要素に、複数のクラス名をつけることもできるんです。下記に一例。

<ul>
  <li class="item">アバウト</li>
  <li class="item">サービス</li>
  <li class="item contact">コンタクト</li>
</ul>

もっと分かりやすく言うと、全部にclass属性を使っても構わないんです。「id」を使わないといけないというルールはありませんから。

併用は避けよう

ここまでで分かったことは、「全部にclass属性を使ってもいい」ということですね。idはclassよりも優先されるというルールがあり、もしもidとclassを併用して使用したならば、「優先度の判別」がややこしくなってしまうんです。

idとclassの併用はコードが複雑になり、もはや意味が分からなくなる恐れがあります。

なので、idは極力使わず、classだけで記述する方が簡単なんです。併用は避けるようにしましょう。ただし…

上記の場合、id属性を使用しますのでご注意ください。

<span>タグの使い方

cssの上書きには、分かりやすい「classセレクタ」がオススメだということを理解していただけたかと思います。そして、部分的にスタイルを変更したい場合は、<span>タグを使用しましょう。<span>タグはそれ自体は何の意味も持たないタグで、主にCSSを部分的に適用するために使用します。このタグは、class属性を追加することが基本的なルールとなっています。

<p>160,000<span class="クラス名">円</span></p>

まとめ

いかがだったでしょうか、正しいid属性、class属性の使い方は？意外ときちんと理解していなかったのではないでしょうか。CSSを上書きしやすくするためには、class属性を積極的に使うことが大切なんですね。コードはなるべく複雑にならず、シンプルで分かりやすいものを心掛けるためにも、id属性は使用しないようにしましょう。

何度も言いますが、CSSのセレクタはclass属性一択で決まりです！