【CSS】レッスン3-04:画像を自在に配置しよう

一つ前の章では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>)には適用されず、主にテキストやインライン要素に対して使われる点に注意が必要です。

主な値の説明

  • 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インライン要素やインラインブロック要素に対して適用するのが基本です。
  • ブロック要素には効果がないため、中央揃えなどをしたい場合はflexboxgridの使用を検討する必要があります(これらは後のレッスンで学びます)。
  • 画像とテキストの微妙なズレを調整する際に非常に便利なプロパティです。

上記のコードを、画像のパスを適切に指定した上でブラウザ表示しましょう。

その後、左右の文章が2行以上の長さになるように修正してみて下さい。どのように表示されるでしょうか?

floatプロパティの解説

floatプロパティは、HTML要素を左右どちらかに寄せて配置し、その周りにテキストや他の要素を回り込ませるためのCSSプロパティです。

本来は印刷物のレイアウトのように、画像の横にテキストを回り込ませるデザインを実現するために使用されてきました。

たとえば新聞の記事で画像が左に配置され、右側に文章が回り込んでいるようなレイアウトは、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プロパティを使うと、画像やテキストを左右に寄せて配置することができます。

しかしそのままでは思わぬレイアウトの崩れが起こることがあるため、少しだけ追加の工夫が必要です。

なぜ問題が起こるの?

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になってしまい、レイアウトが崩れる原因になります。

この問題を解決するには、「回り込みの解除(クリア)」を行います。これによって、親要素が正しく高さを認識できるようになります。

解決方法1: clearfixというテクニックを使う

clearfixクラスを親要素に追加することで親要素が中の要素の高さを正しく認識し、赤い枠線が広がります。

.clearfix::after {
  content: "";       /* 空のコンテンツを作る */
  display: block;    /* ブロック要素として表示 */
  clear: both;       /* 左右の回り込みを解除 */
}
<div class="container clearfix">
  <div class="float-box">浮いたボックス</div>
</div>

解決方法2: overflow: hidden;を使う

もう一つの方法は、親要素にoverflow: hidden;を指定することです。

.container {
  border: 2px solid red;
  overflow: hidden;  /* 中の要素が浮いていても高さを認識する */
}

この方法でも、親要素が正しい高さを維持します。

どちらの方法を選べばいいの?

  • 複数の浮動要素がある場合や、しっかりとレイアウトを管理したい場合は、clearfixがオススメです。
  • シンプルな場面や、軽い対応で済ませたい場合は、overflow: hidden;でOKです。

先ほどのレイアウトが崩れたコードを、正しく表示されるように修正して下さい。

2種類の方法を両方試してみましょう。

まとめ

今回のレッスンでは、Webページ上で画像を美しく配置するための基本的な方法として、以下の2つの重要なプロパティを学びました。

  1. vertical-alignプロパティ
    • 主にインライン要素やインラインブロック要素に対して使用し、画像とテキストを垂直方向に揃えることができます。
    • baseline(デフォルト)、top(上揃え)、middle(中央揃え)、bottom(下揃え)など、さまざまな配置方法を学びました。
  2. floatプロパティ
    • 画像やテキストを左右に寄せて配置するためのプロパティで、テキストの回り込みを実現できます。
    • float: left;float: right; で要素を浮かせて配置し、回り込みの解除には clear プロパティや clearfix テクニック、overflow: hidden; などを使う方法を学びました。

画像の配置はただ表示するだけでなく、見た目のバランスや可読性に大きく影響します。

今回学んだプロパティを使いこなすことで、テキストと画像を自然に並べたり、複数の画像を思い通りにレイアウトすることができるようになります。

ここまで学習、お疲れさまでした!

画像の配置はWebデザインの基礎となる重要なスキルです。今回学んだ知識をもとに、ぜひ自分だけのレイアウトを実際に作ってみてください。

「実際に手を動かすことで、理解はさらに深まります!」

次のレッスンでも新しいスキルを一緒に身につけていきましょう!

練習問題3-4:画像の配置を修正しよう

次のHTMLとCSSコードは、画像とテキストを美しく配置するためのものです。

しかしこのコードにはいくつかの問題点があり、画像が正しく配置されず、親要素のレイアウトも崩れてしまっています。

以下のコードを読んで、どの部分をどのように修正すれば、画像とテキストがバランス良く表示されるかを答えてください。

<!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学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

現在準備中です。暫くお待ちください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る