- ベストアンサー
実務でＩＤとclassの使い分け方法
現在ＣＳＳを勉強中です。 classセレクタを使うとＣＳＳの指定が同じタグでもそれぞれ違う デザインが指定できて非常に使えるなぁと思ってます。 例えば、一方のＨ１タグの文字の色を青にしてもう一方のＨ１タグの 色を赤にしたりすることが可能です。 しかし、ＭｄＮを見てみるとよく外部ＣＳＳファイルに「＃○○」、 bodyタグ内にＩＤを指定してデザインを適用する使い方が多くを 占めていました。 このＩＤを使うときは、ページが縦に長いときに印をつけて、ページ内の指定位置へリンクするという使い方だけだと私は思っていました。 classではなくＩＤをよく使う理由はなんなのでしょうか？？ みなさまよろしくお願い申し上げます。
- eefedor
- お礼率57% (189/329)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
class は何度も利用する属性として使い、 ID は固有の属性に使っています。 利用目的は、ソースコードを見やすくするためです。 同一ＨＴＭＬ内にＩＤは一度しか登場させませんが、 classは、何度も使いまわしします。 具体的には、 IDの例 container : サイト全体をつつむ。 footer : サイト下部のフッター情報をつつむ。 Classの例 box ： 商品の画像、価格等の要素をつつむ。 上記を見て分かるように、１つのＨＴＭＬにcontainerやfooterは２回は利用しません。それでID属性を利用します。 そして、１商品の体裁を整えるものはClassで処理します。 複数のサイトを管理するようになると、大体、ソース内で利用するID名やClass名は統一されてきます。 特にIDについては、多くの人が同じような名前を利用しますので、誰が見てもどれがどんな役割を果たしているかが、ソースにコメントがなくても分かります。 ですので、ヘッダー、フッター、メインナビゲーション、右カラム、左カラムくらいはＩＤにすると良いと思います。
その他の回答 (3)
- quads
- ベストアンサー率35% (90/257)
検索すればいくらか有効な答えが見つかります。 ※よりシビアな内容ですが、今年の3月に議論が交わされました。 ※ http://www.akatsukinishisu.net/wiki.cgi?class%C2%B0%C0%AD%A4%C8id%C2%B0%C0%AD%A4%CB%B4%D8%A4%B9%A4%EB%B5%C4%CF%C0%A5%EA%A5%F3%A5%AF%BD%B8 「classではなくidを使う」という発想では答えが出ません。 classを、同一要素でも箇所によって区別するためのセレクタのマークとしてしか見ていないのであれば、classもidも変わりません。 # idが一意であること、個別性の違いはここでは本質でない。 もっと広い観点から、「class属性がなぜ与えられているのか」を評価したときに違いが生じます。 Tips/WebPage/class と id の違いとは？ - outsider reflex http://deztec.jp/x/01/tips/page/p0045.html こちらを閲覧されれば理解できるかもしれません。 厳密な表現をすると理解に障るので敢えて曖昧な表現にしています（語弊があるかもしれない）。
お礼
回答ありがとうございます。 なんだか難しいですね、、、 リンクを参考にして勉強させて頂きます。 どうもありがとうございました。
指定位置へのリンクはname指定で、cssのidとは違うと思います。 idは内容的に意味のあるかたまりに使うものと理解しています、たとえばヘッダーとかメインとかナビゲーターとか。 classはページのどこにでも存在しうる物、たとえば文字の強調とか、説明のpopupとか、画像のfloatとかです。 こんな使い分けをしています。 とりあえず、idは同じページ内に一回のみ使用、を守れば後は自分で分かりやすいルールを決めて、idとclassを使い分けるのが良いかなと思っています。
お礼
回答ありがとうございます。 そうですね、まずはおっしゃる通りＩＤは一回のみという形で 使用してみたいと思います。 どうもありがとうございました。
- naokita
- ベストアンサー率57% (1008/1745)
id そのページに１回しか使えませんし 決定している事項（不変の事、絶対事項）しか使いません。 idとclassの違いで検索して下さい。詳しく載っています。 全てclassで指定してもいいようですが、 自分の場合は、classが沢山あるよりも idが多少あったほうが、管理しやすいから。
お礼
回答ありがとうございます。 なるほど、管理しやすくなるからですか。 確かに見やすい気がします。 どうもありがとうございました。
関連するQ&A
- idとclassの指定方法
id(class)の指定は、セレクタといっしょに指定（１）、セレクタを除いて指定(２) どちらが正しいというのはあるのでしょうか？ 【例】 <html> <head> <title>タイトル</title> </head> <body> <div id="sample"> <p>サンプル</p> </div> </body> </html> (1) div#sample p { color:#f00; } (2) #sample p { color:#f00; } どちらでも良いような気がしますが、実際の所どうなんでしょうか。
- ベストアンサー
- CSS
- cssのidとclassの違いについて
cssのidとclassの違いについて ホームページ作成でcssを指定するとき、同一ページ内に1つしか指定しない場合はidを使用し、同一ページ内に複数指定したい場合はclassを指定しているのですが、使い方はあってるのでしょうか？ 独学なゆえ間違った使い方をしているのかなぁと思い質問してみました。 もし間違っていたら正しい使い方を教えてください。またidとclassの意味の違いも一緒に教えていただければうれしいです。
- ベストアンサー
- HTML
- classやidが変わったときに情報を更新する（？）
今現在 ボタンを押すと class やidが変化するようにしているのですが、 変化後、classやidで指定したcssの色にはなるのですが、（同時に元のclassやidのcssの色は無効になる） getElementByIdや getElementsByClassName("sw")[1]はページを読み込んだときの初期状態のidやclassに対してかかるようで、 読み込み終了後のid、classの変化後にも対応するにはどのようにするのでしょうか？ 以下のがページ読み込み後idやclassが変わっても、読み込んだ時に設定されているid、classで実行されてしまう物です。 function lod(){ document.getElementsByClassName("sw")[1].onclick = (function(){iFrame()}); document.getElementById("td").onclick = (function(){iFrame()}); }; まだJavascriptはあまり詳しくないです。 質問が下手ですいません。補足が必要でしたら出来る範囲で行います。 よろしくお願いします。タスケテー
- ベストアンサー
- JavaScript
- セレクタでidは使わない？
http://coliss.com/articles/build-websites/operation/css/css-lint-rules.html のサイトで、 「セレクタでidは使わない セレクタでの指定にはidではなくclassを使用するようにします。 idは再利用しにくいです。」 と書いてあるのですが、IDは使わず、全てCLASSにするといいということでしょうか？
- 締切済み
- CSS
- CSS classの場合とidの場合の指定方法
h1などをブロック要素ごとに、違うスタイルを適用させたく、下記のように、記述したのですが、ブロック要素をidで指定する場合は同じように、#mainと#main h1で指定し、<div id="main">とすればよいのでしょうか？ それとも、h1は.main h1 とクラス指定して、<div id="main" class="main">とした方がよいのでしょうか？変な質問かもしれませんが、どちらも同じように表示するので、どちらがよいのか分かりません． <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- .main { width:100px;} .main h1 { color:red;} --></style> </head> <body> <div class="main"> <h1>aaa</h1> </div> </body> </html>
- ベストアンサー
- HTML
- css classとidの使い方
あの、<p></p>内の文をclassを使ってitalicに、<span>内をidを使ってbold,色は赤にしたいのですが。変わりません。どこを直したら良いでしょうか？よろしくお願いします。 <HTML> <HEAD> <LINK href="global.css" rel="stylesheet" type="text/css"> <TITLE>About Me</TITLE> </HEAD> <BODY> <H1>About Me</H1> <IMG src="MyPic.png" alt="MyPic" height="150" width="100"> <DIV class="profile"> <p>My name is blahblah.<br> I am a <SPAN id="attention">Good</SPAN> Student.<br> </p> </DIV> </BODY> </html> global.cssの内容 .profile{font-style: italic} #attention { font-weight: bold; font-style: italic; color: red }
- ベストアンサー
- HTML
- bodyにidをつける理由は何ですか？
お世話になっています。 スタイルシートを勉強している者です。 いろいろなサイトのソースを見て疑問に思ったんですが、 下記のようにbodyタグにidやclassをつけているサイトがありました。 <body class="indexPage"> トップページにidを指定し階層ページには指定しないサイトもあれば、 トップページ、階層ページともそれぞれidを指定しているサイトもありました。 あとはどちらにもつけていないものもありました。 bodyにつけるスタイルは何が目的なんでしょうか？ 背景画像でしょうか？ ならば<body>下の<div id="wrapper">に指定すればいいのかなぁと思ったんですが… 何が利点なのか教えてください。。 よろしくお願いします！
- ベストアンサー
- HTML
- 複数ページでのidとclassの使い分け
. よくある、id と class の使い分けについてですが、複数ページに共通して存在するようなレイアウトに対する考え方についてです。 今まで、一つのページ内に一つだけ存在するものに対しては id を割り振り、一つのページに共通して存在するものに対してのみ class を割り振ってきました。ですので、class より id をベースにコーディングしていたという感じです。 ただ、最近、ページが増えるたびにどうもソースがなんとなく見にくく、メンテナンスに不効率な感じがしてます。特に、複数ページに共通したレイアウトがある場合です。 一つのページ内に共通して存在するものに対してのみ class を割り振り、その他は全てidを割り振るという考え方を貫くと、同一ページには同じレイアウトは存在しないが他の複数のページには同じレイアウトが存在しているような場合にも、基本的にその複数ページのどのページにもその共通したレイアウトに関して共通した id を割り振ることになってしまいます。 しかし、メンテナンス性を考えると、このような場合も基本的に class を割り振り、複数ページの内のあるページだけ少しデザインを変えるようなときだけ id を割り振る、といった使い方のほうがソースが見やすくすっきりするような感じがします。 ですので、最初から claas を割り振ることをベースとして、全ページを通じてそのレイアウトが固有のものになりそうな場合にだけ id にする、または、後から固有のものになった部分にだけclassに加えて後からidも付与する、というようなシンプルなコーディングに転換したいと考えてます。 しかし、この方法ですと、他のページには同じレイアウトが存在するとはいえ同一ページにはそのレイアウトが1つだけしか存在しないにもかかわらずidでなくclassを付与してしまう場面が増大してしまい、原則論から考えると若干気にはなってしまいます。(ひょっとすると私の原則論のとらえ方がそもそも間違っているのかもしれません) このあたり、どう考えたらよろしいでしょうか? 何かかいろいろなご意見や考え方を頂けますとうれしいです。 .
- 締切済み
- HTML
- classとidの名前の付け方
classとidの名前の付け方についてお伺いします。 1. classとidの名前の付け方によってSEOに関係するのでしょうか？ 2. むやみにclassやidを付けずにセレクターなどを使うほうがよいのでしょうか？ 3. 例えばid="category1"とつけるのとid="cat1"というように省略するとgoogleは「cat1ってなんだよ？」と判断したりしてランクを下げたりしますか？ 4. 同じid名を1つのhtml内に複数使っていたり、class名が1つしか使われていないWebサイトをよく見掛けます。これでもブラウザは解釈するようですが、html内で1つしか使わないのにclassで指定するのは良くないのでしょうか？ 5. そもそもidとclassをgoogleはどのように判別しているのでしょうか？idは見出し、classはその下のカテゴリとか・・・そういう感じですか？ なかなかネットを検索してもわからなかったのでこちらで質問させて頂きました。 お手数ですがよろしくお願い致します。
- ベストアンサー
- CSS
- スタイルシートで、id属性の中にclass指定をすることはできますか？
CSSで、id属性の中にclass指定をすることはできますか？ 現状は、divタグを使って、ヘッダー、メイン、フッターと分けているのですが、メインのところで #main.hoge{ #main .hoge{ とも動きませんでした。なんとなく間違っている指定なのかなとはおもうのですが、id属性で細かく分けた中をclassで指定したい場合、単に.hogeで十分機能するのですが、id属性の中をclassで指定したい場合、皆様はどのようにされてみえるのでしょうか。
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 なるほど具体的に教えていただき非常に理解が進みました。 大変参考になりました。 どうもありがとうございました。