カードは、見出しや説明文をひとつの枠内にまとめて表示するUIです。今回は、内容を表示するだけの「基本のカード」、カード全体をクリックできる「リンク付きカード」、マウスを重ねると動く「ホバーカード」の3種類を紹介します。どれも同じような見た目ですが、マウス操作に対する反応が異なります。
基本のカードは、白い背景と角丸の枠、柔らかい影を付けたシンプルなデザインです。見出しと説明文が縦に並び、マウスカーソルを重ねたり、クリックしたりしても表示は変化しません。ほかの2種類のカードと比較するための基本形になります。
リンク付きカードは、見出しや説明文だけでなく、カードの余白部分も含めて全体をクリックできます。通常のリンクとは異なり、カード全体がクリックできる範囲になっているのが特徴です。デモではカードをクリックすると、ページを移動せずにメッセージが表示されます。
ホバーカードは、マウスカーソルを重ねるとカード全体が上方向へ8px移動し、同時に影が濃くなります。マウスを離すと元の位置と影に戻り、浮き上がるような動きを確認できます。リンク付きカードとは異なり、クリックしてもページ移動は発生しません。
デモ
① 基本のカード
見出しと説明文だけで構成された、シンプルなカードUIです。
内容を表示するだけの基本形です。
マウスを重ねても、クリックしても変化しません。
② リンク付きカード
カード全体がリンクになっています。クリックすると設定したリンク先へ移動できます。
カード内のどこをクリックしてもリンクが反応します。
このデモではページ移動を行いません。
デモのため、ページ移動はしません。
③ ホバーで浮き上がるカード
マウスカーソルを合わせると、カードが上方向へ移動して浮き上がります。
マウスを重ねるとカードが8px上へ移動し、
影が濃くなります。リンク機能はありません。
コードをコピーして使おう！
基本のカード
<!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="basic-card_card">
<!-- カードの見出し -->
<div class="basic-card_title">
基本のカード
</div>
<!-- カードの説明文 -->
<p class="basic-card_text">
見出しと説明文だけで構成された、シンプルなカードUIです。
</p>
</div>
</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>
<!--
リンク付きカード本体
href="#"を実際のリンク先URLに変更してください。
例：href="https://example.com/"
-->
<a class="clickable-card-link_card" href="#">
<!-- カードの見出し -->
<div class="clickable-card-link_title">
リンク付きカード
</div>
<!-- カードの説明文 -->
<p class="clickable-card-link_text">
カード全体をクリックすると、設定したリンク先へ移動できます。
</p>
</a>
</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>
<!-- ホバーで浮き上がるカード本体 -->
<div class="hover-lift-card_card">
<!-- カードの見出し -->
<div class="hover-lift-card_title">
浮き上がるカード
</div>
<!-- カードの説明文 -->
<p class="hover-lift-card_text">
マウスカーソルを合わせると、カードが上方向へ移動して浮き上がります。
</p>
</div>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回のサンプルは、基本のカード・リンク付きカード・ホバーで浮き上がるカードの3種類です。それぞれ独立したHTMLとCSSで構成されており、セクション3の各コードカードから個別にZIPファイルをダウンロードできます。基本のカードは内容の表示、リンク付きカードはページへの移動、ホバーカードはマウス操作によるアニメーションに対応しています。いずれもJavaScriptを使用せず、HTMLとCSSだけで実装しています。
sample/
├── index.html
└── style.css
各ファイルの役割
3種類ともファイル構成は同じですが、収録されているコードは異なります。index.htmlにはカードの見出しと説明文を配置し、リンク付きカードではカード全体をa要素で囲んでいます。style.cssには横幅・余白・角丸・影などの共通したデザインを設定し、リンク付きカードにはフォーカス表示、ホバーカードには浮き上がるアニメーションを追加しています。
設置方法・使い方
使用したいカードの「サンプル一式をダウンロード」をクリックし、ZIPファイルを取得してください。ZIPを解凍すると、sampleフォルダ内にindex.htmlとstyle.cssが入っています。2つのファイルを同じ階層に配置したままindex.htmlをブラウザで開くと、カードが表示されます。基本のカードは表示のみ、リンク付きカードはクリックでページ移動、ホバーカードはマウスを重ねると上方向へ移動します。3種類をまとめて設置する必要はなく、目的に合うサンプルだけを使用できます。
3種類のカードの実装上の違い
基本のカードとホバーカードはdiv要素で作成していますが、リンク付きカードだけはa要素を使用しています。リンク付きカードでは、次のHTMLによって見出し・説明文・余白を含むカード全体がクリックできる範囲になります。
<a class="clickable-card-link_card" href="#">
<!-- カードの見出し -->
<div class="clickable-card-link_title">
リンク付きカード
</div>
<!-- カードの説明文 -->
<p class="clickable-card-link_text">
カード全体をクリックすると、設定したリンク先へ移動できます。
</p>
</a>
href="#"はリンク先を設定する場所です。実際に使用する場合は、リンク付きカードのindex.htmlを開き、#を移動先のURLへ変更してください。また、style.cssの.clickable-card-link_cardに設定したdisplay:blockによって、リンクをカード全体の領域として表示しています。キーボード操作時には:focus-visibleで輪郭線が表示されます。基本のカードにはリンクを設定していないため、クリックしてもページ移動しません。
ホバーカードが浮き上がる仕組み
ホバーカードでは、style.cssの.hover-lift-card_card:hoverに、マウスカーソルを重ねたときの移動と影の変化を設定しています。
/* マウスを重ねたとき */
.hover-lift-card_card:hover{
transform:translateY(-8px); /* 上へ8px移動。負の値を大きくすると高く浮く */
box-shadow:0 20px 38px rgba(15,23,42,.16); /* 通常時より濃く大きい影 */
}
transform:translateY(-8px)はカードを上方向へ8px移動させる指定です。box-shadowも同時に変更することで、カードが浮き上がったように見えます。通常時の.hover-lift-card_cardにはtransitionが設定されているため、マウスを重ねたときも離したときも、位置と影が滑らかに変化します。リンク付きカードとは異なり、クリックによるページ移動はありません。
カスタマイズできる内容
カードの見出しや説明文は、各サンプルのindex.htmlにあるタイトル用のdiv要素と説明文のp要素を書き換えて変更できます。カードの背景色はstyle.cssのbackground:#ffffff、角丸はborder-radius:14px、影はbox-shadowで調整できます。リンク付きカードではhref属性を変更することで移動先を設定できます。
数値調整
各サンプルのstyle.cssにあるmax-width:420pxはカードの最大横幅です。値を大きくするとカードが横に広がり、小さくすると狭くなります。ホバーカードのtransform:translateY(-8px)は浮き上がる距離で、-12pxなどに変更すると移動量が大きくなります。また、transitionの.3sは変化にかかる時間を表し、値を大きくするとゆっくり、小さくすると素早く動きます。
レスポンシブ対応
3種類ともstyle.cssでwidth:100%とmax-width:420pxを組み合わせ、画面幅に応じてカードの横幅が収まるようにしています。また、画面幅640px以下ではメディアクエリによって内側の余白をpadding:24px 20pxに変更し、スマートフォンでも内容を読みやすく表示できるようにしています。
コメント