HTML STUDY
>
>

floatでボックスを左右に寄せる

ここではCSSプロパティfloatを使用してコンテンツを左右に配置する方法を解説していきます。div要素に任意の名前box1～3をつけて右寄せと左寄せを設定していきます。

ボックスをそのまま配置する

まずはCSSプロパティfloatを使わずにコンテンツをそのまま配置してみましょう、今回は100×100pxの色の付いたボックスを３つ使用しています。

要素解説
<div>コンテンツをグループ化
<p>ひと段落

HTMLコード記述例

<div class="box1"><p>ボックス１</p></div>
<div class="box2"><p>ボックス２</p></div>
<div class="box3"><p>ボックス３</p></div>

外部ファイルCSS記述例

@charset "utf-8";

div.box1 {
 width:100px;
 height:100px;
 background-color: #00ff00;
 margin:0px;
 padding:0px;
}

div.box2 {
 width:100px;
 height:100px;
 background-color: #ffff00;
 margin:0px;
 padding:0px;
}

div.box3 {
 width:100px;
 height:100px;
 background-color: #ff0000;
}

ブラウザ表示例

ボックス１

ボックス２

ボックス３

ボックスを右に寄せる

次にCSSプロパティfloatにrightの値を入力してbox1～3を右寄せにしてみましょう。HTMLテキストは前回と同じものです。

CSSプロパティ解説
floatコンテンツを左右に寄せる

外部ファイルCSS記述例

@charset "utf-8";

div.box1 {
 width:100px;
 height:100px;
 background-color: #00ff00;
 float: right;
}

div.box2 {
 width:100px;
 height:100px;
 background-color: #ffff00;
 float: right;
}

div.box3 {
 width:100px;
 height:100px;
 background-color: #ff0000;
 float: right;
}

ブラウザ表示例

ボックス１

ボックス２

ボックス３

ボックスを左に寄せる

最後ににCSSプロパティfloatにleftの値を入力してbox1～3を左寄せにしてみましょう。HTMLテキストは前回と同じものです。

外部ファイルCSS記述例

@charset "utf-8";

div.box1 {
 width:100px;
 height:100px;
 background-color: #00ff00;
 float: left;
}

div.box2 {
 width:100px;
 height:100px;
 background-color: #ffff00;
 float: left;
}

div.box3 {
 width:100px;
 height:100px;
 background-color: #ff0000;
 float: left;
}

ブラウザ表示例

ボックス１

ボックス２

ボックス３

CSSボックス 関連記事