floatで雑誌のようなテキストの回り込みを表現する

2021.09.11

2022.04.02

どうも！かけちまるです！

Webサイトでよくある画像とテキストの横並びレイアウト。
Flexboxやinline-blockだとテキストが長い時に画像の下の余白が気になってしまいます。
そんな時はfloatを活用して雑誌のようにテキストを回り込ませるレイアウトにしてみてはいかがでしょうか？

ということでこの記事では、

・floatでテキストを回り込みさせて雑誌のようなレイアウトにする方法

をご紹介します。

今回の目標

今回は以下のような見た目を目指します。

floatで雑誌のようなレイアウトを実装

さっそく実装していきます。
実装自体はとても簡単なのでささっとできると思います。

ポイント

・HTMLでは画像要素を先に記述する
・CSSでは画像要素にfloat: left;をあてる

実装するにあたってのポイントはこんな感じです。

HTML

HTML
コピー
<div class="float_wrap">
  <img class="float_img" src="https://kakechimaru.com/wp-content/uploads/2021/01/ogp.png">
  <div class="float_text">それは偶然いかにその学習隊としてものの上に存じなくん。もっとも当時を学習界は別にその説明ですでだけに送っからおらないをは講義思わないたから、全くには突き破るなたなあり。寄宿舎にしなくっのはなおほかをとうていましうた。はなはだ木下君を始末次こう楽で与えた主義こうした言葉私か附与でというお尊重なかっんですんて、この以後は私か西洋釣竿に死んし、大森さんのんに学校の私にできるだけお発展となりてこれ文芸のご関係を思わようと何しろお経験がしたなけれて、ようやくはたして仮定がなるですからしまっうものから通り過ぎでなら。</div>
</div>

CSS

CSS
コピー
.float_wrap{
  margin-left: auto;
  margin-right: auto;
  width: 400px;
}

.float_img{
  display: block;
  float: left;
  margin-right: 20px; 
  width: 50%;
}

.float_text{
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
  width: 100%;
}