ボタン付きカードを作る方法
ボタン付きカードを作る方法を紹介します。カードレイアウトは、商品紹介やサービス一覧、料金プラン、おすすめ記事など、情報を見やすく整理して表示する場面でよく利用されます。カード内にボタンを配置することで、詳細ページへの誘導や申し込み、購入などのアクションを分かりやすく案内できます。
このサンプルでは、HTMLとCSSだけを使用して、タイトル・説明文・ボタンで構成されたシンプルなカードを作成します。ボタンはカード下部に配置しており、クリックできる要素が一目で分かるデザインになっています。JavaScriptは使用していないため、そのまま静的なWebページへ導入できます。
カードの幅や余白、背景色、枠線、ボタンの色や文字などは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="button-card_wrap">
<!-- ボタン付きカード -->
<article class="button-card_card">
<!-- カードタイトル -->
<h3>カードタイトル</h3>
<!-- カード説明文 -->
<p>
タイトル・説明文・ボタンで構成されたシンプルなカードです。
</p>
<!--
詳細ボタン
href="#" の # をリンク先へ変更してください。
例：detail.htmlへ移動する場合
href="detail.html"
例：外部ページへ移動する場合
href="https://example.com/"
-->
<a href="#" class="button-card_button">
詳細を見る
</a>
</article>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではカードタイトル、説明文、「詳細を見る」ボタンを配置し、CSSではカードの横幅、余白、枠線、角丸、背景色、文字サイズ、ボタンのデザインを設定します。ボタンにはa要素を使用しているため、href属性へリンク先を設定することで、詳細ページや商品ページなどへ移動できるボタン付きカードとして利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはボタン付きカードの内容を構成するファイルです。カードタイトル、説明文、「詳細を見る」のボタン文字、ボタンのリンク先を変更できます。ボタンには<a>要素を使用しており、href="#"の#を実際のリンク先へ変更して使用します。
style.cssはカードとボタンのデザインを設定するファイルです。カードの最大横幅、内側余白、枠線、角丸、背景色、タイトルの文字サイズ、説明文の行間、ボタンの余白や角丸、背景色などを変更できます。また、画面幅640px以下ではカード表示エリアの余白を小さくするレスポンシブ処理も設定しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。index.htmlから同じ階層にあるstyle.cssを読み込む構成になっているため、2つのファイルを配置したあと、sample/index.htmlをブラウザで開くとボタン付きカードを確認できます。
ボタンのリンク先を設定する場合は、index.htmlにあるhref="#"の#を実際のリンク先へ変更してください。例えば同じフォルダにあるdetail.htmlへ移動する場合はhref="detail.html"、外部ページへ移動する場合はhref="https://example.com/"のように設定します。「詳細を見る」というボタン文字も、リンク先の内容に合わせて変更できます。
カスタマイズできる内容
index.htmlではカードタイトル、説明文、「詳細を見る」のボタン文字、href属性のリンク先を変更できます。記事紹介、商品紹介、サービス案内など、カードの用途に合わせて文章とリンク先を設定できます。
style.cssではカードの最大横幅、内側余白、枠線、角丸、背景色、タイトルの文字サイズや文字色、説明文の文字色や行間を変更できます。ボタンについても内側余白、角丸、背景色、文字色を変更でき、.button-card_button:hoverではマウスを乗せたときの背景色を調整できます。
数値調整
style.css
padding:40px 20px;
カード表示エリアの余白です。上下の40pxを大きくすると上下の間隔が広がり、左右の20pxを大きくすると画面端とカードの間隔が広がります。
max-width:320px;
カードの最大横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。
padding:20px;
カードの内側余白です。値を大きくするとカードの端とタイトル・説明文・ボタンとの間隔が広がり、小さくすると詰まった表示になります。
border:1px solid #e5e7eb;
カードの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:8px;
カードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
margin:0 0 10px;
カードタイトルの下側余白です。10pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると狭くなります。
font-size:20px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin:0 0 20px;
カード説明文の下側余白です。20pxを大きくすると説明文とボタンの間隔が広がり、小さくすると狭くなります。
line-height:1.8;
カード説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
padding:12px 20px;
ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の20pxを大きくするとボタンが横に広がります。
border-radius:6px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
@media (max-width:640px)
スマートフォン向けの表示へ切り替える基準です。画面幅640px以下になると、カード表示エリアの余白を変更します。
padding:32px 18px;
画面幅640px以下でのカード表示エリアの余白です。左右の18pxを大きくすると画面端との間隔が広がり、小さくするとカードをより広く表示できます。
レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。カード本体にはwidth:100%とmax-width:320pxを指定しているため、広い画面では最大320pxで表示し、それより狭い画面では利用できる横幅に合わせて縮小されます。
また、画面幅640px以下では@media (max-width:640px)によってカード表示エリアの余白をpadding:32px 18px;へ変更し、スマートフォンでも画面端との余白を確保しながら表示できるようにしています。PC・タブレット・スマートフォンなど、画面幅の異なる環境で利用できます。
コメント