6日でできる 新HTML入門｜CSSで画像と文字を回り込ませる方法
画像を横に寄せ、文字を自然に流し込む。floatとclearを使って、読みやすく表情のあるレイアウトを作ろう。
CSSで画像と文字を回り込ませる方法の序章
Webページでは、画像と文章を組み合わせて見せる場面がよくあります。たとえば、観光地の紹介文の横に写真を置いたり、商品説明の横に小さな画像を配置したり、記事の中にイメージ写真を入れて本文を読みやすくしたりする場合です。
このようなときに役立つのが、CSSのfloatプロパティです。floatを使うと、画像やボックスを左または右に寄せ、その横に続く文章を自然に回り込ませることができます。画像を文章の中に溶け込ませるように配置できるため、単純に画像と文章を縦に並べるよりも、ページに動きが出ます。
ただし、floatを使うときは、回り込みをどこで終わらせるかも大切です。回り込みを解除しないまま次の見出しや要素を置くと、意図しない位置に表示されることがあります。そこで使うのがclearプロパティです。clearを指定すると、floatによる回り込みを解除し、次の要素を通常の流れに戻せます。
ここでは、floatで画像と文字を回り込ませる基本、marginによる余白調整、clearによる回り込み解除、さらに複数のボックスを横並びにするレイアウト例まで、具体的なHTMLサンプルを使いながら確認していきます。
素材のダウンロード
以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。
| coast-walk.png |
|---|
 |
floatは要素を左右に寄せるCSS
floatは、要素を左または右に寄せ、後に続く内容をその周囲に回り込ませるCSSです。もともとは、新聞や雑誌のように画像の横へ本文を流し込む表現によく使われてきました。
たとえば、画像にfloat: left;を指定すると、画像は左側に配置されます。その後に続く文章は、画像の右側へ回り込んで表示されます。
img.float-left {
float: left;
}反対に、float: right;を指定すると、画像は右側に配置され、文章は左側へ回り込みます。
img.float-right {
float: right;
}floatで指定できる主な値
| 値 | 意味 |
|---|---|
| left | 要素を左に寄せ、後続の内容を右側に回り込ませる |
| right | 要素を右に寄せ、後続の内容を左側に回り込ませる |
| none | 回り込みを行わない初期状態 |
floatを使うと、画像と文章を横に並べたような見た目を作れます。ただし、通常の横並びレイアウトとは少し仕組みが違います。floatを指定された要素は通常の文書の流れから少し外れ、周囲の文章がその空いた場所に流れ込むように表示されます。
画像と文章を回り込ませる基本
画像を左に寄せて、文章を右側に回り込ませたい場合は、img要素にclassを付けて、CSSでfloat: left;を指定します。
<img class="float-left" src="river-walk.png" alt="川沿いの遊歩道">
img.float-left {
float: left;
margin-right: 12px;
}ここで重要なのがmargin-rightです。画像を左に寄せると、文章は画像の右側に回り込みます。しかし、余白を指定しないと画像と文字が近づきすぎて、少し読みにくくなります。
画像と文章の間にすき間を作るために、左寄せ画像ではmargin-rightを使います。右寄せ画像では、反対側のmargin-leftを使います。
floatとmarginの組み合わせ
| 画像の配置 | よく使う余白 |
|---|---|
| float: left; | margin-rightで画像の右側に余白を作る |
| float: right; | margin-leftで画像の左側に余白を作る |
| 上下にも余白が必要な場合 | margin-topやmargin-bottomも使う |
画像と文字の距離は、ページの読みやすさに大きく関わります。画像にぴったり文字がくっついていると窮屈に見えるため、回り込みを使うときはmarginもセットで考えるとよいでしょう。
図1：floatで画像の横に文章を回り込ませる
この図から分かること
float: left;を指定すると、画像が左側に配置され、後に続く文章が右側へ回り込みます。画像と文章がくっつきすぎないように、margin-rightで余白を作ることも大切です。画像と本文を自然に組み合わせたいときに使いやすい指定です。
画像を左に寄せて本文を回り込ませる
次の例では、海辺の散策コースを紹介するページを作ります。画像を左に配置し、その右側に文章を回り込ませています。
ファイル名： Lesson18-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>海辺の散策コース</title>
<style>
body {
font-family: sans-serif;
line-height: 1.8;
background-color: #FAFAFA;
}
img.coast-photo {
float: left;
width: 160px;
height: auto;
margin: 0 16px 12px 0;
border-radius: 8px;
}
p {
width: 680px;
}
</style>
</head>
<body>
<h1>海辺の散策コース</h1>
<p>
<img class="coast-photo" src="coast-walk.png" alt="海辺の散策路">
この散策コースは、青い海を眺めながらゆっくり歩ける人気のルートです。
波の音を聞きながら進む道には、休憩できるベンチや小さな展望スペースがあります。
朝の時間帯は空気が澄んでいて、写真撮影にも向いています。
休日に気軽に自然を楽しみたい人におすすめの場所です。
</p>
</body>
</html>ブラウザの表示例
このHTMLでは、img要素にcoast-photoというclassを付けています。CSSでは、img.coast-photoにfloat: left;を指定しています。これにより、画像が左側に配置され、その後に続く文章が画像の右側に回り込みます。
width: 160px;で画像の横幅を指定し、height: auto;で縦横比を保っています。画像を本文中に入れる場合、画像が大きすぎると文章の幅が狭くなって読みにくくなります。本文の横に置く画像は、内容とのバランスを見ながら適度なサイズにすることが大切です。
margin: 0 16px 12px 0;では、画像の右側に16px、下側に12pxの余白を作っています。値の順番は、上、右、下、左です。画像を左に寄せているため、文章と接する右側に余白を作るのがポイントです。
border-radius: 8px;は、画像の角を少し丸くする指定です。回り込みの仕組みに直接関係するCSSではありませんが、写真をやわらかく見せるための装飾として加えています。
画像を右に寄せる場合の考え方
画像を右側に配置したい場合は、float: right;を使います。この場合、文章は画像の左側に回り込みます。
img.float-right {
float: right;
margin-left: 16px;
}左寄せのときはmargin-right、右寄せのときはmargin-leftを使うと考えると分かりやすくなります。文章と画像が接する側に余白を作るのが基本です。
左寄せと右寄せの違い
| 指定 | 画像の位置 | 文章の回り込み | よく使う余白 |
|---|---|---|---|
| float: left; | 左側 | 右側へ回り込む | margin-right |
| float: right; | 右側 | 左側へ回り込む | margin-left |
右寄せの画像は、記事の途中にアクセントとして写真を置きたいときや、本文の左側を広く使いたいときに便利です。ただし、左右の配置がページ内で頻繁に変わると読みにくくなることがあります。基本の配置ルールを決めて、統一感を持たせると見やすくなります。
floatは画像以外の要素にも使える
floatはimg要素だけでなく、divやsectionなどのブロック要素にも指定できます。たとえば、複数のカードを横に並べたいときに、各カードへfloat: left;を指定する方法があります。
.card {
float: left;
width: 200px;
margin-right: 20px;
}このようにすると、カードが左から順番に横並びになります。現在のWeb制作では、横並びレイアウトにはflexboxやgridが使われることが多いですが、floatによる横並びの考え方を理解しておくと、古いCSSや既存サイトの修正にも対応しやすくなります。
floatで複数の要素を横に並べる場合は、親要素や後続要素への影響に注意が必要です。floatを指定した要素の後に見出しや別のブロックを置くと、その要素まで横に回り込んでしまうことがあります。そのような場合は、次に説明するclearを使って回り込みを解除します。
clearは回り込みを解除するCSS
floatを使った後は、どこかで回り込みを解除する必要があります。回り込みを解除せずに次の要素を配置すると、意図しない場所に見出しやボックスが入り込むことがあります。
clearは、floatによる回り込みを解除するためのCSSです。
clearで指定できる主な値
| 値 | 意味 |
|---|---|
| left | 左寄せされたfloatの回り込みを解除する |
| right | 右寄せされたfloatの回り込みを解除する |
| both | 左右両方のfloatの回り込みを解除する |
| none | 回り込みを解除しない初期状態 |
実際の制作では、左右どちらのfloatにも対応できるclear: both;がよく使われます。
.next-section {
clear: both;
}この指定をすると、next-sectionはfloatされた要素の横には回り込まず、その下に表示されます。
図2：clearで回り込みを解除する
この図から分かること
floatを使うと、後に続く文章や要素が回り込みます。次の見出しや別のセクションを通常の位置に戻したい場合は、clearを指定します。clear: both;を使うと、左寄せと右寄せの両方の回り込みを解除できるため、レイアウトの区切りを作りやすくなります。
clearを使う場面
clearは、次のような場面で使います。
| 場面 | clearを使う理由 |
|---|---|
| 画像の回り込み後に新しい見出しを置く | 見出しが画像の横に入り込まないようにする |
| floatで並べたカードの後に別の内容を置く | 後続の要素をカードの下から始める |
| 左右どちらのfloatにも対応したい | clear: both;でまとめて解除する |
たとえば、画像と本文を回り込ませた後に新しい見出しを置く場合、その見出しにclear: both;を指定しておくと安心です。
h2 {
clear: both;
}この指定により、h2はfloatの横に回り込まず、float要素の下から表示されます。
空の要素で回り込みを解除する方法
floatの後に、回り込み解除用の空要素を置く方法もあります。
.clear-box {
clear: both;
}この方法では、clear-boxという空のdivを置いて、その位置で回り込みを解除します。ただし、見た目のためだけに空のHTML要素が増えるため、HTMLが少し読みづらくなることがあります。
学習の段階では分かりやすい方法ですが、実際の制作では、clearfixという方法や、親要素にoverflowを指定する方法、あるいはflexboxやgridを使う方法もあります。まずはclearの役割を理解し、floatの影響を止める指定だと押さえておきましょう。
floatで複数のボックスを横に並べる
floatは、文章の回り込みだけでなく、複数のボックスを横に並べるレイアウトにも使えます。たとえば、商品カードやおすすめ記事カードを横に並べる場合です。
次の例では、3つのサービス紹介ボックスを横並びにしています。最後にclear用の要素を置き、その後の見出しが横並びの影響を受けないようにしています。
ファイル名： Lesson18-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サービス紹介カード</title>
<style>
body {
font-family: sans-serif;
background-color: #FAFAFA;
line-height: 1.7;
}
.service {
float: left;
width: 30%;
margin: 1%;
padding: 14px;
border: solid 1px #CCCCCC;
background-color: white;
box-sizing: border-box;
}
.service h2 {
margin-top: 0;
font-size: 20px;
color: #225577;
}
.clear-area {
clear: both;
}
.next-info {
background-color: #FFF8E1;
border-left: solid 6px #F9A825;
padding: 12px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>地域サポートサービス</h1>
<div class="service">
<h2>観光案内</h2>
<p>初めて訪れる人にも分かりやすく、周辺の見どころを紹介します。</p>
</div>
<div class="service">
<h2>体験予約</h2>
<p>カヌーや陶芸など、地域ならではの体験プログラムを予約できます。</p>
</div>
<div class="service">
<h2>交通情報</h2>
<p>最寄り駅からのアクセスやバスの利用方法を確認できます。</p>
</div>
<div class="clear-area"></div>
<div class="next-info">
ここから下の内容は、floatによる横並びの影響を受けずに表示されます。
</div>
</body>
</html>ブラウザの表示例
このHTMLでは、3つのdivにserviceというclassを付けています。CSSでは.serviceにfloat: left;を指定しているため、3つのボックスが左から横に並びます。
width: 30%;は、それぞれのボックスの横幅を親要素の30%にする指定です。margin: 1%;で各ボックスの周囲に余白を作っています。3つのボックスを横に並べるため、幅と余白の合計が100%を大きく超えないように調整しています。
box-sizing: border-box;を指定している点も重要です。paddingやborderを含めてwidthの中に収めるため、横幅の計算がしやすくなります。floatで横並びを作るときは、幅、余白、枠線、内側余白の合計を意識しましょう。
clear-areaにはclear: both;を指定しています。この空のdivによって、floatによる横並びの影響をそこで解除しています。その下にあるnext-infoは、3つのカードの横に入り込まず、通常の流れで下に表示されます。
floatレイアウトで注意したいこと
floatは便利ですが、少し扱いに注意が必要です。特に、後続要素への影響と親要素の高さに気を付けましょう。
floatを指定した要素は、通常の文書の流れから外れたように扱われます。そのため、親要素がfloatした子要素の高さをうまく認識できず、背景色や枠線が期待通りに広がらない場合があります。
この問題を解決する方法として、clearを使う、clearfixを使う、親要素にoverflow: hidden;を指定するなどの方法があります。
float使用時の主な注意点
| 注意点 | 内容 |
|---|---|
| 後続要素が回り込む | 必要に応じてclearで解除する |
| 余白がないと読みにくい | marginで画像やボックスの周囲に余白を作る |
| 横幅の合計に注意する | width、padding、border、marginの合計を確認する |
| 親要素の高さが崩れることがある | clearfixなどで対応する場合がある |
floatは、画像と文章の回り込みには今でも分かりやすい方法です。一方で、ページ全体の大きなレイアウトや複雑な横並びには、現在ではflexboxやgridが使われることが多くなっています。floatは、回り込み表現や既存コードの理解のために、しっかり押さえておくと役立ちます。
clearfixという考え方
floatした要素を含む親要素の高さが崩れる場合、clearfixという方法が使われることがあります。clearfixは、親要素の最後に見えないクリア処理を追加して、floatの影響を親要素内で収めるためのテクニックです。
代表的な書き方は次のような形です。
.clearfix::after {
content: "";
display: block;
clear: both;
}この指定を親要素に付けると、親要素の最後に見えないブロックが追加され、clear: both;によってfloatが解除されます。
たとえば、複数のカードを囲む親要素にclearfixを付けておくと、親要素がカードの高さを認識しやすくなります。
<div class="card-list clearfix">
<div class="card">カードA</div>
<div class="card">カードB</div>
</div>clearfixは少し応用的な内容ですが、floatを使ったレイアウトを理解するうえで大切な考え方です。
図3：floatで横並びにした後はclearで流れを戻す
この図から分かること
floatを複数の要素に指定すると、カードのようなボックスを横に並べられます。ただし、後に続く要素まで横に回り込んでしまう場合があるため、clear: both;で回り込みを解除します。floatとclearを組み合わせることで、横並び部分と通常の表示部分を分けて管理できます。
floatと現在のレイアウト手法の関係
floatは、画像の回り込みや昔ながらの横並びレイアウトでよく使われてきたCSSです。現在では、ページ全体のレイアウトや複雑なカード配置には、flexboxやCSS Gridを使うことが多くなっています。
ただし、floatが不要になったわけではありません。文章の中に画像を入れて、本文を自然に回り込ませる表現では、floatは今でも分かりやすい方法です。また、既存のWebサイトではfloatを使ったCSSが残っていることも多いため、仕組みを理解しておくと修正や保守がしやすくなります。
float、flexbox、gridの使い分けの目安
| 方法 | 向いている用途 |
|---|---|
| float | 画像の横に文章を回り込ませる |
| flexbox | メニュー、ボタン、カードなどを一方向に並べる |
| CSS Grid | 縦横に整ったグリッドレイアウトを作る |
学習の流れとしては、まずfloatで回り込みの基本を理解し、そのあとflexboxやgridに進むと、CSSレイアウト全体の考え方がつかみやすくなります。
使用タグ一覧と解説
この学習で登場した主なHTMLタグを整理しておきます。
| タグ | 用途 | 主な属性 |
|---|---|---|
| html | HTML文書全体を表す | lang |
| head | 文字コードやタイトルなどの情報を書く | なし |
| meta | 文字コードを指定する | charset |
| title | ブラウザのタブに表示されるタイトルを指定する | なし |
| style | HTML内にCSSを書く | なし |
| body | ブラウザに表示される内容を書く | なし |
| h1 | ページの大きな見出しを表す | なし |
| h2 | セクションやカードの見出しを表す | なし |
| p | 段落を表す | なし |
| img | 画像を表示する | src、alt、class |
| div | 汎用的なまとまりを作る | class |
imgは、画像を表示するためのタグです。floatを指定すると、画像を左や右に寄せて、文章をその横に回り込ませることができます。srcには画像ファイル名、altには画像の説明を指定します。
pは段落を表すタグです。画像をpの中に入れると、画像の後に続く文章が回り込みやすくなります。文章と画像を自然に組み合わせたいときによく使う形です。
divは、カードやレイアウトのまとまりを作るために使います。複数のdivにfloatを指定すると、横並びのボックスを作れます。後続の要素に影響が出る場合は、clearを指定したdivを使って回り込みを解除できます。
styleは、HTMLファイル内にCSSを書くためのタグです。学習用の短いサンプルでは、HTMLとCSSを同じファイル内で確認できるため、floatやclearの動きを理解しやすくなります。
回り込みを使うときに意識したいこと
回り込みを使うと、画像と文章を自然に組み合わせた読みやすいページを作れます。画像を左に置くならfloat: left;、右に置くならfloat: right;を使います。そして、画像と文章の間にはmarginで適切な余白を作ります。
floatを使ったあとは、次の要素が意図せず回り込まないように、clearで流れを戻すことが大切です。特に、新しい見出しや別のセクションを表示する場合は、clear: both;を指定しておくとレイアウトが安定します。
複数のボックスを横に並べることもできますが、その場合はwidth、padding、border、marginの合計に注意します。横幅の合計が大きくなりすぎると、ボックスが横に並ばず下に落ちることがあります。
floatはシンプルな指定ですが、文章の流れや後続要素に影響するため、仕組みを理解して使うことが大切です。画像の回り込み、カードの横並び、clearによる解除を順番に練習すると、CSSレイアウトの基礎がしっかり身につきます。