概要
CSSプロパティ｢float｣は、要素を左、または右に寄せて配置させることができます。
<div>
<img class="float-left" src="https://www-creators.com/wp-content/uploads/2017/12/tenki_sample.jpg" width="100" height="75" alt="">
明日の天気です。明日は、高気圧に覆われて晴れますが、湿った空気や気圧の谷の影響で次第に曇りとなる所があるでしょう。次に世界の天気です。
</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid #000;
width: 300px;
margin: 10px;
padding: 10px;
}
img {
margin-right: 5px;
}
.float-left {
float: left;
}
</style>またこのプロパティを使用するとそれ以降の要素に影響がでるので、使い方を間違えるとレイアウト崩れに繋がりますので、気をつけましょう。そこでこの指定を解除するプロパティ clear プロパティもセットで覚えておきましょう。
値の指定方法
{ float : 値 }指定した値の説明と表示例です。
| 値 | 説明 |
|---|---|
| left | 指定した要素を左に寄せます |
| right | 指定した要素を右に寄せます |
| none | 初期値。配置指定を行いません |
<div>
<img class="float-left" src="https://www-creators.com/wp-content/uploads/2017/12/tenki_sample.jpg" width="100" height="75" alt="">
明日の天気です。明日は、高気圧に覆われて晴れますが、湿った空気や気圧の谷の影響で次第に曇りとなる所があるでしょう。
</div>
<div>
<img class="float-right" src="https://www-creators.com/wp-content/uploads/2017/12/tenki_sample.jpg" width="100" height="75" alt="">
明日の天気です。明日は、高気圧に覆われて晴れますが、湿った空気や気圧の谷の影響で次第に曇りとなる所があるでしょう。
</div>
<div>
<img class="float-none" src="https://www-creators.com/wp-content/uploads/2017/12/tenki_sample.jpg" width="100" height="75" alt="">
明日の天気です。明日は、高気圧に覆われて晴れますが、湿った空気や気圧の谷の影響で次第に曇りとなる所があるでしょう。
</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid #000;
width: 250px;
margin: 10px;
}
img {
display: block;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-none {
float: none;
}
</style>指定が効かないパターン
position プロパティで｢static｣以外を指定した場合は指定は適用されませんので気をつけましょう。試しに｢absolute｣ を指定した場合です。確認しやすくするために opacity プロパティで画像を透過させてます。
<div>
<img class="float-left" src="https://www-creators.com/wp-content/uploads/2017/12/tenki_sample.jpg" width="100" height="75" alt="">
明日の天気です。明日は、高気圧に覆われて晴れますが、湿った空気や気圧の谷の影響で次第に曇りとなる所があるでしょう。
</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
border: 1px solid #000;
width: 250px;
margin: 10px;
}
img {
display: block;
opacity: 0.8;
}
.float-left {
float: left;
position: absolute;
}
</style>使用方法
基本的なWebページのレイアウトを作る際に利用しています。ヘッダー、メインコンテンツ、サイドコンテンツ、フッターという基本的なレイアウトです。
<div class="container">
<div class="headding">ヘッダー領域</div>
<div class="main clear-float">
<div class="main-left float-left">
2カラムレイアウト左
</div>
<div class="aside float-right">
２カラム右サイドモジュール
</div>
</div>
<div class="footer">フッター領域</div>
</div>
<style>
.headding {
background-color: #def;
}
.main-left {
background-color: #ffeedd;
width: 70%;
height: 100px;
}
.aside {
background-color: #e6e6fa;
width: 30%;
height: 100px;
}
.footer {
background-color: #def;
}
.clear-float:after {
content: "";
display: block;
height: 0;
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
</style>