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