まずは配置から
chapter3の最初で｢大きなパーツごとに分けて名前を付けてください｣と書きましたが、
このページではそれをHTMLに反映していきましょう。
まず分けたパーツを < div > ～ < /div > で囲ってください。
そしてつけた名前を < div id="パーツ名" > のように表記してみてください。
※パーツの名前は半角英数文字を使用してください。このような感じですね。
< div id="menu" >
< div id="contents" >
< div id="footer" >
これをベースにして、スタイルシートを使って細かい指定を行っていきます。
配置のためのスタイルシート
配置の際にスタイルシートで使う属性はさまざまです。
まずはパーツの大きさを指定する width , height です。
width は横幅を、 height は高さを指定します。
次にパーツの境目や余白などを指定する margin , padding , border です。
margin はパーツの外側の余白を、 padding はパーツの内側の余白を指定します。
border は margin と padding の間を指定します。外枠として使われることが多いです。
border は他に縁取りや hr の設定もできたりします。あとテーブルの枠線とか。
最後に配置する場所を指定する float と、指定を解除する clear です。
froat は｢回り込み｣の設定で、横に並べることのできない要素を横に並べるために使います。
div は横に並べることのできない要素なので、 float を使って横に並べます。
(ちなみにこの｢横に並べることのできない要素｣をブロックレベル要素と言います。)
clear は｢回り込み｣を解除する属性です。これを指定することで、
一部のブロックレベル要素のみを横に並べることができ、レイアウト崩れにも対処することができます。
(実際 float のみ指定して clear の指定忘れでレイアウトが崩れているサイトも見かけます)
そしてこれらの指定方法ですが、 width , height , margin , padding , border に関しては
属性 : 数字 + 単位;で指定します。(例：300px,50%など)
float に関しては left (左に配置), right (右に配置)を使用し、 float : left ; のように指定ます。
clear も同じように left (左のみ解除), right (右のみ解除)がありますが
基本的には both (すべて解除)を使用します。
指定方法は float と同じですが、 float を指定したパーツの次に配置されるパーツ
(回り込みの指定を解除したいパーツ)に指定します。
これらをスタイルシートの中に書いていきます。