実践Web Standards Designのススメ

第4回 実践 floatプロパティの学習法

この記事を読むのに必要な時間:およそ 2.5 分

前回に引き続き,今回はfloatプロパティを利用した実用度の高いボックスの配置の実現方法を解説します。

練習用HTML

floatプロパティを利用したレイアウトの練習に複雑なHTMLを用意する必要はありません。ボックスの配置方法さえ理解してしまえば,その手法はあらゆる要素に適用でき,また,配置された各ボックスがどのような内容を持とうともレイアウトには影響しないからです。

サンプルとなるHTMLは以下の通りです。

HTMLソース

<div id="box-A">
    <div id="box-B">
        B
    </div>
    <div id="box-C">
        C
    </div>
    <div id="box-D">
        D
    </div>
</div>

CSSを個別に指定できるように,各要素にはid(#box-AからD)を振りました。解説ではid名ではなく,単にボックスA, ボックスB...と呼ばせていただきます。

背景色を着けてボックスを確認

まずは,要素の生成するボックスを視覚的に把握しやすいように,それぞれに背景色を指定しましょう。

HTMLソース(サンプル:preview1.html

#box-A {
    background-color: #333;
}

#box-B {
    background-color: #99CC00;
}

#box-C {
    background-color: #993399;
}

#box-D {
    background-color: #CC6600;
}

表示ではボックスAが見当たりませんが,3つのボックスの後ろに隠れています。

図1 背景色をつけてボックスを確認

図1 背景色をつけてボックスを確認

ボックスBとCをフロート

次に,ボックスBとCに横幅(width)と寄せ(float)を指定しましょう。

HTMLソース(サンプル:preview2.html

#box-A {
    background-color: #333;
}

#box-B {
    background-color: #99CC00;
    width: 300px;
    float: left;
}

#box-C {
    background-color: #993399;
    width: 300px;
    float: left;
}

#box-D {
    background-color: #CC6600;
}

ブラウザの表示を確認すると(大きめのウインドウサイズにして下さい),ボックスDにはfloatを指定していないにも関わらず,3つとも横に並んでいるように見えます。しかし,実際にはボックスDはフロートしたボックスAとBの後ろに重なるように配置されています。

図2 ボックスBとCをフロート

図2 ボックスBとCをフロート

著者プロフィール

市瀬裕哉(いちせゆうや)

2001年,パソコンの購入とともにウェブに興味を持ち,独学でウェブ制作を始める。HTML,CSSの他にFlash,3DCGによる創作活動を続ける。現在,フリーランスとしての活動と並行して都内の専門学校にてウェブデザインコースの講師を務め,若きウェブ戦士の育成にも力を注いでいる。

コメント

コメントの記入