3日で作るホームページ中級偏・HTMLとCSSの基礎知識＆おさらい(^_-)-☆
HTMLとCSSの基礎知識＆おさらい
<div class="header">
や
<div id="header">
などを見たことがありますか？
前にも書きましたが、今どきのサイトはこのdivによって作るのが望ましいです。
また、トップページでも説明していますが、これからの制作にはclassとidを使いわけます。
classとidの違いはというと、
意味合い的にはまったく同じです。
名札を付けるという意味になります。
唯一の違いはclassは1ページ内に何回でも使えますが、idは一度しか使えません。
（※実際は同じページで2回使ってもちゃんと適用されますが・・・＾＾；）
全部classにしても表示上は問題ありませんが、一応決まりとしては、1回しか使わないものに関してはidを使うｌことになっているので、このサイトでもそうすることにします。
※実際私も仕事でサイトを作る際はidとclassを使い分けています。
id名、class名を付ける上でのルール
特に決まりはありませんが、もちろん日本語は使えませんよ＾＾；
半角英数字、-（ハイフン）、_（アンダースコア）です。
id名、class名にはわかりやすいものを付けると良いですよ＾＾。
念のためidやclassを付ける意味のおさらい
idやclassを使って名札を付けなかったらどうなるでしょうか？
答えは簡単ですね。。。。
タグごとにすべて同じ指定しかできないことになります。
pタグならすべて同じ大きさ、色、余白。。。となります。
divタグでレイアウトを行うので、divタグならもっと大変です。
こっちの<div>〜</div>は右で、こっちの<div>〜</div>は左などのレイアウトができなくなってしまいますね（〃＾∇＾）o_。
idとclassのスタイルシートでの指定法の違い
classで指定したものはスタイルシートではclass名の前に .（ドットまたはピリオドと呼びます）、
idで指定したものはスタイルシートではid名の前に #（シャープ）を付けます。
class="header"とした場合、
.header {
color:#666666;
}
のようにclass名の前に .（ドットまたはピリオドと呼びます）を付けます。
id="header"とした場合、
#header {
color:#666666;
}
id名の前に #（シャープ）を付けます。
これを間違えると当然スタイルが適用されないので、注意が必要です。
floatを行ったら必ずclearで解除する
スタイルシートでのレイアウトでは必ずfloatという指定を行います。
（スタイルシートでレイアウトを行う場合、唯一無二の存在と言えます。ですので、超重要です！）
float:rightは右側に寄り、そのあとに続くものを左側に回りこませるという指定ですが、
どこかで解除しないとどこまでも回り込んでしまいます。
そのため、解除したいところでclear:bothなどを指定してやる必要があります。
まぁのちほども説明しますので、今はなんとなく覚えておいてください＾＾
