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

初心者向けにHTMLで画像やテキストの回り込みを指定する方法について解説しています。回り込みの指定にはfloatプロパティを利用します。floatとclearfixを使った画像とテキストの配置例をサンプルコードで確認してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

 

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

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

画像やテキストの回り込みを指定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

回り込みさせる場面

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

 

floatプロパティについて

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

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

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

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

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

以下、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では初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

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