CSSのclassとidの基本ルール・id名とclass名の付け方

特定のHTMLタグに対してCSSを適用させたい場合には、そのタグにclass名やid名を付けます。

p {
    line-height: 20px;
    }

たとえばこのように書いた場合、サイト内の全てのpタグに対して行間が指定されますが、特定のpタグのみ行間を指定したい場合には以下のように記述します。

p.gyo {
    line-height: 20px;
    }

これで、「gyoというクラス名が付いたpタグ」に対してのみCSSが適用されます。「.gyo」という記述にしてもOKです。この場合、pタグに関わらず「.gyo」というクラス名が付いたタグにCSSが適用されます。

classとidとは

タグにはclassとidを使うことができます。どちらを使っても良いですし、両方使うこともできます。

<p class=”gyo1″>pタグにクラスを指定</p>
<p id=”gyo2″>pタグにIDを指定</p>
<p class=”gyo1″ id=”gyo2″>pタグにクラスとIDを指定</p>
<p class=”gyo1 mainp”>pタグに複数のクラスを指定</p>

このように書くことができます。

基本ルール

  1. class名やid名の頭文字は英字
  2. ページ内に同じid名は1回しか使えない
  3. ページ内に同じclass名は何度でも使える
  4. classは1つのタグに複数指定できる
  5. classとidを同時に指定できる

初心者がやってしまいがちなのが、class名やid名を数字で始まる名前にしてしまうことですが、頭文字は英字にしなければなりません。英字+数字の組み合わせはOKです。また、ハイフンやアンダースコアを使うこともできます。

1つのページ内で、同じidを複数指定しても問題が発生しないことも多いですが、基本ルールとしては、id名はそのページ内でユニークな状態にします。class名は同じ名前を何度も使うことができます。

class名とid名の付け方

全てidで指定しても良いですし、全てclassで指定しても良いのですが、色々なサイトを見ていると、サイトのテンプレートに当たる部分はidで、他の部分はclassで指定する事が多いです。当サイトもそのようになっています。

<div id=”wrapper”>
<div id=”head”></div>
<div id=”main”>
<p class=”red”></p>
<ul class=”mokuji”>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id=”side”>
</div>
</div>

こんな感じになります。

class名やid名はどういった名前をつけても構いませんが、要素ごとに良く使われている名前がありますので、他のサイトを参考にしても良いと思います。

»コーディングの際のclass名、id名で悩んだ時に参考にしたい記事

私の場合、超適当に名前を振ってしまうので、他の人が見たら名前付けのルールが良くわからないと思いますが、基本的に自分しか見ないのであまり気にしていません。ホームページ制作会社などであれば、名前付けに一定のルールが必要だと思いますが、個人レベルであれば気にする必要はないと思います。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーの無料お試し申し込みはこちら

公開日:2013年3月14日

サブコンテンツ

このページの先頭へ