HTMLで画像やテキストの回り込みを指定する方法を現役デザイナーが解説【初心者向け】

HTMLで画像やテキストの回り込みを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

回り込みさせる場面

写真（画像）の隣接に説明文も掲載するべき場合には、要素を回り込ませる必要があります。下図は、写真（画像）の隣接に説明文も掲載したレイアウトです。

 

floatプロパティについて

floatプロパティには、対象の要素を表示領域の左右のどちらか一方向に寄せる効果があります。その後、一方向に寄せられた要素の次に定義されてある要素を隣接に回り込ませます。

なお、留意点として、floatにて寄せられる対象になった要素は、これまで定義されてありました要素とは異なるz軸において管理されることになります。この特性から、親要素は、内包している子要素があるとして識別しなくなります。その結果、親要素が子要素の高さを含めれずに高さを算出してしまうため、ブラウザの表示結果と各要素の実体の高さにて乖離が生じます。

これらの課題を解決するためには必ずfloatプロパティの効果がおよぶ最後の要素にて、floatプロパティによる回り込みの解除を実現してから、幅と高さが0pxの状態の擬似要素を挟み込み、高さの測り用具として親要素に識別させることが必要です。この解決手法は、clearfixと呼ばれています。

擬似要素の実装が一般的ではなかった頃は、floatによって異なるz軸に移動してしまった要素を同じz軸に戻すための手法や、親要素を同じz軸に移動させる方法も組み合わせて使用されていました。しかし近年のブラウザには不要になっているため、純粋にclearfixを使用してから回り込みを実現するための方法をサンプルコードとして、次項の「画像やテキストの配置を回り込みで指定してみよう」にて紹介します。

 

[PR] Webデザインで副業する学習方法を動画で公開中

画像やテキストの配置を回り込みで指定してみよう

以下、floatプロパティを使用した画像やテキストを回り込みによって配置するためのサンプルコードです。

 

See the Pen
2020-03-23-sample-11 by YOHEI INAI (@yohei_inai)
on CodePen.

上記のサンプルコードでは、左端に画像を寄せてから、右側にテキストを回りこさせて表示させています。次に右端に画像を寄せてから、左側にテキストを回り込ませて表示するためのサンプルコードです。

See the Pen
2020-03-23-sample-12 by YOHEI INAI (@yohei_inai)
on CodePen.

 

監修してくれたメンター

井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。