マウスホバーで浮き上がるカードを作る方法
マウスホバーで浮き上がるカードを作る方法を紹介します。このサンプルでは、カードへマウスカーソルを合わせるとカード全体が少し上方向へ移動し、影も変化することで浮き上がったように見えるカードUIを作成します。商品紹介、サービス案内、記事一覧、プロフィールなど、クリックできる要素や注目してほしい情報を分かりやすく見せたい場面で利用できます。
HTMLでは見出しと説明文をひとつのカード内へ配置し、CSSの:hoverを使用してマウスホバー時の表示を切り替えます。JavaScriptを使用せずHTMLとCSSだけで実装でき、通常時からホバー時へ滑らかに変化するようにtransitionも設定しています。
カードのタイトルや説明文はHTMLから変更でき、CSSでは横幅、余白、背景色、枠線、角丸、影、浮き上がる距離、変化する速度などを用途に合わせて調整できます。基本のカードUIへホバー表現を追加したシンプルな構成なので、さまざまなカードデザインへ応用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
マウスカーソルを合わせると、カードが上方向へ移動して浮き上がります。
カードへマウスカーソルを合わせると、上方向へ移動して影が濃くなる動きを確認できます。
コードをコピーして使おう！
<!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_wrap">
<!-- 浮き上がるカード -->
<div class="hover-lift-card_card">
<!-- カードタイトル -->
<div class="hover-lift-card_title">
浮き上がるカード
</div>
<!-- カード説明文 -->
<p class="hover-lift-card_text">
マウスカーソルを合わせると、カードが上方向へ移動して浮き上がります。
</p>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは「浮き上がるカード」のタイトルと説明文を配置し、CSSではカード全体の横幅、余白、背景色、枠線、角丸、影などを設定します。さらに、マウスカーソルをカードへ合わせたときに上方向へ移動し、影が変化するホバー表現もCSSだけで実装しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはカード全体を構成するファイルです。「浮き上がるカード」のタイトルと、マウスカーソルを合わせたときの動作を説明する文章を変更できます。カード内へ表示する内容を変更したい場合は、このファイルを編集します。
style.cssはカードのデザインとホバー時の動きを設定するファイルです。カード全体の最大横幅、余白、背景色、枠線、角丸、通常時の影、文字サイズなどを変更できます。また、:hoverを使用してカードを上方向へ移動させ、通常時より大きな影へ切り替えることで浮き上がったように表示します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。2つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。表示されたカードへマウスカーソルを合わせると、カードが上方向へ移動して影が濃くなります。カーソルをカードから外すと、元の位置と影へ戻ります。
カスタマイズできる内容
index.htmlではカードタイトルと説明文を変更できます。商品紹介、サービス案内、プロフィール、記事紹介など、表示したい内容へ置き換えて利用できます。
style.cssではカード全体の最大横幅、内側余白、背景色、枠線、角丸、通常時とホバー時の影、タイトルと説明文の文字サイズ、行間などを変更できます。transform:translateY(-8px);を変更すると浮き上がる距離を調整でき、transitionの時間を変更すると動きの速さを変えられます。
数値調整
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はぼかしの広がりを表します。値を変更すると影の見え方が変わります。
transition:transform .3s ease, box-shadow .3s ease;
カードの位置と影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速くなります。
transform:translateY(-8px);
マウスホバー時にカードを上方向へ移動する距離です。8pxを大きくするとより大きく浮き上がり、小さくすると動きが控えめになります。
box-shadow:0 20px 38px rgba(15,23,42,.16);
マウスホバー時のカードの影です。20pxは縦方向の位置、38pxはぼかしの広がりを表します。通常時より大きな値にすることで浮き上がったように見せています。
font-size:22px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin:0 0 12px;
カードタイトル下側の余白です。12pxを大きくすると説明文との間隔が広がります。
font-size:16px;
カード説明文の文字サイズです。値を大きくすると説明文が大きく表示されます。
line-height:1.8;
カード説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700px、カード本体のwidth:100%とmax-width:420pxによって、画面幅に合わせて横幅が縮小されます。また、画面幅640px以下では全体の余白をpadding:24px 18px;、カード本体の余白をpadding:24px 20px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント