Webデザインの印象を大きく左右するのが
ボタン（Button） と カード（Card） のデザインです。
- ブログの見出し下のボタン
- 商品紹介カード
- お問い合わせボタン
- 掲示カード型レイアウト
こうした UI パーツを作れると、
Webサイト全体が一気に洗練されます。
この記事では、
初心者でも簡単に“おしゃれに見える”ボタン＆カードの作り方 を
実例ベースで丁寧に解説します。
まずは「デザインの基本原則」を知ろう
初心者でも理解しておくべき3つの原則です👇
① 余白（padding）が大事
→ 文字の周りに十分な余白があると、読みやすく綺麗に見える
② コントラスト（色の差）
→ ボタンは背景と色をはっきり分けるとクリックしやすい
③ 一貫性
→ サイト全体で統一したデザインを使うとプロっぽい
これらを踏まえて、実際のコードを書いていきます。
おしゃれなボタンを作ってみよう（基本編）
まずは最もシンプルで綺麗なボタンから。
.btn {
display: inline-block;
padding: 12px 24px;
background: #3498db;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: 700;
transition: 0.3s;
}
.btn:hover {
background: #2980b9;
}HTML：
<a href="#" class="btn">詳しく見る</a>✔ ポイント
- border-radius で角丸
- transition で hover アニメーション
- 色は青系にしてクリック感UP
- .btn:hover→この:hoverはマウスを要素の上に置いたときにどうなるかを指定できます。
例では背景の色を変えています
流行りの「アウトラインボタン」
背景なしで、線だけのスタイル。
.btn-outline {
display: inline-block;
padding: 10px 22px;
border: 2px solid #3498db;
color: #3498db;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
transition: 0.3s;
}
.btn-outline:hover {
background: #3498db;
color: #fff;
}HTML：
<a href="#" class="btn-outline">詳しく見る</a>→ シンプルで洗練された印象に。
影付き「立体ボタン」（存在感強め）
.btn-shadow {
display: inline-block;
padding: 12px 24px;
background: #2ecc71;
color: #fff;
border-radius: 6px;
text-decoration: none;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: 0.3s;
}
.btn-shadow:hover {
box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}HTML：
<a href="#" class="btn-shadow">詳しく見る</a>→ 商品LPなどでよく使われるスタイル。
クリック感のある「押し込みボタン」
.btn-press {
display: inline-block;
padding: 12px 24px;
background: #e74c3c;
color: #fff;
border-radius: 6px;
text-decoration: none;
box-shadow: 0 4px #c0392b;
transition: 0.1s;
}
.btn-press:active {
box-shadow: 0 2px #c0392b;
transform: translateY(2px);
}HTML：
<a href="#" class="btn-press">詳しく見る</a>→ スマホとの相性抜群。
カードデザイン（基本の白カード）
.card {
background: #fff;
padding: 20px;
border-radius: 10px;
border: 1px solid #eee;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}HTML：
<div class="card">
<h3>タイトル</h3>
<p>ここに説明文が入ります。</p>
</div>カードを複数並べる（Grid利用）
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}HTML：
<div class="cards">
<div>
<h3>タイトル</h3>
<p>ここに説明文が入ります。</p>
</div>
<div>
<h3>タイトル</h3>
<p>ここに説明文が入ります。</p>
</div>
<div>
<h3>タイトル</h3>
<p>ここに説明文が入ります。</p>
</div>
<div>
<h3>タイトル</h3>
<p>ここに説明文が入ります。</p>
</div>
<div>
<h3>タイトル</h3>
<p>ここに説明文が入ります。</p>
</div>
<div>
<h3>タイトル</h3>
<p>ここに説明文が入ります。</p>
</div>
</div>→ シンプルなカード一覧が作れる。
画像付きカード（ブログや商品ページ向け）
.card-img {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.card-img img {
width: 100%;
display: block;
}
.card-img .content {
padding: 16px;
}HTML：
<div class="card-img">
<img src="https://source.unsplash.com/600x400/?coding" alt="">
<div class="content">
<h3>サービス名</h3>
<p>説明文が入ります。</p>
</div>
</div>元画像の大きさによって表示のされ方が異なります。
画像の調整のやり方はwidthやheightなどで指定してみましょう。
カード＋ホバーアニメーション（おしゃれ度UP）
.card-hover {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: 0.3s;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}HTML：
<div class="card-hover">
<h3>タイトル</h3>
<p>ここに説明文が入ります。</p>
</div>→ マウスを乗せるとフワッと浮く人気デザイン。
ボタン×カードの組み合わせ（実用例）
HTML：
<div class="card">
<h3>HTML学習</h3>
<p>初心者向けに基本から丁寧に解説します。</p>
<a href="#" class="btn">詳しく見る</a>
</div>→ ブログ・サービス紹介ページを作る時の定番構成。
この記事のまとめ
- ボタンは padding と色のコントラストが命
- hover アニメーションでクリック感UP
- カードは「白 + 影 + 角丸」で一気にプロっぽくなる
- Grid でカードの一覧を簡単に作れる
- ボタンとカードの組み合わせがWeb制作の基礎
ではでは！次回！：HTML/CSS入門⑭ レスポンシブ対応（スマホ表示の作り方）
コメント