要素の配置を決める｜divとfloatで簡単作成【CSS】

ホームページのデザインを作成する場合、まず、大まかなデザインを決めます。

例えば、

上にタイトルを書く場所
下にサイトマップを作りたい
左右に画像と記事を分けて表示したい

などなど、数多い要望があると思います。

これから紹介するのは、ホームページを作成する上での要素の配置方法。

初心者の方でも扱いやすい《div》と《float》の２つを使った基本的な配置方法を紹介します。

ブロックレベル要素「div」で３つのブロックを作成
1. レイアウトを作成（A）
2. レイアウトを２つ作成（B・C）
プロパティ《float》と《clear》で横並びにする
1. 左寄せ、右寄せの解除は《clear》プロパティ
A・B・Cのレイアウトを作成
要素の配置｜問題
レイアウトは《div》《float》《clear》の３つで完成！

ブロックレベル要素「div」で３つのブロックを作成

始めに、大まかなデザインを決めましょう。

ここでは、例として「上・左・右」のそれぞれにレイアウトを配置します。

レイアウトを配置する時に利用する要素としては「div」要素を利用します。

div要素は汎用性のある要素の１つで、この要素の中に新たなdiv要素を作成することもできます。

コンテンツを区分する際には「div」を駆使してレイアウトを設計していきましょう。

レイアウトを作成（A）

早速、div要素を使って１つのレイアウトを作成していきます。

使い方としては、

<div class="sample_a">A</div>

HTMLでは、たったこれだけを記載するだけ。

この時、《クラス属性》を使い、下記のCSSを指定しています。

装飾を担当するCSSでは、

.sample_a {
     width: 100%; /* 横幅を指定 */
     height: 200px; /* 縦幅を指定 */
     background-color: blue; /*背景色*/
}

お好みの横幅、縦幅を指定することで１つのレイアウトが完成します。

これで、Aのレイアウトを作成できました。

後は、同じように１つのレイアウトを３つ作成していきます。

レイアウトを２つ作成（B・C）

左右にレイアウトを配置する時は《div》要素と《flort》プロパティと《clear》プロパティの３つを利用します。

まず、先程と同じようにdiv要素を使ってレイアウトを作成します。

今回は、レイアウトが２つあるので、BとCの２つのレイアウトを作成しましょう。

HTMLでは、

<div class="sample_b">B</div>
<div class="sample_c">C</div>

div要素を利用して「B」と「C」のそれぞれを作成しました。

これを横に配置するためにCSSを編集していきます。

まずは、それぞれを横に配置するので大きさを指定する必要があります。

横幅は100%なので、AとBのそれぞれを半分（50%）以下にすることで横に配置することができます。

CSSでの大きさを指定すると、

.sample_b {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:#DCDCDC; /*背景色*/
}
.sample_c {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:green; /*背景色*/
}

それぞれのレイアウトの横幅が合わせて100%以内に収まるように設計します。

後は、レイアウト「B」と「C」を横並びにするだけです。

プロパティ《float》と《clear》で横並びにする

レイアウトを横並びにする方法は《float》プロパティと《clear》プロパティを利用します。

このプロパティはレイアウトを行う上での基本なので、是非、身に付けておきましょう。

使い方としては、

.sample_b {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:#DCDCDC; /*背景色*/
     float: left;
}
.sample_c {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:green; /*背景色*/
     float: left;
}

上記のソースコードのように【float: left】と記載するだけで要素を左寄せにすることができます。

通常は下に配置されるはずの要素が《float》を利用することで配置が変化します。

ただ、これだけでは十分ではありません。

プロパティ《float》は３つのレイアウトの配置を変化させるわけではなく、これ以降のレイアウトの配置も変化させてしまいます。

つまり、以降のレイアウトを崩さないためにプロパティ《float》を解除する必要があるのです。

左寄せ、右寄せの解除は《clear》プロパティ

プロパティ《float》を利用した際には《clear》プロパティで以降の位置を元に戻します。

HTMLでは、

<div class="sample_clear"></div>

CSSでは、

.sample_clear {
     clear: both;
}

たった、これだけの追加で位置を元に戻すことができます。

A・B・Cのレイアウトを作成

今回、作成した「A」「B」「C」のレイアウトを作成したソースコード（HTML）は、

<div class="sample_a">A</div>
<div class="sample_b">B</div>
<div class="sample_c">C</div>
<div class="sample_clear"></div>

CSSは、

.sample_a {
     width: 100%; /* 横幅を指定 */
     height: 200px; /* 縦幅を指定 */
     background-color: blue; /*背景色*/
}
.sample_b {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:#DCDCDC; /*背景色*/
     float: left;
}
.sample_c {
     width: 50%; /* 横幅を指定 */
     height: 500px; /* 縦幅を指定 */
     background-color:green; /*背景色*/
     float: left;
}
.sample_clear {
     clear: both;
}

以上のソースコードで「A」「B」「C」のレイアウトを完成させることができます。