画像ギャラリー付きカードを作る方法
画像ギャラリー付きカードを作る方法を紹介します。このサンプルでは、HTMLとCSSを使用して、ひとつのカード内に複数の画像をグリッド形式で並べ、その下にタイトルと説明文を表示します。複数の写真やイメージをひとまとまりにして掲載できるため、1枚の画像だけでは伝えにくい内容をコンパクトなカードとして整理できます。
商品の複数写真、店舗や施設の紹介、制作実績、旅行先の写真、イベントの様子など、関連する画像をまとめて見せたい場面に利用できます。ギャラリー部分にはCSS Gridを使用し、複数の画像を整列させます。それぞれの画像には同じ縦横比を指定し、object-fit:cover;で表示領域に合わせるため、元画像のサイズが異なる場合でも統一感のあるカードを作れます。
HTMLでは表示する画像、代替テキスト、カードタイトル、説明文を変更できます。CSSではカードの最大横幅、画像の列数、画像同士の間隔、角丸、内側余白、文字サイズなどを調整できます。JavaScriptを使用しないシンプルな構成で、スマートフォンでは画像を1列に切り替えるため、スマートフォン・タブレット・PCで利用しやすい画像ギャラリー付きカードとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
複数の画像をギャラリー形式で並べ、その下にタイトルと説明文を表示するカードのサンプルです。
このデモでは、6枚の画像をグリッド形式で配置した画像ギャラリー付きカードを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>画像ギャラリー付きカード</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- カード全体の表示エリア -->
<div class="image-gallery-card_demo">
<!-- 画像ギャラリー付きカード -->
<article class="image-gallery-card_card">
<!-- 画像ギャラリー -->
<div class="image-gallery-card_gallery">
<!-- 画像1 -->
<img
class="image-gallery-card_image"
src="images/image1.png"
alt="ギャラリー画像1">
<!-- 画像2 -->
<img
class="image-gallery-card_image"
src="images/image2.png"
alt="ギャラリー画像2">
<!-- 画像3 -->
<img
class="image-gallery-card_image"
src="images/image3.png"
alt="ギャラリー画像3">
<!-- 画像4 -->
<img
class="image-gallery-card_image"
src="images/image4.png"
alt="ギャラリー画像4">
<!-- 画像5 -->
<img
class="image-gallery-card_image"
src="images/image5.png"
alt="ギャラリー画像5">
<!-- 画像6 -->
<img
class="image-gallery-card_image"
src="images/image6.png"
alt="ギャラリー画像6">
</div>
<!-- カードのテキスト部分 -->
<div class="image-gallery-card_body">
<!-- カードタイトル -->
<div class="image-gallery-card_title">
画像ギャラリー付きカード
</div>
<!-- 説明文 -->
<p class="image-gallery-card_text">
複数の画像をギャラリー形式で並べ、その下にタイトルと説明文を表示するカードのサンプルです。
</p>
</div>
</article>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルと、ギャラリーへ表示する画像を保存するimagesフォルダで構成されています。HTMLでは6枚の画像を並べるギャラリー部分と、その下に表示するカードタイトル・説明文を記述します。CSSではCSS Gridを使用して画像を3列に並べ、カード全体の横幅、画像の比率、余白、枠線、角丸、文字サイズなどを設定します。JavaScriptは使用しません。
sample/
├── index.html
├── style.css
└── images/
├── image1.png
├── image2.png
├── image3.png
├── image4.png
├── image5.png
└── image6.png
各ファイルの役割
index.htmlは画像ギャラリー付きカード全体を構成するファイルです。images/image1.pngからimages/image6.pngまでの6枚をギャラリーとして表示し、その下へカードタイトルと説明文を配置しています。画像を変更する場合は、各img要素のsrc属性とalt属性を編集します。
style.cssはカードと画像ギャラリーのレイアウト・デザインを設定するファイルです。カードの最大横幅、画像の列数、画像同士の間隔、画像の表示比率、角丸、テキスト部分の余白、タイトルの文字サイズ、説明文の行間などを変更できます。画面幅640px以下では画像を1列表示へ切り替えるレスポンシブ設定も含まれています。
imagesフォルダには、ギャラリーで表示する6枚の画像を保存します。このサンプルではimage1.pngからimage6.pngまでを使用します。画像ファイル自体は利用者が用意してください。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを保存し、同じ階層へimagesフォルダを作成します。imagesフォルダの中へ、表示したい画像をimage1.png、image2.png、image3.png、image4.png、image5.png、image6.pngというファイル名で配置してください。
ファイルと画像を配置したあと、sample/index.htmlをブラウザで開くと、6枚の画像が3列のギャラリーとして並び、その下にカードタイトルと説明文が表示されます。
カスタマイズできる内容
index.htmlでは、表示する画像、画像の代替テキスト、カードタイトル、説明文を変更できます。画像の枚数を変更する場合は、image-gallery-card_gallery内のimg要素を追加または削除します。別の画像ファイルを使用する場合は、imagesフォルダへ画像を配置し、対応するimg要素のsrc属性を実際のファイル名へ変更してください。
style.cssでは、カード全体の最大横幅、画像の列数、画像同士の間隔、ギャラリー周囲の余白、画像の表示比率、画像の角丸、テキスト部分の内側余白、タイトルの文字サイズ、説明文の文字色や行間などを変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の上下・左右余白です。40pxを変更すると上下、20pxを変更すると左右の画面端との間隔が変わります。
max-width:700px;
カード全体の最大横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。
border-radius:12px;
カード全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
grid-template-columns:repeat(3,1fr);
ギャラリーの列数です。このサンプルでは3列表示です。3を2へ変更すると2列、4へ変更すると4列で表示できます。
gap:8px;
画像同士の間隔です。値を大きくすると画像の間隔が広がり、小さくすると狭くなります。
padding:8px;
画像ギャラリー周囲の内側余白です。値を大きくすると画像とカード端の間隔が広がります。
aspect-ratio:4/3;
各画像の表示比率です。このサンプルでは横4・縦3の比率で統一しています。
border-radius:8px;
ギャラリー画像の角丸です。値を大きくすると画像の丸みが強くなり、0にすると四角になります。
padding:24px;
カードのテキスト部分の内側余白です。値を大きくすると文章とカード端の間隔が広がります。
margin:0 0 10px;
カードタイトルの下側余白です。10pxを大きくするとタイトルと説明文の間隔が広がります。
font-size:22px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きく表示され、小さくすると控えめになります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
padding:20px;
画面幅640px以下で使用するテキスト部分の内側余白です。値を変更するとスマートフォン表示時の文章周囲の間隔が変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでカードにwidth:100%とmax-width:700pxを指定しているため、利用できる画面幅に合わせてカード全体が縮小されます。通常はgrid-template-columns:repeat(3,1fr);で画像を3列に並べ、画面幅640px以下ではgrid-template-columns:1fr;へ切り替えて1列表示にします。また、ページ全体の余白を24px 12px、テキスト部分の余白を20pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント