一つ前の章ではpositionプロパティによるボックス配置について学習しました。
今回は画像の配置方法について見ていきましょう。
Lesson3-1：ボックス配置の基礎を理解しよう
Lesson3-2：ボックスサイズを変更しよう
Lesson3-3：ボックスを自在に配置しよう
Lesson3-4：画像を自在に配置しよう ◁今回はココ
Lesson3-5：画像のスタイルを変更しよう
Lesson3-6：背景画像を設定しよう
Lesson3-7：リンクボタンを設置しよう
Lesson3-8：リストとテーブルのスタイルを変更しよう
Lesson3-9：CSS変数を理解しよう
Webページをデザインする際、テキストだけでなく画像を効果的に配置することは非常に重要です。
画像が適切に配置されていないと見た目が整わず、ユーザーにとって読みづらいページになってしまうことがあります。
今回のレッスンでは、画像を美しく配置するための基本的な方法として「vertical-alignプロパティ」と「floatプロパティ」について学びます。
これらのプロパティを使いこなすことでテキストと画像のバランスを整えたり、複数の画像を自由に並べたりすることができるようになります。
初心者の方でも理解しやすいように実際のコード例を交えながら丁寧に解説していきますので、安心して進めていきましょう！
<<前のページ
HTML/CSSの記事一覧
次のページ>>
vertical-alignプロパティで画像の位置を調整しよう
vertical-alignプロパティはインライン要素やインラインブロック要素、さらには画像などを垂直方向に揃えるために使用するCSSプロパティです。
このプロパティを使用することで、テキストと画像が並んでいる際に、画像を上揃え、中央揃え、または下揃えすることができます。
ただしvertical-alignはブロック要素（例：<div>）には適用されず、主にテキストやインライン要素に対して使われる点に注意が必要です。
vertical-alignの主な値と動作の違い
baseline（デフォルト）:
テキストのベースライン（文字の下の線）に画像の下端を揃えます。これがvertical-alignの初期値です。top（上揃え）:
要素の上端を、行ボックスの上端に揃えます。テキストよりも画像が上に配置されます。middle（中央揃え）:
画像の中央部分とテキストの中央部分が揃うように配置されます。テキストと画像をバランスよく並べたい場合に便利です。bottom（下揃え）:
要素の下端を、行ボックスの下端に揃えます。テキストと画像が同じ下のラインに揃います。
上記のように表示するには、例えば以下のようなコードが考えられます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>vertical-alignの例</title>
<style>
.baseline { vertical-align: baseline; }
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
img {
width: 50px; /* 画像サイズを統一 */
height: 50px;
border: 1px solid #000; /* 画像の枠を付けて見やすくする */
}
</style>
</head>
<body>
<p>【baseline】<img src="example.jpg" alt="例" class="baseline"> テキストと揃えます。</p>
<p>【top】<img src="example.jpg" alt="例" class="top"> テキストと揃えます。</p>
<p>【middle】<img src="example.jpg" alt="例" class="middle"> テキストと揃えます。</p>
<p>【bottom】<img src="example.jpg" alt="例" class="bottom"> テキストと揃えます。</p>
</body>
</html>vertical-alignの正しい使い方と注意点
vertical-alignはインライン要素やインラインブロック要素に対して適用するのが基本です。- ブロック要素には効果がないため、中央揃えなどをしたい場合は
flexboxやgridの使用を検討する必要があります（これらは後のレッスンで学びます）。 - 画像とテキストの微妙なズレを調整する際に非常に便利なプロパティです。
floatプロパティで画像をテキストの横に配置する
floatプロパティは、HTML要素を左右どちらかに寄せて配置し、その周りにテキストや他の要素を回り込ませるためのCSSプロパティです。
本来は印刷物のレイアウトのように、画像の横にテキストを回り込ませるデザインを実現するために使用されてきました。
たとえば新聞の記事で画像が左に配置され、右側に文章が回り込んでいるようなレイアウトは、floatを使うことで簡単に再現できます。
floatの主な値とレイアウトへの影響
left（左寄せ）:
要素を左側に寄せ、その右側に他のコンテンツを回り込ませます。right（右寄せ）:
要素を右側に寄せ、その左側に他のコンテンツを回り込ませます。none（デフォルト）:
要素は浮動せず、通常の文書の流れに従います。
上記のように表示するには、例えば以下のようなコードが考えられます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatの例（左寄せ）</title>
<style>
.float-left {
float: left; /* 画像を左寄せ */
margin: 10px; /* テキストとの間に余白を追加 */
width: 150px;
height: auto;
border: 2px solid #000;
}
</style>
</head>
<body>
<img src="example.jpg" alt="左寄せの画像" class="float-left">
<p>
この画像は左に寄せられており、テキストがその右側に回り込んでいます。
`float: left;`を指定することで、このようなレイアウトが簡単に実現できます。
余白を追加するために`margin`プロパティを使用しています。
</p>
</body>
</html>float: left;により、画像が左側に配置されます。margin: 10px;で画像とテキストの間に余白を設け、見やすくしています。borderを付けることで、画像の位置が視覚的にわかりやすくなります。
floatをふたつ使って、以下のようにブラウザ表示されるコードを書いてみましょう。
floatの落とし穴！クリア（clear）の重要性
floatプロパティを使うと、画像やテキストを左右に寄せて配置することができます。
しかしそのままでは思わぬレイアウトの崩れが起こることがあるため、少しだけ追加の工夫が必要です。
floatを使うと起こるレイアウト崩れの原因
floatを使うと要素が文字どおり「浮いた」状態になります。
この「浮いた要素」を含んでいる親のボックス（コンテナ）は、中に要素が入っていないと勘違いしてしまい、高さが0になってしまうことがあります。
これは親が中身を「認識していない」状態です。イメージとしては、風船が箱の外に浮いていて箱自体は空っぽに見えるような感じです。
以下のコードをブラウザに表示してみて下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatの問題例</title>
<style>
.container {
border: 2px solid red; /* 親要素の枠線 */
}
.float-box {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="float-box">浮いたボックス</div>
</div>
</body>
</html>float: left;を指定したことで、青いボックスは左に寄せられています。- しかし、親の赤い枠線（
.container）が青いボックスの高さに合わせて広がっていません！
このままでは親要素の高さが0になってしまい、レイアウトが崩れる原因になります。
この問題を解決するには、「回り込みの解除（クリア）」を行います。これによって、親要素が正しく高さを認識できるようになります。
解決策①：clearfixで親要素の高さを確保する
clearfixクラスを親要素に追加することで親要素が中の要素の高さを正しく認識し、赤い枠線が広がります。
<div class="container clearfix"> <div class="float-box">浮いたボックス</div> </div>
.clearfix::after {
content: ""; /* 空のコンテンツを作る */
display: block; /* ブロック要素として表示 */
clear: both; /* 左右の回り込みを解除 */
}解決策②：overflow: hidden; で自動調整する
もう一つの方法は、親要素にoverflow: hidden;を指定することです。
.container {
border: 2px solid red;
overflow: hidden; /* 中の要素が浮いていても高さを認識する */
}この方法でも、親要素が正しい高さを維持します。
clearfixとoverflow、どちらを使うべき？
- 複数の浮動要素がある場合や、しっかりとレイアウトを管理したい場合は、
clearfixがオススメです。 - シンプルな場面や、軽い対応で済ませたい場合は、
overflow: hidden;でOKです。
まとめ｜float・vertical-align・クリアのポイント
今回のレッスンでは、Webページ上で画像を美しく配置するための基本的な方法として、以下の2つの重要なプロパティを学びました。
vertical-alignプロパティ- 主にインライン要素やインラインブロック要素に対して使用し、画像とテキストを垂直方向に揃えることができます。
baseline（デフォルト）、top（上揃え）、middle（中央揃え）、bottom（下揃え）など、さまざまな配置方法を学びました。
floatプロパティ- 画像やテキストを左右に寄せて配置するためのプロパティで、テキストの回り込みを実現できます。
float: left;やfloat: right;で要素を浮かせて配置し、回り込みの解除にはclearプロパティやclearfixテクニック、overflow: hidden;などを使う方法を学びました。
画像の配置はただ表示するだけでなく、見た目のバランスや可読性に大きく影響します。
今回学んだプロパティを使いこなすことで、テキストと画像を自然に並べたり、複数の画像を思い通りにレイアウトすることができるようになります。
ここまで学習、お疲れさまでした！
画像の配置はWebデザインの基礎となる重要なスキルです。今回学んだ知識をもとに、ぜひ自分だけのレイアウトを実際に作ってみてください。
「実際に手を動かすことで、理解はさらに深まります！」
次のレッスンでも新しいスキルを一緒に身につけていきましょう！
FAQ｜CSSで画像を配置する方法に関するよくある質問
- Q1. vertical-align: middle; を指定したのに画像が中央に配置されません。どうすればいいですか？
-
vertical-align: middle;は インライン要素やインラインブロック要素 に対してのみ適用されるため、ブロック要素の画像には効果がありません。もし 画像をボックス内で中央揃え したい場合は、
display: flex;を使う方法が有効です。より詳細な解説は Lesson4（フレックスボックス編） をご覧ください。
- Q2. floatプロパティを使ったら、親ボックスの高さがなくなってしまいました。なぜですか？
-
floatを使うと、その要素は 通常のボックスの流れから外れる ため、親要素の高さを持たなくなることがあります。この問題を解決するには、
clearfixを使うか、親要素にoverflow: hidden;を指定する方法があります。どちらを選ぶべきかは、記事内の 「クリア（clear）の重要性」 で詳しく解説していますので参考にしてください。
- Q3. floatを使わずに画像をテキストの横に配置するにはどうすればいいですか？
-
近年では
floatよりも flexboxやgridを使ったレイアウト が推奨されています。例えば、
display: flex;を親要素に指定すると、画像とテキストを簡単に横並びにできます。この内容は、次の Lesson4（フレックスボックス編） で詳しく学べますので、あわせてチェックしてみてください。
- Q4. clearfixとoverflow: hidden; のどちらを使うべきですか？
-
どちらの方法も
floatによるレイアウト崩れを防ぐ手段ですが、それぞれ特徴があります。- clearfix：意図的に
floatを解除し、親要素の高さを持たせる方法。 - overflow: hidden;：親要素の
overflowを制限することで、floatの影響を抑える方法。
clearfixはどんなレイアウトでも安全に使えますが、overflow: hidden;は 要素が切れてしまう可能性 があるため、注意が必要です。 - clearfix：意図的に
- Q5. vertical-alignとfloatの違いがよく分かりません。どちらを使えばいいですか？
-
vertical-alignは インライン要素やインラインブロック要素の垂直方向の位置調整 に使うプロパティです。一方で
floatは ブロック要素を横に並べたり、テキストを回り込ませる ためのプロパティです。
例えば…- テキストの行内でアイコンを適切に配置したい →
vertical-alignを使う - 画像をテキストの横に配置したい →
floatもしくはflexboxを使う
このように、用途に応じて使い分けることが大切です。
- テキストの行内でアイコンを適切に配置したい →
練習問題3-4：画像の配置を修正しよう
次のHTMLコードは、画像とテキストを美しく配置するためのものです。
しかしこのコードにはいくつかの問題点があり、画像が正しく配置されず、親要素のレイアウトも崩れてしまっています。
どの部分をどのように修正すれば、画像とテキストがバランス良く表示されるか考え、ファイル名をtraining3-4.htmlとしてブラウザ表示しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像の配置例（修正が必要）</title>
<style>
.container {
border: 2px solid red; /* 親要素の枠線 */
}
.image {
float: left;
width: 150px;
height: auto;
}
.text {
vertical-align: middle; /* テキストを中央揃えしようとしています */
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="例の画像" class="image">
<p class="text">このテキストは画像の横に表示されるはずです。</p>
</div>
</body>
</html>- ヒント
-
- 親要素の高さが消えてしまう原因は何でしょうか？
vertical-align: middle;が正しく機能していない理由は？- 画像とテキストをバランス良く並べるためには、どのプロパティを追加・修正すれば良いでしょうか？
初めてのWebサイトを作ろう3-4
このサイトの Lesson1-1（HTML学習の入り口） か Lesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
Lesson3-4のまとめノートと練習問題を追加しよう
このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
１．練習問題の解答を保存
練習問題3-4で作成したファイルを学習フォルダの中に保存しましょう。
- training3-4.html ⇒ Lesson3フォルダに保存
トップページからリンクで飛べるようになりますので確認しましょう。
２．まとめノートを作成・保存
下記のHTMLコードは、このLesson3-4で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite3-4.html」という名前で保存し、「lesson3（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson3-4</title> <link rel="stylesheet" href="style/styles-lesson3.css"> </head> <body> <h1>Lesson3-4：画像を自在に配置しよう</h1> <div class="container"> <p> Webページのデザインにおいて、画像を適切に配置することは、視覚的なバランスを整え、 ユーザーにとって見やすいページを作るために重要です。本記事では、 <code>vertical-align</code> プロパティと <code>float</code> プロパティを使用して、 画像とテキストを美しく配置する方法を学びます。 </p> <h2>このレッスンで学習した内容</h2> <h3><code>vertical-align</code> プロパティ（画像の垂直方向の位置調整）</h3> <ul> <li><strong>baseline（デフォルト）</strong>：テキストのベースラインに画像を揃える</li> <li><strong>top（上揃え）</strong>：画像の上端をテキストの上端に揃える</li> <li><strong>middle（中央揃え）</strong>：画像の中央とテキストの中央を揃える</li> <li><strong>bottom（下揃え）</strong>：画像の下端をテキストの下端に揃える</li> </ul> <p>※ <code>vertical-align</code> は <strong>インライン要素やインラインブロック要素</strong> にのみ適用可能。</p> <h3><code>float</code> プロパティ（画像をテキストの横に配置）</h3> <ul> <li><code>float: left;</code>：画像を左寄せし、右側にテキストを回り込ませる</li> <li><code>float: right;</code>：画像を右寄せし、左側にテキストを回り込ませる</li> <li><code>none</code>（デフォルト）：浮動せず、通常の文書の流れに従う</li> </ul> <h3>float の回り込み解除（clear の重要性）</h3> <ul> <li><code>clear: both;</code> を使う</li> <li><strong>clearfix テクニック</strong>（<code>::after</code> を使う）</li> <li><code>overflow: hidden;</code> を親要素に適用する</li> </ul> <h2>トピック・豆知識</h2> <h3><code>vertical-align</code> と flexbox の違い</h3> <p> <code>vertical-align</code> は <strong>インライン要素</strong> に対してのみ有効。<br> ブロック要素の中央揃えには、<code>flexbox</code> を使用するのが一般的。 </p> <h3><code>float</code> の代替として flexbox</h3> <p> <code>float</code> はレイアウトを崩しやすいため、最近のデザインでは <code>flexbox</code> や <code>grid</code> が推奨される。<br> ただし、記事内の画像配置など <strong>シンプルな回り込み</strong> には <code>float</code> も便利。 </p> <h2>まとめ</h2> <p> 画像の配置を適切に設定することで、Webページの視認性とデザイン性を向上させることができます。 </p> <ul> <li><code>vertical-align</code> を使って、<strong>テキストと画像の位置を調整</strong> できる。</li> <li><code>float</code> を使って、<strong>画像を左右に配置し、テキストを回り込ませる</strong> ことができる。</li> <li><code>clear</code> を適用することで、<strong>レイアウト崩れを防ぐ</strong> ことができる。</li> </ul> <p> 画像の配置を意識することで、より読みやすく美しいページを作れるようになります。<br> これらのテクニックを活用し、実際にコードを書いて試してみましょう！ </p> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </div> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>これでLesson3-4の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
<<前のページ
HTML/CSSの記事一覧
次のページ>>
この記事への質問・コメント
この記事を作成するにあたりAIの力を借りています。
問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。