http://coliss.com/articles/build-websites/operat …
のサイトで、
「セレクタでidは使わない
セレクタでの指定にはidではなくclassを使用するようにします。
idは再利用しにくいです。」
と書いてあるのですが、IDは使わず、全てCLASSにするといいということでしょうか?
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
そもそも、classやidの目的は、まず
7.5.2 要素識別子: id属性とclass属性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
7.5.4要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
を読んでください。
特に
【引用】____________ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
の意味をしっかり理解してください。
ここで、文書に構造を負荷するという意味は、HTML5の
『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』
に書かれている内容を読むと、class名やidには、HTMLの要素だけでは足りない文書構造を示すために利用することが順当でしょう。すなわち
<body>
<div class="header">
・・・文書のヘッダ・・・
</div>
<div class="section">
<div class="section">
</div>
<div class="article">
<div class="header">
</div>
<div class="section">
</div>
</div>
</div>
</div class="footer">
</div>
</body>
のように使うことが想定されていることが想像できると思います。
一方スタイルシートは、文書構造を元に書いていきますから、
div.section{margin-left:0.95em;}とすれば、文書が節→章→項のような構成でしたら、文字が5%ずつ小さくなっていきますね。・・・わかりにくいですが、文書構造を示すためには、class名のほうが便利が良い--HTML5においてもheader,section,footer,figure,article,aside,memo・・などはひとつの文書に何度でも登場する可能性がある=HTML4にも存在した他の要素--p,hn,strongなどと同じです。それは、idが一度しか存在し得ない事と根本的に異なります。
また、idはa要素のname属性と同様に文書にとって一意ですから、主にページ内アンカーやjavascriptのターゲットとして利用しますから、一箇所しか指定できませんが、それ以上に詳細度がb=1と高いため、class名での指定(詳細度C=1)で上書きしにくくなります。
他にも様々に理由がありますが、端的に言うと「HTMLは文書構造をマークアップするもの、スタイルシートは文書のプレゼンテーションを指定するもの」ですから、HTMLには文書構造を示すためにclass名で補完されていて、idはターゲットとして書かれているはずです。それを利用してスタイルシートを記述していく。言い換えればスタイルシートのためにidやclass名を書くことはない。
それが、セレクタにclass名を使う一番の理由かもしれません。
具体的には、
div.section div.note{font-size:0.9em;color:red;}
と書かれていれば、本文中のノート(注意書き)は赤字だと、HTML見なくても簡単に理解できますから後での修正も楽です。
div.header div.nav{position:absolute;top:100px;left:10px;width:200px;}
div.footer div.nav ul{position:absolute;top:0;left:0;width:100%;}
div.footer div.nav ul li{float:left;}
div.nav ul{display:block;list-style:none;margin:0;padding:0;text-align:center;}
の区別も容易につきますよね。
私もスタイルシートでidを利用することは、まったくと言ってよいほどありません。
No.1
- 回答日時:
このサイトが言っているのはそういうことですね。
全然別のサイトでスタイルシート定義を使い回すことを想定すると、idというのはそのサイト独自の理由でつけたりするので、id名の書き換えが必要になるという事が言いたいのでしょう。
つまり、プロのデザイナを想定したガイドですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- Ruby No route matches [GET] "/posts/5/destroy" 1 2022/03/24 13:00
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのIDとclassの命名規則は?
-
<div id="container">の使いか...
-
カラム落ちの対処法について
-
ウェッブ・ブラウザのレイヤー機能
-
画面を縮小するとカラムが落ち...
-
ホームページ作成会社を探して...
-
HTMLのバリデーション
-
phpでのwebページ制作について
-
html・css3の記述
-
SEO対策のタイミングはHP作成前...
-
HPが消えてしまった原因を知り...
-
グリッドレイアウトで"auto-fit...
-
このサイトの離脱率は高いですか?
-
検索して出てくるHPのコメント...
-
SEOの良書を探しています。
-
CSS min-height の使いどころ
-
2カラムで固定幅+可変幅のCSS...
-
background-imageが効かない
-
HTMLのJIS規格について
-
特定範囲内のCSSの継承を断ち切...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
おすすめ情報