• 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をはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

この記事と関連する記事

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

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressの保守が必要な理由とチェックするべき9点
  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法

カテゴリー

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

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2021 high five create All rights reserved.