- ベストアンサー
idかclassか どっちが良いでしょうか？
- idかclassか どっちが良いでしょうか？
- HTMLページの要素の識別には、idとclassのどちらを使用すべきか迷うことがあります。idは一意の識別子であり、各要素に対して一度しか使用できません。一方、classは複数の要素に同じ名前を付けることができます。
- ページ内で特定の要素を一意に識別する場合はidを使用し、同じスタイルを適用する複数の要素をまとめて識別する場合はclassを使用すると良いでしょう。ただし、idは一意であるため、ページ内で同じidを複数回使用することは避けるべきです。
- takumana20
- お礼率91% (434/473)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
私ならパターン2-1ですね パターン1はブラウザによって正常に動かない場合もありますし。 私の場合はHTMLは共通の <div id="nav"> <ul><li>A</li><li>B</li><li>C</li></ul> </div> にして、ナビ部分だけ呼び出すCSSを変えることで対応すると思います。 Ａページでは navi1.css Ｂページでは navi2.css といった具合に。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2です。No.2の回答は、ちょっと難解だったかも。挙げられたパターンで考えると2-2が一番効率的です。ただし、IDは決して使いません。classさえ使わない。これらをすると効率が下がる。 1を使わない理由は、CSSが長大になりメンテナンスのとき作業が大変になる。 2-1を使わない理由も同じです。 スタイルシートはひとつにしなければならない理由はありません。というか分けるべきです。 非常に量の多い内容のサイトを作る場合、記事を書いていくと前後に移動して細かい修正がありますから、ひとつの巨大なHTMLを作成して、あとで分割する作業を行います。 <html> <head> </head> <body> <div class="section"><!-- 全体 --> <h1>見出し</h1> <div class="section"><!-- 第１章 --> <h2>見出し</h2> <div class="section"> </div> <div class="nav"><!-- 1章目次 --> </div> </div> <div class="section"><!-- 第２章 --> <h2>見出し</h2> <div class="section"> </div> <div class="nav"><!-- 2章目次 --> </div> </div> <div class="section"><!-- 第３章 --> <h2>見出し</h2> <div class="section"> </div> <div class="nav"><!-- 3章目次 --> </div> </div> </div> <div class="footer"> </div> </div> </body> ↓分割 <html> <head> </head> <body> <div class="section"><!-- 全体 --> <h1>見出し</h1> <div class="section"><!-- 第１章 --> <h2>見出し</h2> <div class="section"> </div> <div class="nav"><!-- 1章目次 --> </div> <div class="footer"> </div> </div> </body> <html> <head> </head> <body> <div class="section"><!-- 全体 --> <h1>見出し</h1> <div class="section"><!-- 第２章 --> <h2>見出し</h2> <div class="section"> </div> <div class="nav"><!-- 2章目次 --> </div> <div class="footer"> </div> </div> </body> ・・・もし、div.nav ul li#abc とかだったら、大変な作業になるのは目に見えている。 div.section div.nav ul li{}だと、ひとつ書けばよい。 <div class="footer">内にある<div class="nav">なら、div.footer div.navで区別できる。場合によったらclass名すらいらない。 [具体例] div{font-size:1em;} div div{font-size:0.9em;} とかね。 デザインのためのIDもclass名も使わないHTMLが書ければ、HTMLもスタイルシートも随分と簡潔になり、自身も解りやすくなります。 class名は、それがどのような構成要素であるかを記述します。(デザインのためじゃない) <div class="header"> <div class="section"> <p class="figure"><!-- 挿絵など --> <strong class="mark"> と言う風に。HTML５の時代になれば、 <header> <section> <figure> <mark> に直せる。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IDは、HTML上は、リンク終点として文書内の特定の要素を指定するもの。CSSからは一意セレクタとして作用します。さらに、デザインのためだけにIDをつけるのは？？？ですし、クラスもしかり、 特にCSSは詳細度がb=1となりますから、HTMLの要素内のスタイルについで詳細度が大きくなりますから、ひとつひとつ指定しなければならなくなり非効率です。 示された内容のHTMLでしたら、そのようなHTMLもCSSも書きません。後(たとえば1年後)でCSSだけ見て何をしてるかわかりますか？、ちょっと見栄えを変えるときもHTMLも書き直さなきゃならない。デザインのためにHTMLを書いてしまうとそうなります。 可能な限りHTML、見栄えは統一します。訪問者のために!! 例) 一般的にウェブサイトのHTMLは、 ・トップページ ・分野別のトップページ ・各分野のサブページ また内容的には ・文字の多いページ ・画像の多いページ などに分けられるでしょう。 たとえば、すべてのページでナビゲーションリストが次のようにマークアップされているとき <div class="nav"> <ul> <li><a href="./index.html">トップ</a></li> <li><a href="./index.html">トップ</a></li> <li><a href="./index.html">トップ</a></li> <li><a href="./index.html">トップ</a></li> </ul> </div> CSSは、 <link rel="stylesheet" type="text/css" href="./styleSheet/default.css"> <link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/books.css"> <!-- link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/top.css" --> <link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/screen.css" title="標準"> <link rel="Alternate StyleSheet" type="text/css" media="screen" href="/styleSheet/Big.css title="大き目"> 一行目は、すべてに適用される固定(永続)スタイルシート(persistent) 二行目は、特定の分野(書籍案内)のみに使用されるスタイルシート 三行目は、各分野やトップページに使用するスタイルシート(コメントアウトしてある) 四行目は、優先(preferred)スタイルシート 五行目は、代替スタイルシート のように書きます。携帯電話や視覚障害者用読み上げ端末、点字端末用のスタイルシートを用意する場合もあります。上記しか書かれていないと、screen端末(一般的なブラウザ)以外は、一行目が適用されます。 ☆同じ詳細度だと、あとから登場したスタイル指定が適用される。 CSSの記述 div.nav{width:200px;height:400px;background:url() gray;}/* 詳細度[0,0,1,1] */ div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;line-height:20px;} div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;} とか、ただし、top.cssには div.nav{background-image:url();} 同じナビゲーションリンクが<div class="footer">にもある場合は div.footer div.nav{background-image:none;}/* 詳細度[0,0,2,2] */ とか・・で上書きする。 このように、HTMLでのスタイルシート( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html )、CSSのカスケーディング( http://www.w3.org/TR/CSS2/cascade.html#cascade )をしっかり理解しましょう。そうすると、デザインのためのIDは無論、不必要なクラスもいらないでしょう。しかも将来メンテナンスすることになってもHTMLには手を加えなくてよいし、CSSだけ開いても、どこの設定を弄くればよいか「ひと目」でわかるでしょ!!div.nav(ナビゲーションブロックの背景) ☆クラス名を使うときも、それがクラスであることを理解しておくこと <p class="imprtant memo"></p> <p class="memo"></p> <p class="column memo"></p> とかね。
お礼
回答ありがとうございます 質問の例のHTMLを変更はしないです CSSだけの変更でデザインする前提で 各li aの背景画像を個別設定する方法でベターな方法を探しております。
お礼
>パターン1はブラウザによって正常に動かない場合もありますし。 知りませんでした ありがとうございます