classを使えばidは不要?html,CSS,JavaScriptでの活用方法

このエントリーをはてなブックマークに追加

idとclassの違いは、人の管理をイメージするとわかりやすいですね!
idは番号。唯一無二。ユニーク(オンリーワン)のものです。classは出身エリア、性別、誕生月、所属グループというイメージで、重複可能、複数選択可能なカテゴリーです。

在庫管理に例えると、IDは商品コード(A001等)、classは商品のジャンル(医療用,スポーツ用等)、色、サイズ(ラージ,スモール等)です。

さて、タイトルの「classを使えばidは不要?」という質問の答えですが、結論から言いますと、デザイン作業をしていくにあたってはclassのみでほぼ十分です。最終手段として使う程度です。けれども、idは、JavaScript等を利用していく場合に何度も使うことになります。

cssにおけるclassとid

まずは、classの使い方です。最近はCSSフレームワーク活用の流れもあり、シンプルなclassを多用していく方法が一般的です。


<style>
.red {
  color:#ff0000;
}

.dark {
  color:#222222;
}

.m-1 {
  margin-bottom:1em;
}

.p-1 {
  padding-bottom:1em;
}

.d-block {
  display:block;
}
</style>

<div class="red m-1 p-1 d-block">
  contents
</div>

<div class="dark m-1 p-1 d-block">
  contents
</div>

↑ こんな感じで使います。


<style>
.special_contents {
  color:#ff0000;
  margin-bottom:1em;
  padding-bottom:1em;
  display:block;
  line-height:140%;
  font-size:18px;
  width:60%;
}
</style>

<div class="special_contents">
 contents
</div>

↑ こういう使い方をしてはいけないわけではないですが、極力少なくします。


<style>
.special_contents {
  line-height:140%;
  font-size:18px;
  width:60%;
}
</style>

<div class="red m-1 p-1 d-block special_contents">
 contents
</div>

↑ この方がまだいいです。

また、確実に1回しか使わない場合は、このようにした方が後々、修正箇所を探すのは楽です。


<style>
#special_contents {
  line-height:140%;
  font-size:18px;
  width:60%;
}
</style>

<div id="special_contents" class="red m-1 p-1 d-block">
 contents
</div>

idはこんな形で使います。

Javascriptではidが大活躍

例えば、特定のButtonを押す場合に、特定の項目を表示させる場合はidを利用します。classでも出来ないことはありませんが、コードの記述もエラー確認もidの方が圧倒的に楽です。

以下のボタンを押してみてください。コンテンツが表示されます。「Q&A」等でたまにありますね!
押すと表示、スマホサイトのメニューボタンも基本構造は同じです。

「↓ 犬の種類を表示 onclick=”open1()”」を押すと、
「犬の種類 id=”dog”」を表示、
「↓ 犬の種類を表示 id=”dog_open”」を非表示
「↑ 犬の種類を非表示 id=”dog_close”」を表示

といった動作です。上記の機能は下記コードで実装しています。


<div>
  <button onclick="open1()" id="dog_open" style="display: block;">↓ 犬の種類を表示</button>
  <button onclick="close1()" id="dog_close" style="display: none;">↑ 犬の種類を非表示</button>
</div>

<div id="dog" style="display: none;">
ラブラドールレトリバー、ブルドッグ、ペキニーズ.、ボストンテリア、秋田犬
</div>

<div>
  <button onclick="open2()" id="cat_open" style="display: block;">↓ ネコの種類を表示</button>
  <button onclick="close2()" id="cat_close" style="display: none;">↑ ネコの種類を非表示</button>
</div>

<div id="cat" style="display: none;">
スコティッシュ・フォールド、アメリカン・ショートヘア、マンチカン
</div>

<script>

  function open1(){
    var box = document.getElementById('dog');
    box.style.display = "block";	
    var box = document.getElementById('dog_open');
    box.style.display = "none";	
    var box = document.getElementById('dog_close');
    box.style.display = "block";
  }
  function close1 (){
    var box = document.getElementById('dog');
    box.style.display = "none";	
    var box = document.getElementById('dog_open');
    box.style.display = "block";	
    var box = document.getElementById('dog_close');
    box.style.display = "none";
  }

  function open2(){
    var box = document.getElementById('cat');
    box.style.display = "block";	
    var box = document.getElementById('cat_open');
    box.style.display = "none";	
    var box = document.getElementById('cat_close');
    box.style.display = "block";
  }
  function close2 (){
    var box = document.getElementById('cat');
    box.style.display = "none";	
    var box = document.getElementById('cat_open');
    box.style.display = "block";	
    var box = document.getElementById('cat_close');
    box.style.display = "none";
  }

</script>

その他、特定のフォームの値を取得したり、特定のエリアに特定のタイミングでテキストを表示させたりと、動的な場面ではidとclassを明確に使い分けることが多いです。

あと、Javascriptではなく、シンプルなHTMLですが、idはページ内リンクでも使います。

<a href="#info1">Classの使い方</a>

Classの使い方
↑ クリックするとこのページの上部「classの使い方」の方へ行きます。行ってらっしゃい!

木村 漠 baku kimura
Twitter facebook
個人事業(在庫管理システム開発)→ 起業/経営(Webマーケティング・開発/スクール)→メディアデザイン室長/新規事業開発/人事部長(クリエイティブ/社内システム/HR・採用)→取締役(開発〜お茶の買い出しまで色々)現在は外国人専門の求人サービスづくりを頑張っています。
携わってるサービス
外国人の求人・採用 job search in japan お笑い芸人を身近に!芸人キャスティング・ブッキング