CSS Lesson
フル CSS のレイアウトを実例をもとに解説しています。正しい文書構造、W3C 推奨に準拠していない場合もありますのでご了承ください。
※解説は WordPress インストール済みの環境を前提にしています。

CSS入門2 : floatプロパティでレイアウトを作成

CATEGORY : CSS段組レイアウト入門 | UPDATE : 2008.10.25

段組レイアウトには、表示位置を決めてボックスを配置する position プロパティと、ボックスを左右に寄せて順送りで回り込ませる float プロパティが主に使われます。WordPress のように画像の枚数や記事の長さが一定しないページデザインには、ボックスが相対的に対応できる float プロバティが向いているようです。

1 ： CSSファィルにページ全体とヘッダー部分を設定
CSSファィルに3つのボックスデザイン設定を記述します
■lesson.css ファイルに記述
/*++ヘッダー++*/
#page {
width: 750px;/*　ボックスの横幅　*/
height: 500px;/*　ボックスの高さ ※解説用設定　*/
margin-left: auto;/*　左マージン(余白)オート　*/
margin-right: auto;/*　右マージン(余白)オート　*/
}
#top {
width: 750px;
height: 20px;
text-align: left;/*　テキスト左揃え　*/
background: #99CC66;/*　背景(カラーのみ指定)　*/
}

#face {
width: 750px;
height: 80px;
background: #FFCCFF;
}

#menu {
width: 750px;
height: 30px;
margin-bottom: 20px;/*　下マージン(余白)　*/
background: #CCCCFF;
}

※ほとんど同じ単語の繰り返しで、数値だけが変更されています。コピーしてそのまま CSS ファィルに貼付ければ OK です。
※注意 : /*　説明　*/ は貼付け後削除します。使用する場合セミコロン（ ; ）の後に全角スペースが入るとプロパティが無効になります。
  • # : ハッシュで始まる要素は ID セレクタで、CSSでの設定をこの書式で記述します。
  • page : 通常は height 設定は必要ありません。解説用に設定しています。
    text-align : bodpy 設定で center に指定しましたので left の指定で、文字を左揃えに戻します。入れ子のボックスはレフト揃えになります。
  • top & face & menu : ボックスの高さを height 設定で固定します。
▷CSSの書式は #page { width: 750px; height: 500px; text-align...以下略... } のように1行でも記述できます。
▷margin、padding、border-width は margin: 10px 0 10px 20px; のように時計回りで上、右、下、左の順で一括指定できます。
▷background は background: #FFFFFF url(images/back.gif) repeat-y center top; のように一括指定できます。継続ボックスの設定を一部だけ変更する場合 background-color や background-image プロパティを使用します。
2 ： PHPファイルにHTMLを記述しブラウザで確認します
CSS の設定を PHP ファイルで読み込み、デザインの確認をします。
■lesson.php の <body> </body> の間に記述します。
<div id="page"><!-- PAGE -->

<div id="top"><!-- TOP -->
トップ
</div><!-- TOP・END -->

<div id="face"><!-- FACE -->
サイトタイトル
</div><!-- FACE・END -->

<div id="menu"><!-- MENU -->
メニュー
</div><!-- MENU・END -->

</div><!-- PAGE・END --><
※ファイル作成時に入れた「レッスンテンプレート」の文字を削除し、その部分に上のタグを記述します。
※タグとタグの間の空行は、分かりやすくするために入れています。
※<!-- PAGE --> <!-- PAGE・END --> はdiv要素の読み込みと終了を、分かりやすくするために入れた説明です。
  • IDセレクタの読み込み : # で設定された ID セレクタは <div id=""> で読み込み、</div> のタグで終了します。必ずセットで使用します。
  • top、face、menu は page の中に読み込まれます。page はすべてのボックスを包むようになります。
ここで、前項で作成のページ記事をプレビューして確認します。下の画像のように表示されれば成功です。
※一部のブラウザでは中央に配置されない場合もあります。
page ボックスはカラーの指定が無いので見えていませんが、右のスライダーでボックスの適応が確認できます。
▷<div id="ID名"> は </div id="ID名"> でも終了できます。ただし、変更の場合2カ所を修正することになるので、通常は </div> で終了します。始めはどの セレクタをどこで終了したか混乱しますので <!-- ID名 --> <!-- ID名・END --> のメモを書き加えることをおすすめします。
ただし、ブラウザの HTML ソースには表示されますので、初心者がバレます（笑）ちなみに、私はメモ書きだらけです。
次は、float プロパティを使って2段組ボックスを作成します。
▲ PAGE TOP