ウェブコーディング

意外と重要な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の記述方法や優先度は、実際に設定してみないと理解できない部分も多いので。

 

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

CSSのfloatを使ってリキッドレイアウトを組んでみた前のページ

InstantWPで管理バーが表示されなくなったらどうする?次のページ

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

関連記事

  1. ウェブコーディング

    PHPでデータベースから取得した配列を加工する方法

    データベースからデータをfetch関数などで取得すると、大体は2次元配…

  2. ウェブコーディング

    WordPressのテーマ・テンプレートのディレクトリを取得する方法

    WordPressのカスタマイズをするとき、親テーマと子テーマのどちら…

  3. ウェブコーディング

    子テーマを使ってWordPressを自由にカスタマイズしちゃいましょう

    WordPressをカスタマイズするときに使うと便利なのが「子テーマ」…

  4. ウェブコーディング

    AdSenseのモバイル向けページ単位の広告をWordPressに設置する方法

    AdSenseにモバイル用のページ単位の広告という機能が追加されてしば…

  5. ウェブコーディング

    WordPressの記事内でPHPを実行した結果を表示する方法

    WordPressの記事内でPHPを実行できると、記事に表示できるコン…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

スポンサードリンク

inkscapeを学ぶ

Inkscapeの入門書

カテゴリー

ピックアップ記事

  1. 特集

    inkscapeの使い方を集めたスキルアップのための日本語チュートリアル集
  2. ブログやサイトの作り方

    月額100円から使える「ロリポップレンタルサーバー」
  3. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
  4. ブログの収益化

    報酬の受取に苦労してません?初心者でもAmazon・楽天のアフィリエイトで効率的…
  5. 特集

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
PAGE TOP