質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

全てのidの代わりにclassを使ってはダメ?

解決済

回答 7

投稿

  • 評価
  • クリップ 1
  • VIEW 2,880

score 60

HTMLにおいて、id属性全てをclass属性に変えると、
どのようなデメリットがあるのでしょうか。

教えていただけたら幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • GoodDay

    2019/03/13 17:14

    確かにそうです。ネットや本2冊でも既に調べましたが、多面的な角度から考察したいと思い、質問させていただきました。

    キャンセル

  • m.ts10806

    2019/03/13 17:16

    ではまずご自身の理解や確度的なところを追記されたほうが良いかと思います。
    何もない状態では「何も調べてない」「漠然とした興味」と捉えられますし、他人には書かれていないことで背景や前提まで汲み取るのは不可能なので。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/03/13 17:17 編集

    あなたがどのよーに考えているのかとか、質問文に書いておいたらいかがでしょーか
    そっちのほうが余計な手間がかからんとおもいますぜ

    と、かいてたらmtsさんとかぶっちまった。さーせん

    キャンセル

回答 7

checkベストアンサー

+22

HTMLの元々の目的からかなり離れていった利用のされ方をしていますので、
HTMLの歴史を絡めて調べて行くと理解・イメージしやすいんじゃないかと思います。

[HTMLの歴史] HTMLの誕生からHTML5までをザッと要点紹介 - Naverまとめ
なんだNaverまとめかよ…と思われるかも知れませんが、この記事が中々どうしてよく纏まっているので好きです。

元々HTMLはとある研究施設で作られた文書フォーマットです。
論文を管理して共有する事が誕生理由です。
それを推し進める為にタイトル・パラグラフ・リスト・テーブル・イメージといった記述が整備されて整えられていきました。
HTMLというのはマイクロソフトのWordや、AdobeのPDFと同じ目的で作られたものだったんですね。

その後、インターネットやホームページというカジュアルに紹介するものに使われるようになり、
HTMLってなんだっけ???みたいな感じにはなっていますが、
「そうだった、HTMLって元々は研究内容を発表するレポートだったんだ!」と思い出せると色んな場面で役に立つことでしょう。


id属性全てをclass属性に変えると……

(Webページは電子フォーマットではありますが)紙ベースのA4用紙に情報が書かれたものだとイメージしてください。
IDというのは同じ文書中に1度しか登場出来ません。

クラスの出席簿だったら出席番号=IDみたいなものです。
重複することがありえない類の情報だと考えて下さい。

AとBの情報は粒が小さいから1つの用紙にまとめちゃおう!
その結果重複しそうな場合はクラス番号、学年、そもそもどの学校か…等の付帯情報を含めて一意なIDにします。
だからこそIDと同名のページ内リンクを張ればそこに自動的にスクロールしてくれるんです。

IDで表現しようかな〜、それともクラスで表現しようかな〜
そもそもこの考え方に至る時点でおかしいわけです。
(際どくて迷うことはありますけどね。)


どのようなデメリットがあるのでしょうか。

話を戻しましょう。
そのID、クラス名にした瞬間IDという意味合いが削れますがよろしいか?

文書の意味的にIDとして振る舞うべきならば、文書として駄目な方向に改修が加わります。
これがデメリットです。

また、CSSでもこの意味合いを重視する為に、
クラス名指定のセレクタより10倍程強力な優先順位が付けられ、殆どのスタイルを上書きしてしまうことになります。
既にHTMLとCSSがセットで存在しており、CSSがIDのスタイル上書きを当てにしたような書き方を行っている場合、修正は中々骨の折れる作業になることでしょう。


もし、まだHTMLの設計段階でまだ作られておらず、
いやいやそこまで強い意味でどちらにしようかと考えてなかったよ〜…というのであれば、
基本的にはクラスで統一しても構いません。

普段我々がWebページ作る時にかっちりとした論文を作るわけではありませんからね、
「この情報はIDで管理してあるべきだ、それが最も相応しいのだ!」というケースも殆どないですから。
IDを使う場合、ページ内リンクを張りたいから後付でID振るみたいな消極的な動機で良いと思います。

ほぼ全ての要素がクラスで名付けられていれば、CSSでも不自由な記述があっても簡単に上書きすることが出来ます。
子孫セレクタや子セレクターとセットで使えば、この文脈の箇所のみスタイルを上書き適用するということもやりやすくなりますからね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/13 17:43

    このご回答は、+10個くらいつけたいですね。

    キャンセル

  • 2019/03/13 17:47

    凄いですね。
    自分には無理な回答です。

    キャンセル

+7

id属性撤廃で封印される機能

HTMLにおいて、id属性全てをclass属性に変えると、どのようなデメリットがあるのでしょうか。

id属性に依存している機能はいくらでもあります。

  • URLハッシュが使えません
  • <label for> が使えません
  • <input list> が使えません
  • <input form> が使えません

設計

全てを分類名(class)で管理する為には、設計からやり直しになります。

  • CSS詳細度、カスケード規則を念頭において、セレクタを書き直さなくてはなりません
  • DOM APIのid属性系APIは全てquerySelector()で書き換えるか、querySelectorAll() 等で可変数の対応に変えなければなりません

特に、querySelectorAll() で書き換える方針に変更すると、ただ置き換えるだけでは済まないので、関数の作りを見直す必要があります。

構造

HTML/CSS/JavaScriptを次のように区分する考え方があります。

  • 構造 (HTML)
  • 装飾 (CSS)
  • 振る舞い (JavaScript)

基本的に、構造の書き換えは、他(装飾、振る舞い)への影響が大きいと認識して下さい。

Re: HelloMasa さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/13 20:39

    > id属性に依存している機能はいくらでもあります。
    そういやaria-*系の属性も一部使えなくなるな。不便不便。

    キャンセル

  • 2019/03/14 19:21

    そうだ、labelとかHTML時点で、idじゃないと機能しないものいっぱいありましたね。

    キャンセル

+4

とりあえず、ぱっと2つ挙げますねー

  1. JavaScriptとかでそのidから要素を特定してる場合、JavaScriptがうまく動かなくなりますねー。対応するためにはidを指定していたときよりも複雑なセレクタ指定が必要になるでしょー。
  2. 詳細度をidでごまかしていた場合、スタイルがくずれるかもしれませんねー。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+4

どちらがいいとかのメリット・デメリットではなく、”役割の違い”です。

idは、そのHTML文章ないで、一意であるべきで、
一意であるからこそのJS上での扱えるメソッドが違ったり、
classでは段階的に取得しなければ一つの要素を特定できないものを、
一発で特定の要素取得できたりなどします。

対してclassは、複数の要素のグループ分けに特化しております。
同じような仕様の要素をいくつも作りたい、といった時に用います。
(CSSの割り当ても含め)

ご質問にある通りに変えるのはいっこうに構いませんが、
大きく役割と仕様が異なるということは認識しておくべきです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

あくまでも単純なページを作る上では最悪問題はないはずです。

ただ、いろいろとより複雑な記述を要求される場合はあります。
他にはページ内でアンカーポイントを使用している場合はidを使うべきとかそういったルールで不具合が生じたり、あと、基本的にclassよりidが優先されるってルールがあるため、そういった部分でも不都合が生じる可能性があります。

後は、他の方がコード見る際に見づらいとかもデメリットでしょうか。

以下は参考程度に
https://jill-tone.com/htmlcss_id_class/
http://www.ituore.com/entry/idclass

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

フラグメント識別子(URLの#で始まる部分)のアンカーとして用いられることがありますので、機械的に置換するのは避けた方がいいのでは。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

マークアップ言語としては当然idとしての唯一設定する考え方は
文章の構造を指定するときには便利ですが、
近年のCSSやjsのセレクターの掴み方は柔軟性が高いので、
カスタムデータの出現によりidでしか実現できない機能は
ハッシュ(ページ内リンク)として利用できること以外
とりたてて思いつきませんね

単純にクラスへの置き換えはできますが、逆にメリットがないので
あまりお勧めできません。
クラスの場合グルーピングが基本なので、おなじクラスが複数タグに
振られていたり、任意にクラスを付け替えたりする使い方をされます。
自ずとIDとは運用方法がかわってくるでしょう。

IDのデメリットは1つの要素に複数のidが触れないこと

// 以下全部むり
<div id="hoge,fuga"></div>
<div id="hoge fuga"></div>
<div id="hoge" id="fuga"></div>

//クラスなら以下可能
<div class="hoge fuga"></div>

js

特定のidがふってあるのは必ず1要素なので
基本的にはdocument.querySelector('#hoge')でつかみます
classは複数要素が基本(可能性が高いというべき?)なので
document.querySelectorAll('.fuga')でつかみます
formの要素などname属性を持つものは
document.querySelectorAll('[name=piyo]')のように
単一要素か複数要素かわからないのでAllで取りがちです
これはカスタムデータを使っても同様
document.querySelectorAll('[data-hoge=fuga]')

クラスは同じ名前でいくつ付加しても、重複を防いでくれるのはありがたい仕様。

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var hoge=document.querySelector('#hoge');
  hoge.classList.add('fuga1');
  hoge.classList.add('fuga1');
  hoge.classList.add('fuga1');
  hoge.classList.add('fuga2');
  console.log(hoge.classList);
});
</script>
<div id="hoge">hoge</div>


カスタムデータはHTML要素にいくつでも設定ができるメリットがあるが
複数の要素は含めることができません。
jQueryでアクセスすると配列データを持つこともできるので使い勝手はあります。

<script>
$(function(){
  console.log($('#hoge').data("fuga"));
  console.log(document.querySelector('#hoge').dataset["fuga"]);
});
</script>
<div id="hoge" data-fuga="[1,2]">hoge</div>

CSS

CSSはモダンブラウザではid,クラス,カスタムデータのどれでアクセスしても
さほど変わらないイメージ

<style>
#hoge{color:red;}
.fuga{color:blue;}
.fuga.piyo{color:lime;}
[data-hoge="1"]{color:yellow;}
</style>

<div id="hoge">hoge</div>
<div class="fuga">fuga</div>
<div class="fuga piyo">fuga piyo</div>
<div class="piyo">piyo</div>
<div data-hoge="1">hoge=1</div>
<div data-hoge="2">hoge=2</div>

`

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る