しっかりと下準備が出来た所で、今度は細かい設定の前に、大まかなレイアウトを決めてしまいましょう。
今回使用するのはfloatというプロパティです。苦手だと思われる方も多い、段組に挑戦です。

vol.2　作業の流れ編で作ったHTMLを整形し、これにスタイル指定を行う事にします。まずはこちらを用意して下さい！

設計図を作ろう！

さて、vol.2の作業の流れ編で、完成図を考えました。

次は、これをどうやってコーディングするのか、設計図を作りましょう。これがあれば、コーディングに迷いが出ませんし、レイアウトなど、特に全体を把握する必要がある部分にはとても役立ちます。（この設計図の事をワイヤーフレームと呼びます。）

完成図をもう一度見てみると、左に写真、右に文章となっています。全体の幅は、写真部分プラス文章部分で550pxとして作成しています。

写真の幅は210pxで作成しましたので、widthは210px。右の文章部分は、550-210で340px。写真と文章の間に余白として10px入れるので、widthは330pxとなります。

以上の事から設計図はこうなります。

左に領域を一つ、右に領域を一つ、この二つを囲む様に、大きな領域を一つという設計図になりましたね。この領域は何を表しているのかという言うと、何度も出てきた「ボックス」です。

ボックスとは、ブロック要素やインライン要素の領域の事で、余白と枠線を持つ四角形の事でした（vol.3参照）さて、この領域、どんなタグ付けをすれば適当でしょうか。

ここでは、<div>というタグを使います。

<div>というタグは、特に意味を持たない珍しいタグです。強いて言うなら「ここから」でしょうか。

「ここからここまでを、まとめてセンタリングしたい」等という時に使います。スタイルシートを適用するためのタグと考えて良いでしょう。（同じようなタグに<span>があります。こちらは、インライン要素です。）

タグが決まった所で、設計図に基づいて、「領域」を作成してしまいましょう。

名前を付けよう！

さて、写真の部分を左、文章の部分を右に寄せたいのですがdivタグにスタイルを指定すると、全てのdivタグに指定した事になります。
全体のdiv、右部分のdiv・・と別々にスタイルを指定したい場合は、どうすれば良いのでしょうか。

複数あるタグの中で、ひとつを指定したい時は、名前を付けます。方法は、タグが持つ、「id属性」に任意の名前を指定します。

この「id属性」を使った名前付けをする場合は、同じ名前を他の要素に付ける事は出来ません。
ですので、id属性で名前を付ける時は、同じようなスタイル指定を繰り返さない、例えばヘッダーやフッターなど、一つのHTMLファイルに一つしかない要素に使用します。

この場合も、左側のボックスという意味のdivは、もう2度と出てこないという意味で、id属性を使用します。
（反対に、同じスタイルを持つ要素が複数出てくる場合に使われる名前付けの方法として、class属性というものもあります。）

今回は、各々のdivタグに幅(width)やレイアウト用に回りこみの属性を指定したいので、3つ全てに名前をつけます。
それでは、外側の大きなdivには「container」、写真部分には「pic_area」、文章部分には「text_area」という名前をつけてみましょう。
書き方は

こうなります。

名前付けが終わり、いよいよスタイル付けが出来る状態になりました。
次のページは幅指定と、floatプロパティについてです。

いよいよ段組！

早速、設計図通りに幅を指定してみましょう！
CSSで、スタイル指定の仕方はこうなります。#(シャープ)の後に、ID属性で指定した名前を書きます。（div#container　の様に、要素の後に#を続けても同じ意味です。）

これで、幅は指定出来ました。

次に画像の部分を左に、文章の部分を右に回り込ませます。CSSでのレイアウトで、良く使われる方法として、floatプロパティがあります。このプロパティにleft、つまり左を指定すると、

ボックスを左に配置、後に続く要素を右に回り込ませる。

という意味になります。
早速、pic_areaを左に配置し、後続のtext_areaを回りこませましょう！

さて、うまく回り込んだでしょうか？
どうやら上手くいかないようです・・。

floatでのレイアウトでの注意点

実はこのfloatを使ったレイアウト、仕様そのものも少々複雑なのですが、
なんといってもIEに独自にバグがあり、いくつか気をつけなければ上手くいかない、コーダーを悩ませる代表的なプロパティです。

IEのfloatに関するバグは、

バグ１：
floatの後続のボックスに幅(width)が指定してある場合、floatしたボックスと、後続のボックスの間に隙間が空く。

バグ２：
後続のボックスの幅を、自動的に短く調整(?)してしまう。

例）

上の例ではIEで隙間が出来ているのが解ります。
今回floatが上手くいかなかった原因は、この隙間の分、親(container)のボックスより幅が大きくなってしまい、カラム落ち(入りきらなくなり、下に落ちる)したためです。試しにcontainerのwidthを560pxに広げてみて下さい。IEでは、段組が出来ています。

しかし、Firefoxでは下に表示されています。

これは、動作としてはFirefoxが正しく、IEは後続のボックスであるtext_areaを自動的に短く調整してしまっているため、一見上手くいったかの様に見えているだけです。バグ２ですね。

このバグを解消するため、floatを使ったレイアウトでは注意点が2つあります。

注意１：floatを指定したボックスには必ずwidthを指定する。
注意２：後続のボックスを回り込ませるためには、後続のボックスもfloatする。(そのためwidthを必ず指定する。)

これで、隙間も解消され、ブラウザ間の表示のずれもなくなります。CSSは最終的に、こうなります。

なんとか、レイアウトが上手くいきました。
次回は、各々の要素にスタイルをつけ、いよいよ完成！です。