bootstrap card 画像サイズ

Bootstrap Card 画像サイズ完全ガイド：完璧なレイアウトをマスターする

Bootstrap Card 画像サイズ完全ガイド：完璧なレイアウトをマスターする

このガイドでは、Bootstrap 5 の Card コンポーネントを使用して、画像サイズを制御し、視覚的に優れたWebページレイアウトを作成する方法を学びます。

Bootstrap Card 画像のデフォルト動作

  • デフォルトでは、Bootstrap Card コンポーネントは画像サイズを自動調整しません。
  • 画像は元のサイズを保持し、カードの境界線を越えてしまう可能性があります。
  • CSSクラスまたはカスタムスタイルを使用して、カード内での画像の表示方法を制御する必要があります。

.card-img-top と .card-img-bottom クラスの使用

.card-img-top と .card-img-bottom クラスを使用すると、画像をカードの上部と下部にそれぞれ配置できます。これらのクラスは、画像の縦横比を維持しながら、カードの幅に合わせて画像を自動的に拡大縮小します。


<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    ...
  </div>
</div>

カスタムCSSクラスによる画像サイズの制御

  • 特定の画像サイズを設定するために、カスタムCSSクラスを作成できます。
  • width および height プロパティ、または max-width および max-height プロパティを使用して、画像のサイズを定義します。
  • object-fit プロパティを使用すると、コンテナ内での画像の拡大縮小とトリミングの方法を制御できます。

.custom-img-size {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

レスポンシブな画像サイズ調整

  • Bootstrap のグリッドシステムまたはメディアクエリを使用して、画面サイズに基づいて画像サイズを調整できます。
  • 最適な視覚効果を得るために、異なる画面サイズに対して異なるCSSクラスを定義します。

@media (min-width: 768px) {
  .card-img-top {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
}

サンプルコードとベストプラクティス

以下は、Bootstrap Card 画像のサイズを制御するための異なる方法を使用したサンプルコードです。

方法 コード例
.card-img-top / .card-img-bottom 

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  ...
</div>
カスタムCSSクラス 

<div class="card">
  <img src="..." class="custom-img-size" alt="...">
  ...
</div>
メディアクエリ 

@media (min-width: 768px) {
  .card-img-top {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
}

ベストプラクティス

  • 高品質の画像を使用する
  • 画像ファイルサイズを最適化する
  • 異なる画面サイズで画像をテストする
  • アクセシビリティのために適切なaltテキストを提供する

参考資料

よくある質問

画像がカードに収まりません。どうすればよいですか？

画像がカードの境界線を越えている場合は、object-fit プロパティを使用して、コンテナ内での画像の拡大縮小とトリミングの方法を制御できます。たとえば、object-fit: cover; を設定すると、画像の縦横比を維持しながら、コンテナ全体を覆うように画像が拡大縮小されます。

異なる画面サイズで異なる画像サイズを使用するにはどうすればよいですか？

Bootstrap のグリッドシステムまたはメディアクエリを使用して、画面サイズに基づいて画像サイズを調整できます。たとえば、デスクトップ画面では大きな画像を表示し、モバイル画面では小さな画像を表示することができます。

画像のファイルサイズを最適化するにはどうすればよいですか？

画像のファイルサイズを最適化するには、画像圧縮ツールを使用できます。オンラインで利用できる無料のツールは多数あります。また、画像を保存するときに、ファイルサイズと画質のバランスが取れた適切なファイル形式を選択することも重要です。

その他の参考記事:bootstrap card 横並び