ウェブコーディング

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

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

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

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

CSSでidとclassを使う方法

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

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

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


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

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

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

 

idとclassの違う点

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

それはこの2点です。

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

詳しく見ていきます。

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

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

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

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

http://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の設定が優先されるということです。

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

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

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

 

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

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

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

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

 

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

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

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

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

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

 

 

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

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

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

 

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

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

 

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

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

tipLog

ブログ向けWordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. ウェブコーディング

    WEB言語を手を動かして1から学べるサイト

    HTML・CSS・PHPなどのウェブ系の言語をどれくらい理解しているで…

  2. ウェブコーディング

    PHPなどのプログラムコードをUTF-8で保存するときの注意点

    サーバーで実行されるPHPやJavascriptなどをテキストエディタ…

  3. ウェブコーディング

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

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

  4. ウェブコーディング

    WordPressでも簡単に使えるってほんと?会話風吹き出しのCSSテンプレート

    会話風吹き出しのテンプレートとして使えるCSSを作ってみました。会…

  5. ウェブコーディング

    NetBeansでSQliteのドライバーを有効にするプラグイン

    PHPなどのwebアプリケーションを作成できるNetBeansですが、…

コメント

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

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

CAPTCHA


スポンサードリンク

カテゴリー

ピックアップ記事

WordPressテーマ「MAG(TCD036)」     ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche
  1. ブログの収益化

    無料レポートスタンドの「メルぞう・Xam」を120%使い倒す方法
  2. ブログやサイトの作り方

    月額100円から使える「ロリポップレンタルサーバー」
  3. ブログやサイトの作り方

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
  4. 便利なツールの話

    フォトレタッチ・グラフィックデザインの無料ソフト「GIMP」(≒Photosho…
  5. ブログの収益化

    報酬の受取に苦労してません?Amazon・楽天のアフィリエイトで効率的に報酬を受…
PAGE TOP