画像付きカードを作る方法
画像付きカードを作る方法を紹介します。このサンプルでは、HTMLとCSSを使用して、カードの上部に画像、その下にタイトルと説明文を配置したシンプルなカードUIを作成します。画像と文章をひとつのまとまりとして表示できるため、写真やイメージと一緒に情報を分かりやすく紹介したい場合に利用できます。
商品紹介、サービス案内、店舗や施設の紹介、制作実績、記事一覧など、画像とテキストを組み合わせて情報を掲載する場面に適しています。画像はカードの横幅いっぱいに表示し、object-fit:cover;を使用して一定の表示領域へ収めます。画像の下にはタイトルと説明文を配置し、それぞれ読みやすい余白を確保した構成です。
表示する画像は自分で用意したファイルへ差し替えて使用できます。HTMLでは画像、代替テキスト、カードタイトル、説明文を変更でき、CSSではカードの最大横幅、画像の高さ、内側余白、背景色、枠線、角丸、文字サイズなどを調整できます。JavaScriptを使用しないため構成もシンプルで、スマートフォン・タブレット・PCで利用しやすい画像付きカードとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
画像の下にタイトルと説明文を表示する、シンプルな画像付きカードのサンプルです。
このデモでは、カード上部に画像、その下にタイトルと説明文を配置したレイアウトを確認できます。
コードをコピーして使おう！
<!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-card_demo">
<!-- 画像付きカード -->
<article class="image-card_card">
<!-- カード上部の画像 -->
<div class="image-card_image">
<img
src="images/image1.png"
alt="カードの画像">
</div>
<!-- カードのテキスト部分 -->
<div class="image-card_body">
<!-- カードタイトル -->
<div class="image-card_title">
画像付きカードタイトル
</div>
<!-- 説明文 -->
<p class="image-card_text">
画像の下にタイトルと説明文を表示する、シンプルな画像付きカードのサンプルです。
</p>
</div>
</article>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルと、カードへ表示する画像を保存するimagesフォルダで構成されています。HTMLではカード上部の画像、カードタイトル、説明文を記述します。CSSではカード全体の横幅、画像の高さ、余白、枠線、角丸、文字サイズなどを設定します。JavaScriptを使用しないため、シンプルな構成で画像付きカードを表示できます。
sample/
├── index.html
├── style.css
└── images/
└── image1.png
各ファイルの役割
index.htmlは画像付きカード全体を構成するファイルです。カード上部へimages/image1.pngを表示し、その下へタイトルと説明文を配置しています。画像を変更する場合はimg要素のsrc属性とalt属性を編集し、タイトルや説明文も用途に合わせて変更できます。
style.cssはカードのレイアウトとデザインを設定するファイルです。カードの最大横幅、画像の高さ、背景色、枠線、角丸、テキスト部分の余白、タイトルの文字サイズ、説明文の行間などを変更できます。また、画面幅640px以下で画像の高さや余白を変更するレスポンシブ表示も設定しています。
imagesフォルダには、カード上部へ表示する画像を保存します。このサンプルではimage1.pngを使用します。画像ファイル自体は利用者が用意してください。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを保存し、同じ階層へimagesフォルダを作成します。imagesフォルダの中へ、カードに表示したい画像をimage1.pngというファイル名で配置してください。
ファイルと画像を配置したあと、sample/index.htmlをブラウザで開くと、カード上部にimage1.png、その下にカードタイトルと説明文が表示されます。
カスタマイズできる内容
index.htmlでは、表示する画像、画像の代替テキスト、カードタイトル、説明文を変更できます。別の画像ファイルを使用する場合は、imagesフォルダへ画像を配置し、img要素のsrc属性を実際のファイル名に変更してください。
style.cssでは、カード全体の最大横幅、画像部分の高さ、背景色、枠線、角丸、テキスト部分の内側余白、タイトルの文字サイズ、説明文の文字色や行間などを変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の上下・左右余白です。40pxを変更すると上下、20pxを変更すると左右の画面端との間隔が変わります。
max-width:420px;
カード全体の最大横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。
border-radius:12px;
カード全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
height:240px;
カード上部に表示する画像エリアの高さです。値を大きくすると画像部分が高くなり、小さくすると低くなります。
padding:24px;
カードのテキスト部分の内側余白です。値を大きくするとタイトルや説明文とカード端の間隔が広がります。
margin:0 0 10px;
カードタイトルの下側余白です。10pxを大きくするとタイトルと説明文の間隔が広がります。
font-size:22px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きく表示され、小さくすると控えめになります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
height:200px;
画面幅640px以下で使用する画像エリアの高さです。値を変更するとスマートフォン表示時の画像の高さが変わります。
padding:20px;
画面幅640px以下で使用するテキスト部分の内側余白です。値を変更するとスマートフォン表示時の文章周囲の間隔が変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでカードにwidth:100%とmax-width:420pxを指定しているため、画面幅に合わせてカードが縮小されます。画像にもwidth:100%を指定し、カードの横幅いっぱいに表示します。また、画面幅640px以下ではページ全体の余白を24px 12px、画像の高さを200px、テキスト部分の余白を20pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント