• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / CSS初心者 / 11.HTMLファイルにclassとidをつける

11.HTMLファイルにclassとidをつける

池田祐太郎 | 2018年6月2日 更新 | 2013年10月26日 公開

以前HTMLの最後にワイヤーフレームを元にしてHTMLファイルを作成する記事を書きました。

6.どの部分にどのタグを使えばいいのか確認しワイヤーフレームを元にHTMLファイルを作成

その中で少し触れましたが、HTMLファイルのメイン部分をdiv#mainというので定義しました。これはdivタグをつかってid属性mainという名前に定義した、ということです。このように固有の名前をつけることによって同じdivでも別の存在として扱うことが出来、cssを書けるときにラクにかけることができます。
今回は名前をつけるときに使用するclassとidについて説明します。

目次

  • 1 classやidとはなにか
    • 1.1 classとidの違い
  • 2 HTMLタグにclassやidをつける
    • 2.1 CSS側の処理はどうするか
    • 2.2 classやidを目印として他のcssを定義する
  • 3 どのHTMLタグにclassやidをつけるという判断をするか
    • 3.1 なんでもかんでもつければいいというわけではない
      • 3.1.1 idとclassの優先順位の問題
      • 3.1.2 名前を考えることに時間を費やしてしまう
  • 4 実際にHTMLファイルにつけた例

classやidとはなにか

このclassやidというのはhtmlタグにつけることのできる属性というものです。例で説明します。

属性の場所:
<img src=”apple.gif”>
<a href=”index.html”>リンク</a>

上記赤い部分が属性です。よく見たことのあるタグかと思います。属性と聞くと構えてしまうかもしれませんが実は身近にあるもの。
classやidも属性なので例と同じように使うことができます。

classとid 例:
<h1 class=”title”>タイトル</h1>
<div id=”contents”>コンテンツ部分</div>

複数の属性も使えます。

<a class=”txtLink” href=”#”>リンク</a>

使い方は上記の通り、htmlタグのあとに書きます。h1ならh1 class=”name”とか、h1 id=”name”など。

classとidの違い

classとidは同じように見えますが明確な違いがあります。

class: ページ内で何回でも同じ名前を使用できる。idより優先度は低い。
id: ページ内で一度だけ。classより優先度は高い。

他にjqueryでidの方が処理が早いとか、aタグでアンカーとしてジャンプさせたりはidなど使い分けがありますがCSSにおいては上記を覚えておけばOK。

HTMLタグにclassやidをつける

試しにサンプルを。例えば以下の様なhtmlがあるとします。

<div>
<h1>タイトル</h1>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト01</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト02</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト03</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト04</li>
</ul>
</li>
</ul>
<div><img src=”“apple.jpg”” />
この画像の説明文章です。
この画像の補足事項です。</div>
</div>

divタグにCSSをかけようとしてもこのままだとdivが2つあるので同じCSSがかかってしまいます。その時にclassやidを使います。
最初のdivにid名としてmain、次のdivにclass名wrapとして名づけます。

<div id=”main”>
<h1>タイトル</h1>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト01</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト02</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト03</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト04</li>
</ul>
</li>
</ul>
<div class=”wrap”>
<img src=”“apple.jpg”” />
この画像の説明文章です。
この画像の補足事項です。
</div>
</div>

こうすることで最初のdivにcssをかけたいとき、次のdivにかけたいとき別々にわけることができました。

CSS側の処理はどうするか

htmlでそれぞれclassやidをつけてわけることはできました。では実際にcss側での書き方はどうなるか見てみましょう。

例:

id: #(シャープ)を使う
・サンプル
#main {
color: red;
}
class: .(ドット)を使う
・サンプル
.wrap {
color: yellow;
}

idはシャープ、classはドットとおぼえましょう。ちなみにhtmlタグが入る場合は間をくっつけて書きます。

htmlタグを書く場合の例:

div#main {
color: red;
}
div.wrap {
color: yellow;
}

注意したいのがdivと#や.の間は空かないということです。

ダメな例:

1: divと#の間に半角スペースがはいっている
div #main {
color: red;
}
2: .とwrapの間に半角スペースがはいっている
div. wrap {
color: yellow;
}
3: .を入れ忘れている(cssがclassだと認識できない)
wrap {
color: yellow;
}

よく間違いやすいところが上記例3の.や#入れ忘れによりエラーとなるケース。HTMLタグは.や#は入りませんが、classやidは入れてあげないといけません。

classやidを目印として他のcssを定義する

この方法も覚えておくとラクな書き方をご紹介。何もclassやid名をつけたところだけしかcssがかけられないというわけではありません。class名やid名をつけたタグを目印として子要素にcssをかけたり、子の子、つまり孫要素にかけたりすることもできます。先ほどの例でみてみましょう。

<div id=”main”>
<h1>タイトル</h1>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト01</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト02</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト03</li>
</ul>
</li>
</ul>
<ul>
<li style=”list-style-type: none;”>
<ul>
<li>リスト04</li>
</ul>
</li>
</ul>
<div class=”wrap”>
<img src=”“apple.jpg”” />
この画像の説明文章です。
この画像の補足事項です。
</div>
</div>

例えばh1にcssをかけたい場合どうすればいいでしょうか。新しくclassやidをh1に追加してもいいですが、h1の親要素であるdivにmainというidが付いているのでこれを活かしてcssを書いてみましょう。

子要素にcssをかける例:

div#main h1 {
font-size: 20px;
}

このように半角スペースで区切ってあげる。そうすると「id名mainがついているdivの下にあるh1」というセレクタになります。今回の場合divがなくてもOK。セレクタは「#main h1」となりますね。
孫要素も見てみましょう。id名mainの下にあるulのliにCSSをかける例です。

孫要素にcssをかける例:

div#main ul li {
border: 1px solid #ccc;
}

考えは子要素の時と同じ、半角スペースで区切ります。「id名mainのdivの下にあるulの下にあるli」というセレクタです。

このように半角スペースで区切ることにより、下の階層を指定することができます。もちろんclassやidにかぎらずhtmlだけでもセレクタを指定することができます。

どのHTMLタグにclassやidをつけるという判断をするか

個人的にはidはmain部分やwrapperエリア, sidebar, footerといった大まかな場所の定義に使い、細かい箇所や何回も出てくるところなどはclassを使うようにしています。他の部分で使うことを考えると新しいid名を毎回書くより使いまわしたほうがcssファイルも小さくなるし何より自分が管理しやすいです。

なんでもかんでもつければいいというわけではない

idをつけておけばかぶることはないから安心…これはあまりよろしくありません。なぜかというと2つあります。

idとclassの優先順位の問題

先ほどちらっと書きましたがidとclassには優先順位があります。おなじ箇所にcssセレクタを指定した場合、idの方が優先順位が強くなります。

例:
<div id=”contents” class=”mainArea”>サンプル</div>

上記のdivにそれぞれidとclassでセレクタ指定すると

#contents {
color:red;
}
.mainArea {
color:green;
}

同じ箇所に書いていますが、idの方が優先されるので文字の色は赤くなります。

名前を考えることに時間を費やしてしまう

idやclassは自分で好きな名前がつけられる反面、「なんていう名前にしたらいいんだろう」って悩むと思います。僕はよく悩みました。。。
なんでもいいやと「agj」とか「jjj」とか適当にしていると、「あれ、これってどんなCSSだっけ?」と作った張本人でもわからなくなってしまいます。他人が作ったコードだともう意味不明。

なので、idやclassは必要最低限にして、HTMLタグだけで絞込みができるのであればわざわざclassやidを使う必要はありません。ラクに簡単にいきましょう。

実際にHTMLファイルにつけた例

6.どの部分にどのタグを使えばいいのか確認しワイヤーフレームを元にHTMLファイルを作成で書いたHTMLコード。これにclassやidをつけた例が最後にコードがでていますので参考にしていただければ。
サンプルはこちら

次回はこのHTMLファイルにCSSを適用させるのでCSSコードを書いていきます。

次の講座:コラム:class名とid名はどうやってつければいい?←目次に戻る
メールコンサルティング
WordPress保守管理サービス

Filed Under: CSS初心者 関連タグ:css

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

8.その他のデベロッパーツールの紹介
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門
7.デベロッパーツール応用編
2014年3月4日
タグ: css, HTML, jQuery
カテゴリー: デベロッパーツール入門
6.確認から制作まで即使えるCSSの機能(2/2)
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.