ホームページのCSSについて

質問

ホームページのCSSについて教えてください。IDとCLASSとDIVについて
理解できないものですから、分かりやすく教えていただけませんか？ID,CLASS,DIVの理論は理解できるのですが、実際の使い方・・・特にIDとCLASSが分かりません・・・・

回答No.3

syagain · ベストアンサー

id,class,divがごっちゃになっておられるようなので、基本的な所から書いてみました。
無駄に長いです。既に分かっていることだったら済みません。

＠HTMLとCSS（スタイルシート）
　<HTMLのタグ>は、主にページの構造を示すものです。スタイルシートは、それに対しての修飾です。
　タグ自体に、修飾の指定をすることもできますが、それだとゴチャゴチャしてし見にくいです。そのため、
「HTMLのタグで大まかな構造を作り、スタイルシートで細かい修飾をする」
　これがHTMLとCSSの関係です。

　<div>はHTML上のタグであり、範囲を指定するタグです。
　class,idはHTMLのタグにつけられる、「スタイルシートによる設定を呼び出す」為の記述です。

　つまり<div class="◯◯">は、「<div>の範囲に、class◯◯で指定されたことを適用する」という使い方になります。

例）<div>以外のタグでも使えます。
<table id="◯◯">（id◯◯で指定されたことを、tableタグに適用する）
<span class="××">（class××で指定されたことを、spanタグに適用する）
この◯◯、××の部分が、スタイルシートに書かれています。

＠スタイルシート
１、タグを指定する
div{赤い背景}
　例えばこのような設定をすれば、divタグの範囲は全て赤い背景になります。要するに一括指定です。

２、タグを指定せず、修飾の内容だけ設定する。
　「こっちのdivは赤に、こっちのdivは黒にしたい」という時に、活躍するのがclass、idです。
　　複数のclass、idを作るのですから、当然それぞれに名前を付けます。

（スタイルシート）
　.クラス名{修飾内容}
　#ID名{修飾内容}

（HTML）
　<div class="クラス名"></div>
　<span id="ID名"></span>

　これでHTMLに、スタイルシートから「クラス名」や「ID名」の
　class/IDが呼び出され、その修飾内容がそのタグの指定範囲に適用されます。

　.kurozi{color:black;}
　.aka{color:red;}
　.blue{color:blue;}

　スタイルシートに上のように書けば、
　HTMLで以下のような使い分けができます。

　<div class="kurozi">黒字</div>
　<div class="aka">赤字</div>
　<div class="blue">青字</div>

３、限定したタグにclassを設定する場合
div.red{}
div.blue{}
　このように設定される場合もあります。
　この場合、divタグ以外ではこのclassは使えません。

＠classとidの違い
　classがバイキングのメニューだとしたら、idは定食みたいなものです。

　classは和食中華洋食、いくつでも好きな取り合わせを選べます。
　idはすでに決まった一つのセットメニューをまるっともらいます。

　当然classは、idと同じメニューも作れます。
　.classset{黒い線、細い線、赤い文字、黄色い背景}
　　classでこのように指定するのと、
　#idset{黒い線、細い線、赤い文字、黄色い背景}
　　idでこのように指定しても、結果は一緒です。

　ただclassの良い所は、「色々な組み合わせができる」と言う点です。
　色んな指定を一つのclassにまとめてしまうと、ちょっと違うデザインにしたいとき、また同じようなclassをもう一つ作る必要がでてくる。

　だからclassは「バラで作って」「選んで使う」のに適しています。
　一方のIDは一度しか使わないので、「ピインポイントで指定する」のに適しています。

お礼

誠に有難うございます、ご丁寧なご指導恐れ入ります。時間をかけて繰り返し読み返して咀嚼したいと思います。何度も読み、ご教授の内容を理解したいと思います。

回答No.2

salonpath

そうですね、結局は慣れです。
よくわからないうちは全部classでも問題ないと思います、間違いではないですし、idを使うのが優れたサイトの条件ってわけではないので。

idを使うメリットは、ページに1回しか登場しないのでたとえばjavascriptで何かするときピンポイントで対象を指定できるようになったりとかかな
自分もいまだによくわからないのでアバウトですが。

それでは頑張ってください。

お礼

ご回答有難うございました、やっと分かってきました。大助かりです。

回答No.1

salonpath

idは1つのhtml内で1回しか使用できません。
classは何回も登場させられます。
文字の色や大きさみたいに1ページ中に何回も使うものに指定します。

よくあるwebサイトの構成として
---
ヘッダー（ロゴ画像やサイトの名前部分）
メニュー（ナビゲーション）
コンテンツ（ページの内容）
フッター（コピーライト等）
---
がありますが、このそれぞれはDIVが受け持ち
そこにIDを割り当てたりします。

これでわかりますかね？

お礼

ご回答有難うございます、少し分かりました。入れ子のDIVにIDとかCLASSを割り当てるわけですね。でもそこからの作業が分からないのですが、ドリームウイーバーでは右に出てくるタグインスペクタで指定するのかcssのスタイルシートで指定するのかが分かりません。スタイルシートの記述にはどうもBODYからDIV、liといった指定しか書いていませんし・・・鶏が先か卵が先かといった感じで理解できないのです。

補足

すみません、チョット難しく考えすぎていました。いつも使っていたのがCLASSであることに気が付きませんでした。あとはIDの使い方と慣れだと思います、有難うございました。