CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで画像を横並びに配置する方法をわかりやすく解説

Webページを作成していると、複数の画像をギャラリーのように横一列に並べたい場面がありますよね。CSSのfloatプロパティを使えば、特別なライブラリなしでも簡単に実現できます。

本記事では、4枚の画像を横並びに配置する基本的なコード例を紹介し、その仕組みもあわせて解説します。

サンプルコード：画像を横並びに配置する

以下は、CSSのfloatレイアウトを使って4枚の画像を横並びに表示するコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}
.imageColumn {
    float: left;
    width: 25%;
    padding: 10px;
}
h1 {
    text-align: center;
}
</style>
</head>
<body>
<h1>Images Aligned Side by Side example</h1>
<div class="alignRow">
  <div class="imageColumn">
    <img src="https://i.picsum.photos/id/811/400/400.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="imageColumn">
    <img src="https://i.picsum.photos/id/871/400/400.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="imageColumn">
    <img src="https://i.picsum.photos/id/471/400/400.jpg" alt="Mountains" style="width:100%">
  </div>
  <div class="imageColumn">
    <img src="https://i.picsum.photos/id/271/400/400.jpg" alt="Snow" style="width:100%">
  </div>
</div>
</body>
</html>

コードのポイント解説

このコードで重要なのは、次の3つの設定です。

  • box-sizing: border-box … パディングを含めて要素の幅を計算するようにします。これがないと、padding分だけ幅が広がり、画像が一行に収まらなくなることがあります。
  • float: left と width: 25% … 各カラムを左に回り込ませ、幅を25%にすることで、4つの要素がちょうど一行に収まる仕組みです。
  • padding: 10px … 画像同士の間に余白を作り、見た目を整えています。

また、各画像には style="width:100%" を指定することで、親要素（imageColumn）の幅いっぱいに画像が拡大縮小され、レスポンシブな表示になります。

実行結果

上記のコードを実行すると、4枚の画像が画面幅に合わせて横一列にきれいに並んで表示されます。

補足：floatの解除について

floatを使ったレイアウトでは、後続の要素が回り込んでしまうことがあります。その場合は、親要素に overflow: hidden; を追加するか、clearfixと呼ばれるテクニックを使ってfloatを解除しましょう。

なお、近年ではより柔軟なレイアウトが可能なFlexbox（display: flex）を使う方法も主流です。.alignRow に display: flex; を指定すれば、floatを使わずに同じような横並びレイアウトを簡単に実現できます。目的に応じて使い分けるとよいでしょう。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSのborder-imageプロパティで境界線画像を作成する方法

    CSSで要素の境界線に画像を表示したい場合は、border-imageプロパティを使用します。通常の実線や点線ではなく、任意の画像を境界線として描画できるため、デザインの幅が大きく広がります。 border-imageプロパティの基本 border-imageプロパティは、主に次の3つの要素を組み合わせて指定します。 画像のURL … 境界線に使用する画像をurl()で指定します。 スライス値 … 画像をどのように分割して配置するかを、数値(px)またはパーセントで指定します。 繰り返し方法 … round(領域に収まるよう間隔を調整して繰り返し)やrepeat(そのまま繰り返し)などを指定