カードの画像を上に置くか、下に置くか、それとも左右に配置するか。同じ画像と文章を使っていても、配置を変えるだけでカードの見た目や情報の伝わり方は大きく変わります。写真を目立たせたい場合は画像を上に、文章と写真を並べて見せたい場合は画像を左右に配置するなど、紹介する内容に合わせてレイアウトを選べます。
縦型カードには、画像を上に配置して下にテキストを表示する方法と、テキストを上に配置して下に画像を表示する方法があります。上画像・下テキストは写真を最初に見せたい商品紹介や記事一覧に適しており、上テキスト・下画像はタイトルや説明を先に読んでもらいたい場合に便利です。
横型カードには、左画像・右テキスト、左テキスト・右画像、左右画像・中央テキストの3種類があります。左画像・右テキストは写真と説明を横に並べる基本的なレイアウトです。左テキスト・右画像は文章を先に見せたい場合に使えます。また、左右画像・中央テキストは2枚の画像で中央の情報を挟む構成で、複数の写真を組み合わせた紹介カードなどに利用できます。
この記事では、縦型2種類と横型3種類の合計5パターンを紹介します。HTMLとCSSだけで作成でき、画像の配置は主にCSSの設定で変更できます。デモではそれぞれのレイアウトを比較でき、スマートフォンでの表示にも対応しています。
デモ
カードの上部に画像を配置し、その下にタイトルと説明文を表示する基本的なレイアウトです。
カードの上部にタイトルと説明文を表示し、その下に画像を配置したレイアウトです。
カードの左側に画像を配置し、右側にタイトルと説明文を表示する横型レイアウトです。
カードの左側にタイトルと説明文を表示し、右側に画像を配置する横型レイアウトです。
カードの左右両端に画像を配置し、中央にタイトルと説明文を表示するレイアウトです。
このデモでは、画像をカードの上・下・左・右・左右両端に配置した5種類のレイアウトを確認できます。画面幅が狭い場合は、横型カードも縦並びで表示されます。
コードをコピーして使おう！
縦型カード（上画像・下テキスト／上テキスト・下画像）
<!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>
<!--
縦型カード
画像を上、テキストを下に表示します。
上下を反転する場合はstyle.cssのflex-directionを変更してください。
-->
<article class="image-position-card_card image-position-card_vertical">
<!--
カード画像
images/image1.pngは利用者自身で用意してください。
index.htmlと同じ階層にimagesフォルダを作成し、
その中へimage1.pngを配置します。
別の画像を使用する場合はsrc属性を書き換えてください。
-->
<img class="image-position-card_image" src="images/image1.png" alt="山と湖の風景">
<!-- カード内のテキスト -->
<div class="image-position-card_body">
<!-- タイトル -->
<div class="image-position-card_title">
山と湖の風景
</div>
<!-- 説明文 -->
<p class="image-position-card_text">
カードの上部に画像を配置し、その下にタイトルと説明文を表示する基本的なレイアウトです。
</p>
</div>
</article>
</body>
</html>横型カード（左画像・右テキスト／左テキスト・右画像）
<!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>
<!--
横型カード
画像を左、テキストを右に表示します。
左右を反転する場合はstyle.cssのflex-directionを変更してください。
-->
<article class="image-position-card_card image-position-card_horizontal">
<!--
カード画像
images/image1.pngは利用者自身で用意してください。
index.htmlと同じ階層にimagesフォルダを作成し、
その中へimage1.pngを配置します。
別の画像を使用する場合はsrc属性を書き換えてください。
-->
<img class="image-position-card_image" src="images/image1.png" alt="森と木々の自然風景">
<!-- カード内のテキスト -->
<div class="image-position-card_body">
<!-- タイトル -->
<div class="image-position-card_title">
森と木々の自然風景
</div>
<!-- 説明文 -->
<p class="image-position-card_text">
カードの左側に画像を配置し、右側にタイトルと説明文を表示する横型レイアウトです。
</p>
</div>
</article>
</body>
</html>左右画像カード（左右画像・中央テキスト）
<!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>
<!--
左右画像カード
左右に画像を1枚ずつ配置し、
中央にタイトルと説明文を表示します。
-->
<article class="image-position-card_card image-position-card_horizontal image-position-card_horizontal-both">
<!--
左側の画像
images/image1.pngは利用者自身で用意してください。
index.htmlと同じ階層にimagesフォルダを作成し、
その中へimage1.pngを配置します。
-->
<img class="image-position-card_image" src="images/image1.png" alt="デスクとノートPCと文房具">
<!-- 中央のテキスト -->
<div class="image-position-card_body">
<!-- タイトル -->
<div class="image-position-card_title">
左右に画像を配置したカード
</div>
<!-- 説明文 -->
<p class="image-position-card_text">
カードの左右両端に画像を配置し、中央にタイトルと説明文を表示するレイアウトです。
</p>
</div>
<!--
右側の画像
images/image2.pngも利用者自身で用意してください。
左側の画像と同じimagesフォルダへ配置します。
別の画像を使用する場合はsrc属性を書き換えてください。
-->
<img class="image-position-card_image" src="images/image2.png" alt="コーヒーとテーブル">
</article>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
配布しているサンプルは、縦型カード・横型カード・左右画像カードの3種類です。それぞれHTMLとCSSを使用した独立したサンプルで、必要なレイアウトだけをダウンロードできます。縦型カードは画像とテキストの上下配置、横型カードは左右配置をCSSで切り替えられます。左右画像カードは2枚の画像でテキストを挟む構成です。いずれもJavaScriptは使用せず、画像は利用者自身で用意します。
縦型カード・横型カードのファイル構成
どちらも画像を1枚使用します。ZIPを展開したあと、imagesフォルダとimage1.pngを追加した完成形は次のとおりです。
sample/
├── index.html
├── style.css
└── images/
└── image1.png
左右画像カードのファイル構成
左右に配置する画像を2枚使用します。image1.pngが左側、image2.pngが右側の画像です。
sample/
├── index.html
├── style.css
└── images/
├── image1.png
└── image2.png
各ファイルの役割
index.htmlにはカード本体を配置し、画像の読み込み先、タイトル、説明文を記述しています。style.cssでは画像とテキストの並び方、カードの最大横幅、画像の表示サイズ、文字や余白などを設定しています。imagesフォルダにはカードに表示する画像を保存します。ZIPに収録されているのはindex.htmlとstyle.cssの2ファイルのみで、imagesフォルダと画像ファイルは含まれていません。
設置方法・使い方
使用したいカードの「サンプル一式をダウンロード」ボタンからZIPを保存し、解凍してください。展開されたsampleフォルダ内にimagesフォルダを新しく作成し、用意したPNG画像を配置します。縦型カードと横型カードはimage1.pngを1枚、左右画像カードはimage1.pngとimage2.pngの2枚を配置してください。ファイル名を変更する場合は、index.htmlのsrc属性も変更する必要があります。準備ができたらindex.htmlをブラウザで開くと、画像付きカードが表示されます。3種類のサンプルを同時に設置する必要はありません。
縦型カードの上下を切り替える方法
縦型カードでは、style.cssの.image-position-card_verticalに指定されたflex-directionによって、画像とテキストの上下位置を決めています。初期状態のcolumnでは画像が上、テキストが下に表示されます。
/* 縦型カード本体 */
.image-position-card_vertical{
display:flex; /* 画像とテキストをFlexboxで配置 */
flex-direction:column; /* column-reverseに変更すると上下が反転 */
max-width:420px; /* 最大横幅。値を大きくするとカードが広がる */
margin:0 auto; /* カードを左右中央に配置 */
}画像を下、テキストを上に配置したい場合は、flex-direction:columnをflex-direction:column-reverseに変更します。HTMLの画像とテキストの記述順を入れ替える必要はありません。どちらの配置でも画像はカードの横幅いっぱいに表示され、画像とカードの外枠の間に余白は入りません。
横型カードの左右を切り替える方法
横型カードも同じ仕組みで、style.cssの.image-position-card_horizontalにあるflex-directionを変更します。初期状態のrowでは画像が左、テキストが右に表示されます。
/* 横型カード本体 */
.image-position-card_horizontal{
display:flex; /* 画像とテキストをFlexboxで配置 */
flex-direction:row; /* row-reverseに変更すると左右が反転 */
max-width:820px; /* 最大横幅。値を大きくするとカードが広がる */
min-height:230px; /* 最小の高さ。値を大きくするとカードが縦に広がる */
margin:0 auto; /* カードを左右中央に配置 */
}flex-direction:row-reverseに変更すると、テキストが左、画像が右に移動します。横型カードでは画像の横幅を35%に設定し、残りの領域をテキスト部分に使用しています。画像を大きく見せたい場合は、.image-position-card_horizontal .image-position-card_imageのwidthを変更してください。
左右に2枚の画像を配置する仕組み
左右画像カードでは、index.htmlに画像・テキスト・画像の順番で要素を配置しています。横型カードと同じFlexboxを使用していますが、画像を2枚配置するため、それぞれの横幅を25%に設定しています。
/* 左右に配置する2枚の画像 */
.image-position-card_horizontal-both .image-position-card_image{
width:25%; /* 画像1枚あたりの横幅。値を大きくすると中央の文章領域が狭くなる */
}
/* 中央のテキスト */
.image-position-card_horizontal-both .image-position-card_body{
text-align:center; /* タイトルと説明文を中央揃えにする */
}左右の画像がそれぞれカード幅の25%を使用し、中央のテキストが残りの領域に配置されます。画像の横幅を広げると中央の文章領域は狭くなり、反対に画像の横幅を小さくすると文章を表示する領域が広がります。画像とカードの外枠の間には余白を設けず、テキスト部分のpaddingで文章の周囲に余白を確保しています。
カスタマイズできる内容
カードのタイトルと説明文はindex.htmlの.image-position-card_titleと.image-position-card_textの内容を書き換えて変更できます。画像を差し替える場合は、imagesフォルダ内のファイルを入れ替えるか、img要素のsrc属性を変更してください。画像の表示範囲はstyle.cssのobject-fit:coverによって調整され、指定された領域に収まるように画像の一部が切り取られます。文字色や背景色、枠線、角丸、影などもstyle.cssから変更できます。
数値調整
縦型カードの最大横幅はmax-width:420px、横型カードと左右画像カードの最大横幅はmax-width:820pxです。値を大きくするとカードが広がり、小さくするとコンパクトになります。
画像の高さは縦型カードが240px、横型カードはカードの高さに合わせて表示されます。テキスト部分のpadding:26pxを変更すると、タイトルや説明文とカードの端との間隔を調整できます。カードの角丸はborder-radius:12pxで設定しています。
画像とカードの外枠の間に隙間を作りたい場合は、style.cssの.image-position-card_imageにmarginを追加します。例えばmargin:10pxを指定すると、画像の上下左右に10pxの余白を設けられます。
ただし、画像の幅が100%のままでは余白の分だけはみ出すため、width:calc(100% – 20px)に変更してください。横型カードでは画像幅を35%、左右画像カードでは25%に指定しているため、それぞれの画像幅から余白分を差し引く調整も必要です。
レスポンシブ対応
style.cssでは画面幅640px以下を対象にメディアクエリを設定しています。縦型カードは画像の高さを210pxに変更し、横型カードは画像とテキストを横並びから縦並びに切り替えます。左右画像カードも「画像・テキスト・画像」の順番で縦に並び、2枚の画像はそれぞれ高さ170pxで表示されます。横型カードでPC表示をrow-reverseに変更した場合でも、スマートフォンでは画像が上になる設定です。スマートフォンでもテキストを上、画像を下にしたい場合は、メディアクエリ内のflex-direction:columnをcolumn-reverseに変更してください。
コメント