これは何
- 要素のレイアウトで
display: flexが大活躍している2021年において、floatプロパティをどう使うかを書いた記事です - また、記事投稿イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります
リポジトリとGitHub Pages
この記事を書くために書いたコードは全て公開しています。
実際の見た目はGitHub Pagesからどうぞ。
画像にテキストを回り込ませたいときが1番使うと思われる
このようなレイアウトを組むときにfloatが使えます。
以下に簡略化したコードを載せておきます。
<body>
<h1 class="title">floatをあえて使うなら</h1>
<div class="container -left">
<img src="https://picsum.photos/160?random=1" alt="" width="160" height="160" class="image -float-left" />
<h2>float: left</h2>
<p class="paragraph">Lorem ipsum ~~~</p>
</div>
<div class="container -right">
<img src="https://picsum.photos/160?random=2" alt="" width="160" height="160" class="image -float-right" />
<h2>float: right</h2>
<p class="paragraph">Lorem ipsum ~~~</p>
</div>
</body>
body {
background-color: #f2f2f2;
display: grid;
gap: 16px;
grid-template-columns: 1fr 400px 400px 1fr;
padding: 32px;
}
.title {
grid-column: 2 / 4;
}
.container {
background-color: #fff;
border-radius: 8px;
padding: 24px;
}
.container.-left {
grid-column: 2 / 3;
}
.container.-right {
grid-column: 3 / 4;
}
.container.-two-column {
grid-column: 2 / 4;
}
.image {
background-color: #dcdcdc;
border-radius: 4px;
}
.image.-float-left {
float: left;
margin-right: 16px;
}
.image.-float-right {
float: right;
margin-left: 16px;
}
.paragraph {
margin-top: 2px;
}
昔ながらの、要素を横並びにする使い方は駄目？
駄目というほどではありません。
思った通りのレイアウトができて、コードを書く人同士が上手く連携できるなら何も問題は無いはずです。
しかし複数の要素をfloatで横並びにする際、最後の要素のfloatは解除してあげる必要があります。
画像に一律でfloat: left
|
最後の画像にはfloatをかけていない |
|---|---|
 |
 |
実現したいのが左のレイアウトなら良いのですが、どちらかといえば右のレイアウトを意図する方が多いのではないでしょうか？
ちなみに右のコードは以下のように書きました。
<div class="container -two-column">
<img src="https://picsum.photos/160?random=3" alt="" width="160" height="160" class="image -traditional-float" />
<img src="https://picsum.photos/160?random=4" alt="" width="160" height="160" class="image -traditional-float" />
<img src="https://picsum.photos/160?random=5" alt="" width="160" height="160" class="image -traditional-float" />
<h2 class="traditionl-float-headline">横並びとしてのfloat</h2>
<p class="paragraph">Lorem ipsum ~~~</p>
</div>
.image.-traditional-float:not(:last-of-type) {
float: left;
margin-right: 16px;
}