CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでカード型UIを作成する方法｜影とホバー効果を活用した実装例

Webサイトやアプリのデザインにおいて、カード型のUIはプロフィール紹介や商品一覧など、さまざまな場面で活用される定番のレイアウトです。CSSを使えば、画像とテキストを組み合わせた洗練されたカードを簡単に作成できます。

この記事では、box-shadow（影）や :hover（ホバー時の変化）を組み合わせて、立体感のあるカードを実装する方法を解説します。

カード作成のサンプルコード

以下のコードは、画像と肩書き情報を持つシンプルなカードの例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin:20px;
    }
    .card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        width: 40%;
        max-width: 300px;
        background-color: rgb(56, 185, 185);
    }
    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }
    .Designation {
        padding: 2px 16px;
        background-color: rgb(107, 43, 167);
        color:white;
    }
    .card img{
        width: 300px;
        height: 250px;
    }
</style>
</head>
<body>
<h1>Card Example</h1>
<div class="card">
<img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png">
<div class="Designation">
<h3>Britney Smith</h3>
<p>Senior Designer</p>
</div>
</div>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような出力が得られます。

CSSでカード型UIを作成する方法｜影とホバー効果を活用した実装例

コードのポイント解説

1. box-shadow で立体感を演出

.card クラスに設定した box-shadow は、カードに柔らかな影を落とし、浮き上がったような立体感を与えます。
値は「横オフセット 縦オフセット ぼかし 広がり 色」の順に指定します。

2. :hover でインタラクティブな動きを追加

.card:hover では、マウスカーソルがカードに乗ったときに影を強くしています。これにより、ユーザーが操作可能な要素であることを直感的に伝えられます。

3. max-width でレスポンシブ対応

width: 40% と max-width: 300px を併用することで、画面サイズに応じてカードが縮小されつつ、最大幅が制御されます。スマートフォンなど小さな画面でも崩れにくい設計です。

まとめ

CSSによるカード作成の基本は、影（box-shadow）・余白（padding）・幅の指定の3点です。今回の例をベースに、角丸（border-radius）の追加やトランジション（transition）による滑らかなアニメーションなどを加えることで、より洗練されたカードデザインへと発展させることができます。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブなカラムカードを簡単に作成できます。本記事では、floatとcalc()、そしてメディアクエリを組み合わせた基本的な実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 レスポンシブカラムカードの仕組み この手法のポイントは、主に以下の3つです。 calc(25% - 20px)：4枚のカードを横並びにするため、各カードの幅を「全体の25%からマージン分を引いた値」として計算しています。 float: left：カードを左に回り込ませることで、横一列に並べています。 @mediaクエリ：画面幅が