Inkscapeのマニュアル本、各種サイトで好評発売中! ▶公式サイトはこちらから

意外と重要なCSSのidとclassを使い分け

WordPressテーマを作ったり、ホームページを作ったりするとき、間違いなく登場するのはCSS(カスケードスタイルシート)です。

CSSはホームページやブログのデザインを設定しますが、IDでもclassでもCSS上は全く同じようにビジュアルを設定できてしまいます。

ですが、この2つには明確に違いがあるので、正しく使い分ける必要があります。

CSSでidとclassを使う方法

まずはidとclassの使い方をおさらいしてみます。

idを使う場合、HTMLタグではこのように書きます。

<span id="tomato">この部分はtomatoの設定に従います<span>

CSSではidを指定するときは#(シャープ)を使って、次のように記載します。

#tomato {
    font-size: 48px;
}

では次にclassを使用したパターンです。

HTMLではidの部分をclassに変えるだけです。

<span class="water">この部分はwaterに従います<span>

CSSは.(ドット)を使って書きます。

.water {
    font-size: 48px;
}

 

idとclassの違う点

HTMLでもCSSでも、記載上はほとんど変わりませんが、idとclassには重要な違いがあります。

それはこの2点です。

  1. idはリンクとしても機能するが、classは機能しない
  2. CSSではclassよりもidが優先される

詳しく見ていきます。

idはリンクとしても機能するが、classは機能しない

このブログの記事ページヘのリンクは

https://nahcew.com/web-production/use-id-class-in-css/

ですが、HTMLでidが設定されているときに限って、記事内のidを指定してリンクを貼ることができます。

https://nahcew.com/web-production/use-id-class-in-css/#idclass (「idclass」というidが設定されている)

このリンクをクリックすると、指定のidの箇所へ自動でスクロールされたページが開きます。

この機能はclassにはありません。

CSS的にはidもclassも大差ないのですが、HTML的には大きな違いです。

これが理由で、1つのHTMLファイル内で同じidは1回しか使えません。

逆に、1つのHTMLファイル内でclassは何度でも使えます。

CSSではclassよりもidが優先される

2つ目のこの違いは有名ですね。

1つのHTMLタグにidとclassの両方が設定されていて、スタイル設定が重複している場合はidの設定が優先されるということです。

<span id="tomato" class="water">このテキストは赤で表示されます<span>

これに次のCSSを設定します。

#tomato {
    font-size: 48px;
    color: red;
}

.water {
    font-size: 24px;
    color: blue;
}

この場合、1つのspanタグにidとclassが設定されているので、「#tomato」のスタイルが優先されます。

スタイルとしてはフォントサイズが48pxで赤いテキストが表示されることになります。

 

idとclassの使い分けはこうする

よく使われている方法に、ページのヘッダー・フッター・メインカラム・サイドバーなどのレイアウト関連のdivタグにidを設定する方法があります。

この方法では、それ以外のスタイルはすべてclassを設定します。

<body>
  <div id="container" style="">
    <header id="header" style="">
      <p>ここはヘッダーです</p>
      <p>サイトの名前や画像を配置したり、グローバルメニューを設置します。</p>
    </header>
    <div id="wrapper" style="">
      <div id="main" style="">
        <p>ここはコンテンツです</p>
        <p>記事本文やサムネイル画像など、メインになるコンテンツを配置します</p>
        <p>幅は可変(リキッド)</p>
      </div>
    </div>
    <div id="sidebar">
      <p>ここはサイドバーです</p>
      <p>カテゴリーやタグ、アーカイブなどを配置します</p>
    </div>
    <footer id="footer" style="">
      <p>ここはフッターです</p>
      <p>コピーライト表示などをします</p>
    </footer>
  </div>
</body>
#container {
  max-width: 960px;
  margin: 0px auto;
}
#header {
  height: 240px;
}
#wrapper {
  width: 100%;
  float: left;
  margin-right: -300px;
}
#content {
  margin-right: 310px;
  height: 600px;
}
#sidebar {
  width: 300px;
  float: right;
  margin-left: -300px;
  height: 600px;
}
#footer {
  clear: both;
  height: 80px;
}

/* それ以外はすべてclassで設定する */
.header-title {
  font-size: 3em;
}

...etc

ヘッダーなどのレイアウト関連のdivは1ページに1度しか表示されないので、この方法は理にかなっています。

 

それ以外では、CSSはすべてclassで記載するという方法もあります。

この方法ではidをHTMLのマークアップ専用に利用するので、CSSの設定とHTMLのマークアップが完全に分離できます。

<body>
  <div id="container" class="container" style="">
    <header id="header" class="header" style="">
      <p>ここはヘッダーです</p>
      <p>サイトの名前や画像を配置したり、グローバルメニューを設置します。</p>
    </header>
    <div id="wrapper" class="wrapper" style="">
      <div id="main" class="main" style="">
        <p>ここはコンテンツです</p>
        <p>記事本文やサムネイル画像など、メインになるコンテンツを配置します</p>
      </div>
    </div>
    <div id="sidebar" class="sidebar">
      <p>ここはサイドバーです</p>
      <p>カテゴリーやタグ、アーカイブなどを配置します</p>
    </div>
    <footer id="footer" class="footer" style="">
      <p>ここはフッターです</p>
      <p>コピーライト表示などをします</p>
    </footer>
  </div>
</body>
.container {
  max-width: 960px;
  margin: 0px auto;
}
.header {
  height: 240px;
}
.wrapper {
  width: 100%;
  float: left;
}
.content {
  margin-right: 310px;
  height: 600px;
}
.sidebar {
  width: 300px;
  float: right;
  margin-left: -300px;
  height: 600px;
}
.footer {
  clear: both;
  height: 80px;
}

HTMLタグのうち、ページに1つしか設置しないものにはidをつけ、それ以外にはidをつけないようにします。

classは必要なタグに全て挿入します。

1つのタグ内にidとclassを設定することになりますが、CSSではclassだけを使うので比較的わかりやすい記述になります。

 

 

おすすめは2つ目に紹介したCSSをclassのみで構成するパターンです。

後になって、idの書き方を変えたいと思ったときにHTMLだけを編集すればいいので、メンテナンスが比較的簡単です。

JavaScriptなどのカスタムをしようとしたときに、idをすべて書きなおすはめになったら泣きたくなりますから。。。

 

普段、あまりCSSに馴染みのない人だったら、はじめはいろいろ試してみるというのもありです。

CSSの記述方法や優先度は、実際に設定してみないと理解できない部分も多いので。

 

では今日はここまでです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA