floatでボックスを左右に寄せる
ここではCSSプロパティfloatを使用してコンテンツを左右に配置する方法を解説していきます。div要素に任意の名前box1~3をつけて右寄せと左寄せを設定していきます。
ボックスをそのまま配置する
まずはCSSプロパティfloatを使わずにコンテンツをそのまま配置してみましょう、今回は100×100pxの色の付いたボックスを3つ使用しています。
要素 | 解説 |
<div> | コンテンツをグループ化 |
<p> | ひと段落 |
HTMLコード記述例
<div class="box1"><p>ボックス1</p></div>
<div class="box2"><p>ボックス2</p></div>
<div class="box3"><p>ボックス3</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;
}
ブラウザ表示例
ボックス1
ボックス2
ボックス3
ボックスを右に寄せる
次に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;
}
ブラウザ表示例
ボックス1
ボックス2
ボックス3
ボックスを左に寄せる
最後にに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;
}
ブラウザ表示例
ボックス1
ボックス2
ボックス3