CSS 入門 — セレクタ・ボックスモデル・Flexbox / Grid・レスポンシブ・SCSS / Tailwind

CSS とは

CSS（Cascading Style Sheets）は、HTML 要素の見た目・レイアウトを指定するためのスタイルシート言語です。1996 年に W3C で最初の仕様 CSS1 が勧告されました。

「Cascading」はカスケード（連鎖適用）の意味。複数のスタイル指定があるとき、詳細度・記述順・継承のルールで優先順位が決まります。

適用方法

赤いテキスト

セレクタ

ボックスモデル

すべての要素は content → padding → border → margin の 4 層の箱で構成されます:

.box {
    width: 300px;
    height: 200px;
    padding: 20px;        /* 内側の余白 */
    border: 2px solid #333;
    margin: 16px auto;    /* 外側の余白、中央寄せ */

    /* box-sizing で計算方法を変更（推奨） */
    box-sizing: border-box;  /* width に padding+border 含む */
}

/* グローバルに border-box を適用するのが現代の定番 */
*, *::before, *::after {
    box-sizing: border-box;
}

Flexbox（1 次元レイアウト）

.container {
    display: flex;
    flex-direction: row;          /* row / column */
    justify-content: space-between; /* 主軸方向の配置 */
    align-items: center;           /* 交差軸方向の配置 */
    gap: 16px;                     /* 子要素間の余白 */
    flex-wrap: wrap;               /* 折り返し */
}

.item {
    flex: 1;              /* 等分で伸縮 */
    flex: 0 0 200px;      /* 固定幅 200px */
    flex: 1 1 300px;      /* 最低 300px、可能なら伸縮 */
}

Grid（2 次元レイアウト）

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 等分 */
    grid-template-columns: 200px 1fr 100px; /* 固定 + 可変 + 固定 */
    grid-template-rows: auto;
    gap: 20px;
}

/* レスポンシブグリッド（minmax + auto-fit） */
.responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

/* 領域指定 */
.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 200px 1fr;
}
header { grid-area: header; }
main { grid-area: main; }

レスポンシブデザイン（メディアクエリ）

/* モバイルファースト（デフォルトはモバイル） */
.container {
    padding: 16px;
}

/* タブレット以上 */
@media (min-width: 768px) {
    .container { padding: 24px; }
}

/* デスクトップ以上 */
@media (min-width: 1200px) {
    .container { padding: 32px; max-width: 1200px; margin: 0 auto; }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    body { background: #1a1a1a; color: #eee; }
}

/* モーション減らす */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

CSS 変数（カスタムプロパティ）

:root {
    --primary: #3b82f6;
    --primary-dark: #1e40af;
    --text: #1f2937;
    --bg: #ffffff;
    --radius: 8px;
    --shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn {
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.btn:hover {
    background: var(--primary-dark);
}

/* ダークモードで上書き */
[data-theme="dark"] {
    --text: #f3f4f6;
    --bg: #111827;
}

CSS 関連エコシステム

CSS3 の主な新機能

• Flexbox / Grid: モダンレイアウト
• カスタムプロパティ: --var による動的変数
• アニメーション: @keyframes、transition、transform
• angle / 単位: rem、vw、vh、vmin、ch、%
• 角丸 / 影: border-radius、box-shadow、filter: drop-shadow()
• グラデーション: linear-gradient()、radial-gradient()
• コンテナクエリ: @container で親サイズに応じたスタイル（2023〜）
• ネスト: SCSS のようなネスト記法をネイティブ対応（2023〜）

ブラウザ対応の確認: caniuse.com

新しい CSS 機能を使うときは https://caniuse.com/ でブラウザ対応状況を確認します。例: 「container query」「has selector」と検索すると、各ブラウザのバージョン別対応表が出ます。

FAQ

Q: Flexbox と Grid どちらを使う？
A: 1 次元の整列（ナビ、カード横並び）は Flexbox、2 次元のレイアウト（ページ全体の格子）は Grid。組み合わせて使うのが普通です。

Q: !important は使うべき？
A: 原則避ける。詳細度の戦いになり保守困難に。ユーティリティクラス（Tailwind 等）や、サードパーティ CSS の上書きが必要なときだけ。

Q: Tailwind は CSS の知識なしで使える？
A: 内部はただの CSS（flex justify-between p-4）なので、CSS の概念（フレックス、パディング）の理解は必要。むしろ Tailwind を学ぶ過程で CSS も身に付きます。

Q: モバイルファーストとデスクトップファーストどちら？
A: モバイルファースト推奨。min-width を使い、デフォルトをモバイル用に書き、画面が大きくなるにつれて拡張するのが今の主流です。