Lesson１：HTML入門編
Lesson２：CSS入門編
Lesson３：CSS応用編
・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を適用することで、枠線と影のあるシンプルなカードデザインが完成します。
センスの良いカードレイアウト例
ここからは、実際に使えるカードレイアウトのデザインを紹介します。
「シンプル」「ナチュラル」「キュート」「ビジネス」 の4つのスタイルに分けて紹介しますので、気に入ったデザインをコピペして、すぐに試してみてください。
文字の色やボーダーのデザインなども雰囲気に合わせて調整しています。
シンプルなカード
まずは、最も基本的なカードデザインを紹介します。
枠線と余白を適度に取り、スッキリとした見た目に仕上げています。 ベースとなるコードは以下の通りです。
<div class="card">
<h2>タイトル</h2>
<p>シンプルでどんな場面でも使いやすいカードです。</p>
</div>.card {
width: 300px;
padding: 20px;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
font-family: sans-serif;
}カラーバリエーション
上記のベースコードに、以下のCSSを追加してみましょう。
/* シンプル */
.card.simple {
background-color: #ffffff;
border: 1px solid #ddd;
color: #333;
}
/* ナチュラル */
.card.natural {
background-color: #f5f5dc;
border: 1px solid #d2b48c;
color: #5c4033;
font-family: "Georgia", serif;
}
/* キュート */
.card.cute {
background-color: #ffebee;
border: 2px solid #ff4081;
color: #d81b60;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
}
/* ビジネス */
.card.business {
background-color: #2c3e50;
border: 1px solid #34495e;
color: #ecf0f1;
font-family: "Arial", sans-serif;
}画像付きカード
次は画像を含んだカードレイアウトです。
商品紹介やブログ記事のサムネイルとして活用できます。 ベースとなるコードは以下の通りです。
<div class="card with-image natural">
<img src="example.jpg" alt="画像">
<h2>タイトル</h2>
<p>画像を含んだカードのデザイン例です。</p>
</div>.card.with-image {
width: 300px;
padding: 15px;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.card.with-image img {
width: 100%;
border-radius: 8px;
margin-bottom: 10px;
}カラーバリエーション
上記のベースコードに、以下のCSSを追加してみましょう。
/* シンプル */
.card.with-image.simple {
background-color: #ffffff;
border: 1px solid #ddd;
color: #333;
}
/* ナチュラル */
.card.with-image.natural {
background-color: #f0e6d6;
border: 1px solid #c4a484;
color: #5c4033;
font-family: "Georgia", serif;
}
/* キュート */
.card.with-image.cute {
background-color: #ffc1e3;
border: 2px solid #ff4081;
color: #d81b60;
font-weight: bold;
}
/* ビジネス */
.card.with-image.business {
background-color: #34495e;
border: 1px solid #2c3e50;
color: #ecf0f1;
}横並びのカード
次は複数のカードを横に並べたい場合のレイアウトです。
ベースとなるコードは以下の通りです。
<div class="card-container">
<div class="card natural">
<h3>カード1</h3>
<p>説明文が入ります。</p>
</div>
<div class="card cute">
<h3>カード2</h3>
<p>説明文が入ります。</p>
</div>
<div class="card business">
<h3>カード3</h3>
<p>説明文が入ります。</p>
</div>
</div>.card-container {
display: flex;
justify-content: center;
gap: 15px;
}
.card-container .card {
width: 250px;
padding: 20px;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}カラーバリエーション
上記のベースコードに、以下のCSSを追加してみましょう。
/* シンプル */
.card-container .card.simple {
background-color: #ffffff;
border: 1px solid #ddd;
color: #333;
}
/* ナチュラル */
.card-container .card.natural {
background-color: #e8e6dc;
border: 1px solid #bca98d;
color: #5c4033;
}
/* キュート */
.card-container .card.cute {
background-color: #ff80ab;
border: 2px solid #f50057;
color: #ffffff;
}
/* ビジネス */
.card-container .card.business {
background-color: #1a1a1a;
border: 1px solid #444;
color: #ffffff;
}次の章では、「ボーダーカード」「影付きカード」「ボタン付きカード」などの応用デザイン を紹介していきます。
応用的なカードデザイン
ここでは、さらにデザイン性を高めた応用的なカードデザインを紹介します。
シンプルなカードにボーダーや影の装飾を加えたり、ボタンを追加することで、より実用的なレイアウトを作ることができます。
ボーダーカード
左端または上部にアクセントのボーダーをつけたカードです。
特にラベルやカテゴリを強調したい場合 に適しています。
<div class="card bordered">
<h2>タイトル</h2>
<p>ボーダーがアクセントになったカードです。</p>
</div>.card.bordered {
width: 300px;
padding: 20px;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
border-left: 8px solid;
}カラーバリエーション
上記のベースコードに、以下のCSSを追加してみましょう。
/* シンプル */
.card.bordered.simple {
background-color: #ffffff;
border-left-color: #ddd;
color: #333;
}
/* ナチュラル */
.card.bordered.natural {
background-color: #f5f5dc;
border-left-color: #d2b48c;
color: #5c4033;
}
/* キュート */
.card.bordered.cute {
background-color: #ffebee;
border-left-color: #ff4081;
color: #d81b60;
}
/* ビジネス */
.card.bordered.business {
background-color: #2c3e50;
border-left-color: #3498db;
color: #ecf0f1;
}影付きカード
box-shadow を活用したスタイリッシュなカードデザインです。
ふんわり浮いているようなデザインや、強調された影で立体的な見た目など、印象を変えることができます。
<div class="card shadow simple">
<h2>タイトル</h2>
<p>影をつけて立体感のあるデザインにしました。</p>
</div>.card.shadow {
width: 300px;
padding: 20px;
border-radius: 8px;
text-align: center;
background-color: #fff;
}カラーバリエーション（影の違い）
上記のベースコードに、以下のCSSを追加してみましょう。
/* シンプル（控えめな影） */
.card.shadow.simple {
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}
/* ナチュラル（柔らかい影） */
.card.shadow.natural {
box-shadow: 4px 4px 12px rgba(139, 69, 19, 0.2);
}
/* キュート（大きくて明るい影） */
.card.shadow.cute {
box-shadow: 6px 6px 14px rgba(255, 105, 180, 0.3);
}
/* ビジネス（はっきりとした影） */
.card.shadow.business {
box-shadow: 4px 4px 12px rgba(44, 62, 80, 0.5);
}ボタン付きカード
下部にクリックできるボタンを配置した実用的なデザインです。
CTA（コール・トゥ・アクション）を強調したい場合に便利です。
<div class="card button-card business">
<h2>タイトル</h2>
<p>クリックできるボタン付きのカードです。</p>
<a href="#" class="btn">詳細を見る</a>
</div>.card.button-card {
width: 300px;
padding: 20px;
border-radius: 8px;
text-align: center;
background-color: #fff;
}
.card.button-card .btn {
display: inline-block;
margin-top: 10px;
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}カラーバリエーション
上記のベースコードに、以下のCSSを追加してみましょう。
/* シンプル */
.card.button-card.simple {
background-color: #ffffff;
border: 1px solid #ddd;
color: #333;
}
.card.button-card.simple .btn {
background-color: #ddd;
color: #333;
}
/* ナチュラル */
.card.button-card.natural {
background-color: #f5f5dc;
border: 1px solid #d2b48c;
color: #5c4033;
}
.card.button-card.natural .btn {
background-color: #d2b48c;
color: #fff;
}
/* キュート */
.card.button-card.cute {
background-color: #ffebee;
border: 2px solid #ff4081;
color: #d81b60;
}
.card.button-card.cute .btn {
background-color: #ff4081;
color: #fff;
}
/* ビジネス */
.card.button-card.business {
background-color: #2c3e50;
border: 1px solid #34495e;
color: #ecf0f1;
}
.card.button-card.business .btn {
background-color: #3498db;
color: #fff;
}グラデーションカード
背景に linear-gradient を使用することで、モダンな雰囲気を演出できます。
デザインの印象を大きく変えることができるため、特定のテーマに合わせたカード作りに役立ちます。
<div class="card gradient cute">
<h2>タイトル</h2>
<p>グラデーション背景を使用した、スタイリッシュなカードです。</p>
</div>.card.gradient {
width: 300px;
padding: 20px;
border-radius: 8px;
text-align: center;
color: white;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}カラーバリエーション
上記のベースコードに、以下のCSSを追加してみましょう。
/* シンプル（落ち着いたブルー系グラデーション） */
.card.gradient.simple {
background: linear-gradient(135deg, #74ebd5, #acb6e5);
}
/* ナチュラル（柔らかいベージュ系グラデーション） */
.card.gradient.natural {
background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
}
/* キュート（ビビッドなピンク系グラデーション） */
.card.gradient.cute {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
/* ビジネス（シャープなネイビー系グラデーション） */
.card.gradient.business {
background: linear-gradient(135deg, #283048, #859398);
}
カスタマイズ方法
ここまで紹介したデザインを、さらに自分好みにカスタマイズする方法を紹介します。
フォントを変更
フォントを変更するだけでカードの印象が大きく変わります。
以下のようにGoogle Fontsを活用して、洗練されたデザインに仕上げることができます。
.card {
font-family: 'Poppins', sans-serif;
}font-family: 'Poppins', sans-serif;（モダンで洗練された印象）font-family: 'Lora', serif;（クラシックでエレガントな印象）font-family: 'Fredoka One', cursive;（ポップでかわいい印象）
ボーダーのデザインを変更
ボーダーの種類を変更することで、シンプルなカードでも個性を出すことができます。
.card {
border: 3px dashed #555; /* 点線のボーダー */
}border: 2px solid #000;（シンプルな実線）border: 4px double #ff4081;（二重線）border: 5px dotted #3498db;（点線）
影の強弱を調整
影の強さを調整することで、フラットなデザインにすることも、立体感を強調することもできます。
.card {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* しっかりした影 */
}box-shadow: none;（影なしのフラットデザイン）box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);（柔らかい影）box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);（はっきりとした影）
まとめ
ここまで、さまざまなカードレイアウトのデザインを紹介してきました。
この記事を通して、HTMLとCSSだけで魅力的なカードデザインを作る方法を学ぶことができたかと思います。
今回紹介したカードデザインは、すべて コピペしてすぐに使える ものばかりです。
まずはシンプルなデザインから試し、自分のサイトに合ったカスタマイズ をしてみましょう！
<<前のページ
HTML/CSSの記事一覧
次のページ>>
初めてのWebサイトを作ろう3-☆1
このサイトの Lesson1-1（HTML学習の入り口） かLesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
Lesson3-☆1のまとめノートを追加しよう
下記のHTMLコードは、このLesson3-1で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite3-1.html」という名前で保存し、「lesson3（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson3-☆1</title> <link rel="stylesheet" href="style/styles-lesson3.css"> </head> <body> <header> <h1>Lesson3-☆1：コピペして使える！カードレイアウト集</h1> </header> <div class="container"> <section> <h2>目的・要点</h2> <p>ウェブデザインにおいて、<strong>カードレイアウト</strong>は視認性が高く、情報を整理しやすいデザイン手法の一つです。本記事では、初心者でも簡単に実装できるセンスの良いカードデザインの例を紹介し、HTMLとCSSのみで作成する方法を学びます。</p> <p>このレッスンの到達目標は、カードレイアウトの基本を理解し、実際に活用できるようになることです。</p> </section> <section> <h2>このレッスンで学習した内容</h2> <h3>カードレイアウトの基本</h3> <ul> <li>カードとは、タイトル・画像・説明文・ボタンなどを含む情報のまとまり</li> <li>視認性が高く、情報を整理しやすい</li> <li>スマートフォンやタブレットにも適したデザイン</li> </ul> <h3>基本的なカードの作成</h3> <ul> <li><code>div</code> タグを使用したシンプルなカード構造</li> <li><code>border-radius</code> や <code>box-shadow</code> を使ったデザインの向上</li> </ul> <h3>カードのカスタマイズ方法</h3> <ul> <li>カラーバリエーション（シンプル、ナチュラル、キュート、ビジネス）</li> <li>画像付きカードの作成方法</li> <li>横並びのカード（<code>display: flex;</code>）を使ったレイアウト</li> <li>応用デザイン（ボーダーカード、影付きカード、ボタン付きカード、グラデーションカード）</li> </ul> </section> <section> <h2>トピック・豆知識</h2> <ul> <li><code>box-shadow</code> を活用すると、立体感のあるデザインが作れる。</li> <li><code>border</code> のスタイル（点線・二重線など）を変えるだけで印象が変わる。</li> <li><code>font-family</code> を変更すると、デザインの雰囲気が大きく変わる。</li> <li><code>linear-gradient</code> を背景に適用すると、モダンなデザインが作れる。</li> </ul> </section> <section> <h2>まとめ</h2> <p>本レッスンでは、<strong>カードレイアウトの基本</strong>とそのカスタマイズ方法について学びました。カードデザインはウェブサイトで頻繁に使われる要素であり、HTMLとCSSのみで簡単に作成できます。まずはシンプルなデザインから試し、少しずつ自分好みにカスタマイズしていきましょう。</p> </section> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </div> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>これでLesson3-☆1の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^