ウェブコーディング

意外と重要な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. ウェブコーディング

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

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

  2. ウェブコーディング

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

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

  3. ウェブコーディング

    プラグイン不要!2ステップで完了!「FontAwesome」をWordPressに導入してアイコンを…

    ブログのカスタマイズをするとき、必要なアイコンをいちいち画像化して、フ…

  4. ウェブコーディング

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

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

  5. ウェブコーディング

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

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

コメント

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

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

CAPTCHA


スポンサードリンク

ピックアップ記事

スポンサードリンク

カテゴリー

  ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche
WordPressテーマ「ANGEL(TCD047)」
  1. グラフィックデザイン

    レイアウトデザインに最適な無料ソフト「inkscape」(≒Illustrato…
  2. グラフィックデザイン

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

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

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  5. ブログ収益化

    無料レポートスタンドの「メルぞう・Xam」を120%使い倒す方法
PAGE TOP