カードをクリックしてリンク先へ移動する方法
カード全体をクリックしてリンク先へ移動する方法を紹介します。このサンプルでは、HTMLのa要素でカード全体を囲み、見出しや説明文だけでなくカード内の余白部分もクリックできるリンクカードを作成します。通常のテキストリンクよりクリックできる範囲が広くなるため、記事一覧やサービス一覧などでリンク先を分かりやすく案内できます。
ブログの記事一覧、ECサイトの商品一覧、サービス紹介、会員サイトのメニュー、管理画面のリンク一覧など、カード単位で別ページへ移動させたい場面に利用できます。カードへマウスを重ねると少し上へ移動し、枠線と影が変化するため、クリックできる要素であることも確認しやすくなっています。JavaScriptは使用せず、HTMLとCSSだけで実装します。
HTMLではリンク先のURL、カードの見出し、説明文を変更できます。CSSではカードの横幅、余白、背景色、枠線、角丸、文字サイズ、影、ホバー時の移動量などを調整できます。画面幅に合わせてカード全体が縮小されるレスポンシブ対応のため、スマートフォン・タブレット・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="clickable-card-link_wrap">
<!--
カード全体をリンクにする
hrefのURLを移動したいリンク先へ変更してください。
-->
<a
class="clickable-card-link_card"
href="https://example.com/">
<!-- カードの見出し -->
<div class="clickable-card-link_title">
サービスについて詳しく見る
</div>
<!-- カードの説明文 -->
<p class="clickable-card-link_text">
このカード全体をクリックすると、設定したリンク先へ移動できます。
</p>
</a>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではa要素を使ってカード全体をリンクにし、見出しと説明文をカード内へ配置します。CSSではカードの横幅、余白、背景色、枠線、角丸、影などのデザインに加えて、マウスを重ねたときの移動や枠線・影の変化を設定します。JavaScriptや外部ライブラリは使用しません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはカードの内容とリンク先を設定するファイルです。「サービスについて詳しく見る」の見出しや説明文を変更できます。href="https://example.com/"のURLを、実際に移動させたいページのURLへ変更すると、カード全体をクリックしたときのリンク先を設定できます。
style.cssはカード全体のデザインとホバー時の変化を設定するファイルです。カード表示エリアとカード本体の横幅、余白、枠線、角丸、背景色、文字サイズ、影などを変更できます。また、カードへマウスを重ねたときの移動量、枠線色、影の大きさ、切り替わる速度も調整できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。index.htmlからstyle.cssを読み込む構成になっているため、そのままsample/index.htmlをブラウザで開くとカードが表示されます。
リンク先を設定する場合は、index.htmlにあるhref="https://example.com/"の部分を、移動させたいページのURLへ変更してください。カードの見出しや説明文も同じindex.htmlから変更できます。設定後にカードをクリックすると、指定したリンク先へ移動します。
カスタマイズできる内容
index.htmlでは、カードのリンク先、見出し、説明文を変更できます。記事一覧、商品一覧、サービス紹介、メニューなど、用途に合わせた文章とURLへ変更して利用できます。
style.cssでは、カード表示エリアとカード本体の横幅、余白、背景色、枠線、角丸、影、文字色、文字サイズを変更できます。ホバー時の上方向への移動量や枠線色、影、切り替え時間も設定できるため、サイトのデザインに合わせて調整できます。
数値調整
style.css
max-width:700px;
カード表示エリア全体の最大横幅です。値を大きくすると表示エリアが横に広がり、小さくするとコンパクトになります。
margin:40px auto;
カード表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
カード表示エリアの内側余白です。値を大きくするとカード周囲の余白が広がり、小さくすると狭くなります。
border-radius:18px;
カード表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
max-width:420px;
クリックできるカード本体の最大横幅です。値を大きくするとカードが横に広がり、小さくすると狭くなります。
padding:28px;
カード本体の内側余白です。値を大きくすると文章と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:14px;
カード本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 12px 28px rgba(15,23,42,.08);
通常時に表示するカードの影です。12pxや28pxを変更すると、影の位置や広がりを調整できます。
transform:translateY(-4px);
カードへマウスを重ねたときの上方向への移動量です。4pxを大きくすると移動量が増え、小さくすると動きが控えめになります。
transition内の.3s
カードの位置、枠線、影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
font-size:22px;
カード見出しの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
font-size:16px;
カード説明文の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより、画面幅が狭くなるとカード表示エリアとカード本体も横幅に合わせて縮小されます。また、画面幅640px以下ではカード表示エリアをpadding:24px 18px;、カード本体をpadding:24px 20px;へ変更して内側余白を抑えているため、スマートフォン・タブレット・PCで利用できます。
コメント