Lesson3-1：ボックス配置の基礎を理解しよう
Lesson3-2：ボックスサイズを変更しよう
Lesson3-3：ボックスを自在に配置しよう
Lesson3-4：画像を自在に配置しよう
Lesson3-5：画像のスタイルを変更しよう
Lesson3-6：背景画像を設定しよう
Lesson3-7：リンクボタンを設置しよう
Lesson3-8：リストとテーブルのスタイルを変更しよう
Lesson3-9：CSS変数を理解しよう
Lesson3-☆1：コピペして使える！カードレイアウト集 ◁今回はココ
Lesson3-☆2：見た目が良くて使いやすいHTML/CSSテンプレート６選
Lesson3-☆3：CSSのリセット＆ノーマライズとは？
ウェブデザインの中でもよく使われる「カードレイアウト」。
ブログの記事一覧、商品紹介、プロフィールカードなど、さまざまな場面で活躍する便利なデザインパターンです。
しかし、いざ自分でカードを作ろうとすると、
「シンプルだけどおしゃれなデザインってどう作ればいいの？」
「余白や影の調整がうまくできない…」
といった悩みにぶつかることもあるでしょう。
この記事では初心者でもすぐに使えるセンスの良いカードデザインの例を多数紹介します！すべてHTMLとCSSだけで簡単に実装できるので、コピペしてすぐに試せます。
さらに、それぞれのデザインには色やレイアウトのバリエーションも用意しているので、自分のサイトに合ったスタイルを選ぶことができます。
本記事では、以下の４つの内容を紹介します。
- カードレイアウトの基本（無料）
- センスの良いカードレイアウト例（会員向け）
- 応用的なカードデザイン（会員向け）
- カスタマイズ方法（会員向け）
<<前のページ
HTML/CSSの記事一覧
次のページ>>
カードレイアウトの基本
カードレイアウトは情報を見やすく整理し、直感的に理解しやすいデザインの一つです。
特にウェブサイトやアプリのデザインにおいて、記事一覧や商品紹介、プロフィールカードなど、さまざまな場面で活用されています。
カードレイアウトとは？
カードとは情報をコンパクトにまとめたボックスのことです。一般的に、カードの中には以下のような要素が含まれます。
- タイトル（例：「商品名」「記事タイトル」など）
- 画像（例：「商品画像」「プロフィール写真」など）
- 説明文（例：「商品の説明」「記事の概要」など）
- ボタン（例：「詳細を見る」「購入する」など）
このようにカードは一つの情報をわかりやすく伝える役割を持っています。
カードレイアウトの特徴
カードレイアウトには、以下のような特徴があります。
- 視認性が高い カードごとに情報が整理されるため、直感的に内容を理解しやすくなります。
- 自由度が高い カードの大きさや配置、デザインを調整することで、さまざまなスタイルに適応できます。
- レスポンシブデザインに適している カードを並べることで、スマートフォンやタブレットでも見やすいデザインを作ることができます。（※今回はレスポンシブ対応は扱いません）
基本的なカードのHTML構造
まず、シンプルなカードを作成する基本のHTML構造を確認しましょう。
<div class="card">
<h2>カードのタイトル</h2>
<p>ここに説明文が入ります。</p>
</div>上記のコードでは<div> タグでカード全体を囲み、その中に <h2> でタイトル、<p> で説明文を配置しています。
基本的なCSSスタイル
次にこのHTMLにスタイルを適用して、カードらしいデザインに整えます。
.card {
width: 300px; /* カードの横幅 */
padding: 20px; /* 内側の余白 */
border: 1px solid #ddd; /* 枠線 */
border-radius: 8px; /* 角を丸くする */
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* 影をつける */
}このCSSを適用することで、枠線と影のあるシンプルなカードデザインが完成します。