Bootstrapグリッドで作る画像ギャラリー完全入門！比率維持・トリミング・間隔の最適解

グリッド×画像ギャラリー：比率維持・トリミング・間隔の最適解

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapで画像をきれいに並べたいんですが、サイズがバラバラになってしまいます」

先生

「それはグリッドシステムと画像の扱い方を一緒に考える必要がありますね」

生徒

「グリッドって12分割のやつですよね？それと画像がどう関係するんですか？」

先生

「では、画像ギャラリーを例にしながら、比率を保つ方法や間隔の考え方を説明していきましょう」

1. Bootstrapのグリッドシステムとは何か

Bootstrapのグリッドシステムとは、画面を横に十二個のマスに分けてレイアウトを考える仕組みです。難しそうに聞こえますが、お弁当箱を十二個の小さな区切りに分けて、おかずを並べるイメージをすると分かりやすいです。画像ギャラリーでは、このマスを使って写真を横に並べたり、画面サイズごとに並び方を変えたりします。

Bootstrapではrowが横一列、colがその中の区切りです。col-4なら十二分割のうち四つ分を使う、という意味になります。

2. 画像ギャラリーでグリッドを使う基本構造

画像ギャラリーを作るときは、まずグリッドの骨組みを作ります。初心者の方は、箱を作ってから中に画像を入れる、と覚えると安心です。rowの中に複数のcolを置き、その中にimgタグを入れます。


<div class="container">
    <div class="row">
        <div class="col-4">
            <img src="/img/sample150-100.jpg" class="img-fluid">
        </div>
        <div class="col-4">
            <img src="/img/sample150-100.jpg" class="img-fluid">
        </div>
        <div class="col-4">
            <img src="/img/sample150-100.jpg" class="img-fluid">
        </div>
    </div>
</div>

ブラウザ表示

img-fluidは画像を親要素の幅に合わせて伸び縮みさせるためのBootstrapのクラスです。これを付けないと、画像がはみ出すことがあります。

3. 画像の比率を維持する考え方

画像の比率とは、横と縦の長さの関係のことです。例えば横百五十、縦百の画像は横長です。比率を無視して引き伸ばすと、写真がつぶれて見えてしまいます。これを防ぐために、画像はできるだけ元の形を保つ必要があります。

Bootstrapでは、画像そのものを引き伸ばすのではなく、外側の箱に合わせて調整するのが基本です。


<style>
    .gallery img {
        width: 100%;
        height: auto;
    }
</style>

<div class="row gallery">
    <div class="col-6">
        <img src="/img/sample150-100.jpg">
    </div>
    <div class="col-6">
        <img src="/img/sample150-100.jpg">
    </div>
</div>

ブラウザ表示

4. トリミングして同じ大きさに見せる方法

写真のサイズや形がバラバラな場合、比率を保つだけでは見た目が揃いません。そのときに使うのがトリミングの考え方です。トリミングとは、写真の一部を切り取って表示することです。

CSSのobject-fitという仕組みを使うと、箱に合わせて画像を切り抜いたように表示できます。


<style>
    .thumb {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
</style>

<div class="row">
    <div class="col-4">
        <img src="/img/sample150-100.jpg" class="thumb">
    </div>
    <div class="col-4">
        <img src="/img/sample120-120.jpg" class="thumb">
    </div>
    <div class="col-4">
        <img src="/img/sample150-100.jpg" class="thumb">
    </div>
</div>

ブラウザ表示

5. 画像同士の間隔をきれいに整える

画像ギャラリーで意外と大切なのが、画像と画像のすき間です。ぎゅうぎゅうに詰まっていると見づらく、空きすぎても間延びしてしまいます。Bootstrapでは、余白を簡単に調整できるクラスが用意されています。

例えば、mbは下の余白、gは列同士のすき間を表します。


<div class="row g-3">
    <div class="col-6 col-md-4">
        <img src="/img/sample150-100.jpg" class="img-fluid">
    </div>
    <div class="col-6 col-md-4">
        <img src="/img/sample150-100.jpg" class="img-fluid">
    </div>
    <div class="col-6 col-md-4">
        <img src="/img/sample150-100.jpg" class="img-fluid">
    </div>
</div>

ブラウザ表示

6. ブレークポイントで画面サイズに対応する

ブレークポイントとは、画面の大きさごとにレイアウトを切り替える境目のことです。スマートフォンでは二列、パソコンでは三列、といった切り替えが簡単にできます。

col-6 col-md-4のように書くと、小さい画面では二つ並び、中くらい以上の画面では三つ並びになります。

7. 初心者がつまずきやすい注意点

よくある失敗として、rowの外にcolを置いてしまうことがあります。これは箱の外におかずを置くようなもので、レイアウトが崩れます。また、画像の大きさを直接数字で指定しすぎると、画面サイズが変わったときにうまく表示されません。

まずはグリッド、次に画像、最後に見た目の調整、という順番を意識すると失敗しにくくなります。

8. 画像ギャラリーをきれいに見せる考え方の整理

Bootstrapのグリッドシステムを使った画像ギャラリーでは、十二分割の考え方、比率を保つ方法、トリミング、余白、ブレークポイントを組み合わせて使います。一つ一つは難しくありませんが、まとめて考えることで、ぐっと見やすいデザインになります。

最初は完璧を目指さず、並べて表示できたら成功、という気持ちで進めるのが大切です。

まとめ

ここまで、Bootstrapのグリッドシステムを使った画像ギャラリーの作り方について、基礎から丁寧に見てきました。画像ギャラリーは一見すると単純に画像を並べているだけのように見えますが、実際にはレイアウト、比率、トリミング、余白、画面サイズ対応といった複数の考え方が重なっています。これらを意識せずに作ると、画像が崩れたり、不ぞろいに見えたり、スマートフォンで見たときに使いにくくなったりします。

Bootstrapのグリッドは、画面を十二分割して考えるという分かりやすいルールがあり、画像ギャラリーとの相性がとても良い仕組みです。rowとcolを正しく使うことで、画像を横にきれいに並べることができ、画面サイズが変わっても安定した表示を保てます。特に、col-6やcol-md-4のようにブレークポイントを指定することで、スマートフォン、タブレット、パソコンといった異なる画面幅に自然に対応できる点は、大きなメリットです。

また、画像そのものの扱い方も重要でした。img-fluidを使って親要素に合わせて画像を伸縮させることで、レイアウトから画像がはみ出す問題を防げます。さらに、widthやheightを無理に指定するのではなく、比率を保つ考え方を理解することで、写真がつぶれたり引き伸ばされたりする失敗を減らせます。

サイズや形が異なる画像を同じ大きさに見せたい場合には、object-fitを使ったトリミングがとても役に立ちます。これは、画像を箱に合わせて切り取るような表示方法で、ギャラリー全体をすっきりと整えたいときに効果的です。特に、複数の写真を一覧で見せる場合には、見た目の統一感が大きく向上します。

さらに、画像同士の間隔も見やすさに直結します。Bootstrapのgクラスや余白ユーティリティを使えば、細かい数値を覚えなくても、適切なすき間を簡単に作れます。余白が整うことで、画像ギャラリー全体が読みやすく、落ち着いた印象になります。

初心者の方がつまずきやすいポイントとして、rowとcolの関係を間違えることや、画像サイズを固定しすぎてしまうことがありました。まずはグリッドの箱を正しく作り、その中に画像を配置するという順番を守ることが、安定したレイアウトへの近道です。

最後に大切なのは、すべてを一度に完璧にやろうとしないことです。最初は画像が並んで表示されるだけでも十分な成果です。そこから少しずつ、比率、トリミング、余白、ブレークポイントを調整していくことで、自然ときれいな画像ギャラリーに近づいていきます。Bootstrapのグリッドと画像の扱い方を理解すれば、実務や個人制作でも安心して使えるようになります。

まとめで使ったサンプル構造


<style>
    .summary-thumb {
        width: 100%;
        height: 160px;
        object-fit: cover;
    }
</style>

<div class="container">
    <div class="row g-3">
        <div class="col-6 col-md-4">
            <img src="/img/sample150-100.jpg" class="summary-thumb">
        </div>
        <div class="col-6 col-md-4">
            <img src="/img/sample120-120.jpg" class="summary-thumb">
        </div>
        <div class="col-6 col-md-4">
            <img src="/img/sample150-100.jpg" class="summary-thumb">
        </div>
    </div>
</div>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「Bootstrapの画像ギャラリーって、ただ画像を並べるだけじゃないんですね」

先生

「そうですね。グリッド、比率、余白を意識すると、一気に見た目が良くなります」

生徒

「特にobject-fitでトリミングできるのが便利だと感じました」

先生

「サイズが違う画像をまとめるときには、とても役立ちますよ」

生徒

「rowとcolの順番を守るのも大事なんですね」