画像付きの横長カードを作る方法
画像付きの横長カードを作る方法を紹介します。このサンプルでは、カードの左側に画像、右側にタイトルと説明文を配置し、横方向に情報をまとめて表示します。画像と文章を横並びにすることで、縦長カードよりも高さを抑えながら、内容を分かりやすく整理できます。
ブログの記事一覧、商品紹介、サービス紹介、ニュース一覧、関連記事、店舗紹介など、画像とテキストをセットで見せたい場面に利用できます。画像を左側へ固定して配置し、右側へタイトルと説明文をまとめることで、複数のカードを縦に並べた場合でも内容を比較しやすいレイアウトになります。
HTMLでは画像、カードタイトル、説明文を変更できます。CSSではカードの横幅、画像の横幅、余白、枠線、角丸、背景色、文字サイズなどを調整できます。デモでは表示確認用のサンプル画像を使用し、画像とテキストを横並びにした基本的な横長カードのレイアウトを確認できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
左側に画像、右側にタイトルと説明文を配置した画像付き横長カードのサンプルです。
画像とテキストを横に並べた、画像付き横長カードの表示を確認できます。
コードをコピーして使おう！
<!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="horizontal-image-card_wrap">
<!-- 画像付き横長カード -->
<article class="horizontal-image-card_card">
<!--
カード画像
利用者自身で表示したい画像を用意してください。
画像をindex.htmlと同じフォルダへ配置する場合は、
src="sample.jpg" のsample.jpgを
使用する画像のファイル名へ変更してください。
例：card-image.jpgを使用する場合
src="card-image.jpg"
-->
<img
class="horizontal-image-card_image"
src="sample.jpg"
alt="カード画像"
>
<!-- カード本文 -->
<div class="horizontal-image-card_body">
<!-- カードタイトル -->
<div class="horizontal-image-card_title">
横長カードタイトル
</div>
<!-- カード説明文 -->
<p class="horizontal-image-card_text">
左側に画像、右側にタイトルと説明文を配置した画像付き横長カードのサンプルです。
</p>
</div>
</article>
</div>
</body>
</html>ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではカード画像、タイトル、説明文を配置し、CSSでは画像とテキストを横並びにしたカードのレイアウトや、横幅、余白、枠線、角丸、影などのデザインを設定します。JavaScriptや外部ライブラリは使用しません。カードに表示する画像は配布物に含まれていないため、利用者自身で画像ファイルを用意して使用します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは画像付き横長カードの内容を構成するファイルです。カード画像、タイトル、説明文を変更できます。画像部分ではsrc="sample.jpg"を使用しているため、利用者自身で用意した画像ファイルに合わせてファイル名やパスを変更します。
style.cssは画像付き横長カードのデザインを設定するファイルです。カードの最大横幅、画像サイズ、本文の余白、枠線、角丸、影、文字サイズなどを変更できます。また、画面幅640px以下では画像と本文を縦並びへ切り替えるレスポンシブ処理も設定しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。次に、カードへ表示したい画像を利用者自身で用意してください。配布コードではindex.htmlの画像にsrc="sample.jpg"を指定しているため、画像をindex.htmlと同じsampleフォルダへsample.jpgという名前で配置すると、そのまま表示できます。
JPG以外の画像や別のファイル名を使用する場合は、src="sample.jpg"を実際に使用する画像のファイル名やパスへ変更してください。例えば同じフォルダにあるcard-image.pngを使用する場合は、src="card-image.png"へ変更します。画像を用意して設定したあと、sample/index.htmlをブラウザで開くと、画像付き横長カードを確認できます。
カスタマイズできる内容
index.htmlではカードに表示する画像、画像の代替テキスト、カードタイトル、説明文を変更できます。画像を変更する場合はsrc属性へ使用する画像のファイル名やパスを設定し、alt属性も画像の内容に合わせて変更してください。
style.cssではカードの最大横幅、画像の横幅と高さ、本文の余白、枠線、角丸、背景色、影、タイトルと説明文の文字サイズや行間などを変更できます。画像にはobject-fit:cover;を指定しているため、指定した画像領域を埋めるように縦横比を保ったまま表示されます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端とカードの間隔が広がります。
max-width:720px;
カードの最大横幅です。値を大きくするとカードをより横長にでき、小さくするとコンパクトになります。
border:1px solid #e5e7eb;
カードの枠線です。1pxを大きくすると枠線が太くなります。
border-radius:12px;
カードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 10px 24px rgba(15,23,42,.08);
カードの影です。10pxや24pxを変更すると、影の位置や広がりを調整できます。
width:240px;
PC表示での画像の横幅です。値を大きくすると画像部分が横に広がり、小さくするとテキスト部分の横幅が広くなります。
height:180px;
PC表示での画像の高さです。値を大きくすると画像領域が高くなり、小さくすると低くなります。
padding:22px;
カード本文の内側余白です。値を大きくするとタイトルや説明文とカード端との間隔が広がります。
margin:0 0 10px;
カードタイトルの下側余白です。10pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると狭くなります。
font-size:22px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
line-height:1.5;
カードタイトルの行間です。タイトルが複数行になった場合の行と行の間隔を調整できます。
font-size:16px;
カード説明文の文字サイズです。値を大きくすると説明文が大きくなり、小さくすると小さくなります。
line-height:1.8;
カード説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
@media (max-width:640px)
横長カードをスマートフォン向けの表示へ切り替える基準です。画面幅640px以下になると、画像と本文を横並びから縦並びへ変更します。
padding:32px 18px;
画面幅640px以下でのページ全体の内側余白です。左右の18pxを変更すると、スマートフォンでの画面端とカードの間隔を調整できます。
height:220px;
画面幅640px以下での画像の高さです。値を大きくするとスマートフォンで画像が高く表示され、小さくすると低くなります。
padding:20px;
画面幅640px以下でのカード本文の内側余白です。値を変更すると、スマートフォンでの文章とカード端との間隔が変わります。
レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。カードにはwidth:100%とmax-width:720pxを指定しているため、広い画面では最大720pxで表示し、それより狭い画面では利用できる横幅に合わせて縮小されます。
画面幅640px以下ではメディアクエリによってカードのdisplay:flex;をdisplay:block;へ変更し、左側に配置していた画像を本文の上へ移動して縦並びにします。画像もwidth:100%へ変更されるため、スマートフォンではカードの横幅いっぱいに表示されます。PCでは画像とテキストを横並び、スマートフォンでは縦並びに切り替わる構成で、タブレットを含む画面幅の異なる環境でも利用できます。
コメント