Bootstrap サムネイル

Bootstrap 縮略図

この記事では、Bootstrap フレームワークを使用して画像の縮略図を作成する方法について説明します。

1. 縮略図とは

縮略図は、Webサイトやアプリケーションで画像ギャラリーや多数の画像を表示するために使用される、画像の小さなバージョンです。
縮略図を使用すると、ページの読み込み速度が向上し、ユーザーエクスペリエンスが向上します。

2. Bootstrap 縮略図クラス

Bootstrap の .thumbnail クラスを使用すると、画像の縮略図を簡単に作成できます。
.thumbnail クラスを、画像やタイトル、説明などの他のコンテンツを含む <a> 要素に適用します。

3. 基本的な縮略図

基本的な画像の縮略図を作成するコード例を以下に示します。


<a href="#" class="thumbnail">
  <img src="https://via.placeholder.com/300x200" alt="画像の代替テキスト">
</a>

このコードは、.thumbnail クラスが適用された <a> 要素を作成します。 <a> 要素内には、画像を表示するための <img> 要素がネストされています。画像のサイズをカスタマイズするには、<img> 要素に width 属性と height 属性を追加します。

4. カスタム縮略図

縮略図の外観とレイアウトをさらにカスタマイズするには、他の Bootstrap クラスを使用します。

.img-responsive クラスを使用すると、画像がレスポンシブになります。
.col-xs-6 などのグリッドシステムクラスを使用すると、縮略図のグリッドレイアウトを作成できます。


<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="https://via.placeholder.com/300x200" class="img-responsive" alt="画像の代替テキスト">
    </a>
  </div>
  </div>

5. タイトルと説明付きの縮略図

縮略図にタイトルと説明を追加する方法を次に示します。


<a href="#" class="thumbnail">
  <img src="https://via.placeholder.com/300x200" alt="画像の代替テキスト">
  <div class="caption">
    <h3>タイトル</h3>
    <p>説明</p>
  </div>
</a>

このコードは、<a> 要素内に <div class="caption"> 要素を追加します。 .caption 要素内には、タイトル（<h3>）と説明（<p>）を追加します。

6. 例とコード

さまざまなレイアウトとスタイルの縮略図の例を以下に示します。コードをコピーして貼り付けて、必要に応じて変更できます。

これらの例は、Bootstrap のグリッドシステムとカードコンポーネントを使用して作成されています。

基本的な縮略図

<img src="..." class="img-fluid" alt="画像の代替テキスト">

タイトルと説明付きの縮略図

<div class="card">
  <img src="..." class="card-img-top" alt="画像の代替テキスト">
  <div class="card-body">
    <h5 class="card-title">タイトル</h5>
    <p class="card-text">説明</p>
  </div>
</div>

グリッドレイアウトの縮略図

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="画像の代替テキスト">
      <div class="card-body">
        <h5 class="card-title">タイトル</h5>
        <p class="card-text">説明</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="画像の代替テキスト">
      <div class="card-body">
        <h5 class="card-title">タイトル</h5>
        <p class="card-text">説明</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="画像の代替テキスト">
      <div class="card-body">
        <h5 class="card-title">タイトル</h5>
        <p class="card-text">説明</p>
      </div>
    </div>
  </div>
</div>

これらの例を参考に、独自の縮略図を作成してみてください。必要に応じて、画像、タイトル、説明、レイアウトを変更できます。

まとめ

この記事では、Bootstrap フレームワークを使用してさまざまな種類の画像の縮略図を作成する方法を詳しく説明し、ユーザーが参照できるように豊富なコード例を提供しました。縮略図は、Webサイトやアプリケーションで画像を効果的に表示するための優れた方法です。

Bootstrap 縮略図に関するQ&A

Q1: Bootstrap 4 で縮略図を使用できますか？

A1: Bootstrap 4 では、.thumbnail クラスは廃止されました。代わりに、カードコンポーネントを使用することをお勧めします。カードコンポーネントは、縮略図と同様の機能を提供し、より柔軟でカスタマイズ可能です。詳細については、Bootstrap の公式ドキュメントを参照してください。

Q2: 縮略図のサイズを変更するにはどうすればよいですか？

A2: 縮略図のサイズを変更するには、.img-responsive クラスを削除し、<img> 要素に width 属性と height 属性を追加します。または、グリッドシステムクラスを使用して、縮略図を含む列の幅を調整することもできます。

Q3: 縮略図をレスポンシブにするにはどうすればよいですか？

A3: 縮略図をレスポンシブにするには、<img> 要素に .img-responsive クラスを追加します。これにより、画像が親コンテナの幅に合わせて縮小されます。