Skip to content
Dev Guides
Playground

6.デザインパターン

学習目標

  • ウェブサイトでよく使われるデザインパターンを知っている
  • 各パターンがどの CSS プロパティで実現されているか理解できる
  • 「こういうデザインにしたい」を AI に伝えるための語彙がある

HTML と CSS だけでもページは作れますが、実際のウェブサイトを見ると、カード型のレイアウト、ホバーで色が変わるボタン、背景画像の上に文字を重ねるヒーローなど、さまざまなデザインパターンが使われています。このドキュメントでは、よく使うパターンをコード例とあわせて紹介します。これらのパターンを知っておくと、サイトを作るときに使える選択肢が増えます。

1. カード

Section titled “1. カード”

ウェブサイトで非常によく見かける、コンテンツを四角い枠の中にまとめるパターンです。影と角丸を組み合わせて作ります。

<div class="card">
  <h2>趣味</h2>
  <p>読書と映画鑑賞が好きです。週末はカフェで本を読んでいます。</p>
</div>
.card {
  background-color: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

border-radius: 8px: 要素の角を丸くします。値が大きいほど丸みが増します。

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1): 要素に影をつけます。値は左から順に「横のずれ」「縦のずれ」「ぼかしの大きさ」「影の色」です。rgba(0, 0, 0, 0.1) は黒の 10% 透明度で、薄い影になります。

影の値を変えると印象が変わります。たとえば box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) にすると、影が大きく濃くなり、より浮き上がって見えます。

<div class="card">
<h2>趣味</h2>
<p>読書と映画鑑賞が好きです。週末はカフェで本を読んでいます。</p>
</div>

2. ボタン

Section titled “2. ボタン”

リンクをボタンのように見せるパターンです。<a> タグに CSS を適用して作ります。

<a href="https://github.com" class="btn">GitHub を見る</a>
.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #2c3e50;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 16px;
  transition: background-color 0.3s;
}


.btn:hover {
  background-color: #1a252f;
}

display: inline-block: <a> タグは初期状態では padding が上下に効きません。inline-block にすることで、テキストのように横に並びつつ padding が正しく適用されるようになります。

text-decoration: none: リンクの下線を消します。

.btn:hover: マウスを乗せたときに背景色を少し暗くしています。:hover と transition の仕組みはセクション3で説明します。

<a href="https://github.com" class="btn">GitHub を見る</a>

3. ホバーエフェクト

Section titled “3. ホバーエフェクト”

マウスカーソルを乗せたときに見た目が変わると、「クリックできる」ことが伝わります。

3-1. 色が変わるリンク

Section titled “3-1. 色が変わるリンク”

:hover という 擬似クラス を使います。

<a href="https://example.com" class="link">サンプルサイト</a>
.link {
  color: #2c3e50;
  text-decoration: none;
}


.link:hover {
  color: #e74c3c;
}

.link:hover は「.link にマウスが乗っているとき」という意味です。マウスを乗せると文字色が赤に変わります。

<a href="https://example.com" class="link">サンプルサイト</a>

3-2. なめらかな変化

Section titled “3-2. なめらかな変化”

:hover だけだと変化が一瞬です。transition を加えると、なめらかにアニメーションします。

.link {
  color: #2c3e50;
  text-decoration: none;
  transition: color 0.3s;
}


.link:hover {
  color: #e74c3c;
}

transition: color 0.3s は「color の変化を 0.3 秒かけて行う」という意味です。マウスを乗せたときに色がじわっと変わる効果が得られます。

複数のプロパティをアニメーションさせたい場合は transition: all 0.3s と書きます。

<a href="https://example.com" class="link">サンプルサイト</a>

4. 装飾線

Section titled “4. 装飾線”

border を使って要素にアクセントを加えるパターンです。

4-1. 左側のアクセント線

Section titled “4-1. 左側のアクセント線”

左端に色つきの線を入れると、引用や強調のスタイルになります。

<p class="accent">Web 開発に興味があります。最近は JavaScript を勉強中です。</p>
.accent {
  border-left: 4px solid #e74c3c;
  padding-left: 16px;
}

border-left で左辺に線を引き、padding-left でテキストを線から離しています。

<p class="accent">Web 開発に興味があります。最近は JavaScript を勉強中です。</p>

4-2. 水平線のカスタマイズ

Section titled “4-2. 水平線のカスタマイズ”

セクション間に区切り線を入れるには、HTML の <hr> タグを使います。

<h2>趣味</h2>
<p>読書と映画鑑賞が好きです。</p>


<hr>


<h2>スキル</h2>
<p>HTML と CSS を勉強中です。</p>
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 32px 0;
}

ブラウザーの初期設定では <hr> は目立たない線ですが、CSS で太さ・色・余白を調整できます。

<h2>趣味</h2>
<p>読書と映画鑑賞が好きです。</p>

<hr>

<h2>スキル</h2>
<p>HTML と CSS を勉強中です。</p>

5. 背景画像

Section titled “5. 背景画像”

5-1. 背景画像の指定

Section titled “5-1. 背景画像の指定”

ページ冒頭に大きな見せ場を作りたいときは、<div> で囲んで背景画像を当てます。こうしたパターンを ヒーロー と呼びます。

<div class="hero">
  <h1>中村悠</h1>
  <p>エンジニア / 東京都在住</p>
</div>
.hero {
  background-image: url("images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  padding: 64px 24px;
}

background-image: 背景に使う画像ファイルを指定します。

background-size: cover: 画像を要素全体に広げます。画像の比率を保ったまま、余白が出ないようにトリミングされます。

background-position: center: 画像の中央を基準にトリミングします。

<div class="hero">
<h1>中村悠</h1>
<p>エンジニア / 東京都在住</p>
</div>

5-2. 背景画像上のテキストの可読性

Section titled “5-2. 背景画像上のテキストの可読性”

背景画像の上に白い文字を置くと、画像によっては読みにくくなります。画像の上に半透明の暗い色を重ねることで解決できます。

.hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                    url("images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  padding: 64px 24px;
}

linear-gradient は本来グラデーション（色の変化）を作るためのプロパティです。ここでは同じ色（黒の 50% 透過）を2回指定することで、均一な半透明の層として使っています。この層が画像の上に重なり、白い文字が読みやすくなります。

<div class="hero">
<h1>中村悠</h1>
<p>エンジニア / 東京都在住</p>
</div>

6. リンクリスト

Section titled “6. リンクリスト”

自己紹介サイトでは、SNS や GitHub へのリンクをリストで並べることがよくあります。

<ul class="link-list">
  <li><a href="https://github.com">GitHub</a></li>
  <li><a href="https://example.com">ブログ</a></li>
</ul>
.link-list {
  list-style: none;
  padding: 0;
}


.link-list li {
  margin-bottom: 8px;
}


.link-list a {
  color: #2c3e50;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}


.link-list a:hover {
  border-bottom-color: #2c3e50;
}

.link-list li や .link-list a のように、セレクターをスペースで区切って書くと「.link-list の中にある li」「.link-list の中にある a」という意味になります。これを 子孫セレクター と呼びます。クラスセレクターが「特定の要素」を指定するのに対して、子孫セレクターは「特定の要素の中にある要素」を指定するものです。

ホバー時に下線がふわっと現れるエフェクトは、border-bottom を透明（transparent）から色あり（#2c3e50）に変化させ、transition でなめらかにアニメーションさせることで実現しています。

<ul class="link-list">
<li><a href="https://github.com">GitHub</a></li>
<li><a href="https://example.com">ブログ</a></li>
</ul>

7. 組み合わせの例

Section titled “7. 組み合わせの例”

これまでに紹介したパターンを組み合わせると、実際のウェブサイトに近い形になります。シンプルなプロフィールサイトを例に、各パターンがどこに使われているかを見ていきます。

  • ヒーロー: 背景画像（5-1）+ ボタン（2）
  • プロフィール: コンテナー + 2カラム（レイアウト 2-1, 2-2）+ プロフィール画像（円形）+ 左アクセント線（4-1）
  • 写真日誌: カードグリッド（レイアウト 2-3）+ カード（1）+ ホバー（3）
  • リンク: リンクリスト（6）+ ホバー（3）
<div class="hero">
<div class="hero-banner"></div>
<div class="hero-intro">
  <h1 class="hero-name">中村悠</h1>
  <p class="hero-lead">2022年から、月に1〜2回のペースで東京の街を歩いてフィルムで撮っています。撮った写真と、その日入った喫茶店のメモを、ここに残しています。</p>
  <a href="#journal" class="btn">最近の写真を見る</a>
</div>
</div>

<main class="container">
<section>
  <h2>プロフィール</h2>
  <div class="two-col">
    <div class="main-col">
      <img src="/profile-avatar.jpg" alt="プロフィール写真" class="avatar">
      <p class="lead">神奈川出身、世田谷在住。Olympus PEN-FT で街を歩きます。月に一度、自家現像。普段はフロントエンドのエンジニアをしています。</p>
      <p class="quote">いま使っているフィルムは Kodak Gold 200。落ち着いた色味が好きで、ここ数年これしか使っていません。</p>
    </div>
    <aside class="side-col">
      <ul class="facts">
        <li>世田谷区</li>
        <li>Olympus PEN-FT (1966)</li>
        <li>Kodak Gold 200</li>
        <li>2022年〜</li>
      </ul>
    </aside>
  </div>
</section>

<section id="journal">
  <h2>写真日誌</h2>
  <div class="card-grid">
    <div class="card">
      <img src="/journal-1.jpg" alt="下北沢、ランプの午後" class="card-image">
      <div class="card-body">
        <p class="card-date">2024.04</p>
        <h3 class="card-title">下北沢、ランプの午後</h3>
        <p class="card-text">古い純喫茶『ランプ』で1時間。窓辺のスポットが、ちょうどよく光っていた。</p>
      </div>
    </div>
    <div class="card">
      <img src="/journal-2.jpg" alt="大塚、銭湯帰りの夕暮れ" class="card-image">
      <div class="card-body">
        <p class="card-date">2024.03</p>
        <h3 class="card-title">大塚、銭湯帰りの夕暮れ</h3>
        <p class="card-text">銭湯のあと、商店街の灯りを撮った。Kodak Gold の温度感がよく出る時間。</p>
      </div>
    </div>
    <div class="card">
      <img src="/journal-3.jpg" alt="神保町、古本屋の棚" class="card-image">
      <div class="card-body">
        <p class="card-date">2024.02</p>
        <h3 class="card-title">神保町、古本屋の棚</h3>
        <p class="card-text">棚と棚のあいだに差し込む自然光。35mm で切り取るのが好きな構図。</p>
      </div>
    </div>
  </div>
</section>

<section>
  <h2>リンク</h2>
  <ul class="link-list">
    <li><a href="https://github.com">GitHub</a></li>
    <li><a href="https://example.com">写真ブログ</a></li>
    <li><a href="mailto:hello@example.com">メール</a></li>
  </ul>
</section>
</main>

<footer class="site-footer">
<p>&copy; 2025 中村悠</p>
</footer>

8. 演習

Section titled “8. 演習”

(演習ファイル準備中)