10日で覚えるCSSDay 5: 色と背景
第 510日で覚えるCSS

Day 5: 色と背景

今日学ぶこと

  • カラーシステムの設計
  • グラデーション（linear, radial, conic）
  • 背景画像とプロパティ
  • 透明度とブレンドモード
  • box-shadow と影の表現

カラーシステムの設計

プロジェクト全体で一貫した色を使うために、CSS変数でカラーパレットを定義しましょう。

:root {
    /* プライマリカラー */
    --color-primary: #3b82f6;
    --color-primary-light: #93c5fd;
    --color-primary-dark: #1d4ed8;

    /* ニュートラル */
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-500: #64748b;
    --color-gray-700: #334155;
    --color-gray-900: #0f172a;

    /* セマンティック */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* テキスト */
    --color-text: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-500);

    /* 背景 */
    --color-bg: white;
    --color-bg-secondary: var(--color-gray-50);
}

flowchart TB
    subgraph Palette["カラーパレット設計"]
        Primary["プライマリ<br>#3b82f6"]
        Neutral["ニュートラル<br>#f8fafc 〜 #0f172a"]
        Semantic["セマンティック<br>success / warning / error"]
    end
    style Primary fill:#3b82f6,color:#fff
    style Neutral fill:#64748b,color:#fff
    style Semantic fill:#22c55e,color:#fff

グラデーション

線形グラデーション

.gradient-1 {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
}

.gradient-2 {
    background: linear-gradient(135deg, #3b82f6 0%, #22c55e 100%);
}

.gradient-3 {
    background: linear-gradient(
        to bottom,
        #3b82f6 0%,
        #8b5cf6 50%,
        #ec4899 100%
    );
}
値 説明
to right 左→右
to bottom 上→下（デフォルト）
to bottom right 左上→右下
135deg 135度の角度

放射状グラデーション

.radial {
    background: radial-gradient(circle, #3b82f6, #1e293b);
}

.radial-ellipse {
    background: radial-gradient(ellipse at top left, #3b82f6 0%, transparent 70%);
}

円錐グラデーション

.conic {
    background: conic-gradient(#3b82f6, #8b5cf6, #ec4899, #3b82f6);
    border-radius: 50%;
}

背景画像

.hero {
    background-image: url("hero.jpg");
    background-size: cover;           /* 領域全体をカバー */
    background-position: center;      /* 中央配置 */
    background-repeat: no-repeat;     /* 繰り返しなし */
    background-attachment: fixed;     /* スクロールで固定 */
}

/* ショートハンド */
.hero {
    background: url("hero.jpg") center / cover no-repeat;
}
プロパティ 値 説明
background-size cover アスペクト比を保持して全体をカバー
contain 全体が収まるサイズ
100% auto 幅100%、高さ自動
background-position center 中央
top right 右上
background-repeat no-repeat 繰り返しなし
repeat 繰り返す

グラデーション + 画像の重ね合わせ

.hero-overlay {
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        url("hero.jpg") center / cover no-repeat;
    color: white;
}

テクニック: 画像の上にグラデーションオーバーレイを重ねると、テキストの可読性が向上します。

透明度

opacity

.transparent { opacity: 0.5; }    /* 要素全体を半透明に */
.invisible   { opacity: 0; }      /* 完全に透明（スペースは残る） */

rgba / hsla

.overlay {
    background-color: rgb(0 0 0 / 0.5);    /* 背景だけ半透明 */
}

違い: opacityは要素全体（テキスト含む）を透明にしますが、rgbaは色だけを透明にできます。

box-shadow

/* 基本: x y blur spread color */
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow    { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); }

/* 内側の影 */
.inset { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }

/* 複数の影 */
.multi-shadow {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24);
}

/* 色付き影 */
.glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

text-shadow

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.neon {
    text-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6;
}

実践: ヒーローセクション

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-primary: #3b82f6;
    --color-primary-dark: #1d4ed8;
}

.hero {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(139, 92, 246, 0.9)),
        url("hero-bg.jpg") center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 32px;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 32px;
    opacity: 0.9;
}

.hero-button {
    display: inline-block;
    background: white;
    color: var(--color-primary);
    padding: 12px 32px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-button:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* カード */
.features {
    padding: 64px 16px;
    max-width: 900px;
    margin: 0 auto;
}

.card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--color-primary);
}

.card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

まとめ

概念 説明
CSS変数 カラーパレットの一元管理
linear-gradient 線形グラデーション
radial-gradient 放射状グラデーション
background 背景画像の制御
opacity / rgba 透明度の制御
box-shadow 影の表現

重要ポイント

  1. CSS変数でカラーパレットを管理する
  2. オーバーレイで画像上のテキスト可読性を確保
  3. opacityとrgbaの違いを理解する
  4. box-shadowで奥行きを表現する

練習問題

問題1: 基本

CSS変数を使ったカラーパレットを定義し、3種類のメッセージボックス（success, warning, error）を作成してください。

問題2: 応用

グラデーションオーバーレイ付きのヒーローセクションを作成してください。

チャレンジ問題

3段階の影（hover前、hover中、クリック中）を持つカードコンポーネントを作成してください。

参考リンク

次回予告: Day 6では「Flexbox」について学びます。モダンCSSの中核的なレイアウト技術をマスターしましょう。