DIVの記述
※ある役割をもった範囲を囲んで、名前をつけていきます。
※「#」から書き始めます。
※「*」が省略されています。「*#contents」と記述してもよい。
※「div」要素のみに限定する場合は「div#contents」と記述可。
※「idセレクタ」は、ページにひとつしか使えません。
【unique：一意】
（1）ヘッダーの範囲化
「index.html」を開いてヘッダーの範囲に「idセレクタ」を記述します。
＜div id="header"＞
＜a name="pagetop"＞＜/a＞
＜img src="images/hotelhuman_logoM.gif" width="137" height="21"＞
＜/div＞
「basic.css」を開いて「idセレクタ」を記述します。
#header {
background: #000000;
height: 40px;
padding: 4px 4px 4px 10px;
}
※padding上から時計回りに上、右、下、左の順で設定。
（2）フッターの範囲化
「index.html」で続けてフッターの範囲に「idセレクタ」を記述します。
「basic.css」を開いて「idセレクタ」を記述します。
#footer {
font-size: small;
text-align: right;
border-top: 1px solid #333333;
margin-top: 5px;
}
● align：行揃え
（3）全体の範囲化（幅指定）
「index.html」のコンテンツ幅を指定するために「idセレクタ」を記述します。
〜
「basic.css」を開いて「idセレクタ」を記述します。
#wrapper {
width: 760px;
}
（4）特定のページのみ指定
「index.html」のみ、ページの余白を「0」に設定するため
に「idセレクタ」を記述します。
※ロゴ画像の入っている黒い帯が左上ぴったりから始まって欲しいため。
body#pr-top {
margin: 0px;
padding: 0px;
}
※
に対する「padding」設定が２回行われていますが、CSSでは、あとから記述したものが優先されます。
コメントの記述
「basic.css」のそれぞれのブロック上部に、見て分かりやすいようにコメントタグを入れてみましょう。
/* 背景色とマージン */
/* 見出し */
/* 本文、リスト */
/* 水平線、アドレス、日付 */
/* 表組み */
/* フッター */
/* 全体の幅指定 */
/* PressRelease トップページのみ */
「/* 」と「 */」で囲まれる箇所を「コメント」といい、コードからは無視されブラウザでは表示されません。
=============================================-
やっと終わったー。。。
先週CSSついて行くのに精一杯で、
意味もわからずカチカチ入力してたので、理解してなかった。
今回は、やってることの意味をかみしめながら、作った。
復習がだいぶ遅くなってしまった。
時間が無かったので、先生のブログを丸パクリしてしまいました。
