1. 👋 はじめに
前回はWebページの仕組みとHTMLの基礎を学びました。
今回は CSS を解説します！
CSSがあると何が変わるの？
CSSなし：白い背景に黒いテキストが並ぶだけ 😴
CSSあり：色・フォント・余白・レイアウトが整った美しいページに 🎨
この記事を読めば：
- ✅ CSSの書き方・セレクターがわかる
- ✅ ボックスモデルが理解できる
- ✅ Flexbox・Gridでレイアウトが組める
- ✅ レスポンシブデザインの考え方がわかる
- ✅ Tailwind・shadcn/ui・Bootstrapの違いがわかる
2. 🎨 CSSとは？
一言で言うと
CSS（Cascading Style Sheets）は
「Webページの見た目を装飾するための言語」です。
HTMLが「骨格」なら、CSSは「肌・服・化粧」に当たります。
CSSの書き方（3種類）
<!-- ① 外部ファイル（推奨）：別ファイルに書いてlinkタグで読み込む -->
<head>
<link rel="stylesheet" href="style.css" />
</head>
<!-- ② 内部スタイル：HTMLファイルのstyleタグに書く -->
<head>
<style>
h1 { color: red; }
</style>
</head>
<!-- ③ インラインスタイル：タグに直接書く（原則避ける） -->
<h1 style="color: red;">タイトル</h1>
| 方法 | 推奨度 | 理由 |
|---|---|---|
| 外部ファイル | ✅ 推奨 | HTMLとCSSを分離・複数ページで共有できる |
| 内部スタイル | ⚠️ 限定的 | 小さなページや試し書きのとき |
| インライン | ❌ 原則避ける | 管理が大変・上書きしにくい |
3. 🎯 セレクター：どの要素にスタイルを当てるか
/* タグセレクター：そのタグすべてに適用 */
h1 {
color: red;
}
/* クラスセレクター：class="card" の要素に適用 */
.card {
background: white;
border: 1px solid gray;
}
/* IDセレクター：id="header" の要素に適用 */
#header {
background: navy;
}
/* 子孫セレクター：nav の中の a タグに適用 */
nav a {
text-decoration: none;
}
/* 擬似クラス：ホバー時のスタイル */
button:hover {
background: darkblue;
}
/* 擬似クラス：最初の子要素 */
li:first-child {
font-weight: bold;
}
セレクターの優先順位
CSSは複数のスタイルが競合したとき、優先順位（詳細度） が高いものが勝ちます。
| 優先順位 | セレクター | 例 |
|---|---|---|
| 最高（使わない方がいい） | !important |
color: red !important; |
| 高 | IDセレクター | #header { } |
| 中 | クラスセレクター | .card { } |
| 低 | タグセレクター | h1 { } |
💡
!importantは最終手段！
優先順位を無理やり上げるため、使いすぎるとスタイルの管理が混乱します。
基本的には使わないようにしましょう。
詳細度を低く保つことが大切！
✅ 推奨：クラスセレクターを中心に使う（0,0,1,0）
⚠️ 注意：IDセレクターの多用は避ける（0,1,0,0）
❌ 禁止：!importantの多用（負の遺産になる）
💡 Tailwindを使うとこの問題が激減する理由
Tailwindはすべてクラスベース（0,0,1,0）なので、詳細度の競合がほぼ起きません。これもTailwindが人気な理由の1つです。
4. 📦 ボックスモデル
すべての要素は「箱」でできている
CSSでは、すべてのHTML要素は「箱（ボックス）」として扱われます。
この箱の構造を理解することがレイアウトの基本です。
┌─────────────────────────────────┐
│margin(外側の余白):他の要素との距離│
│ ┌───────────────────────────┐ │
│ │ border(枠線)：要素の境界線 │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ padding(内側の余白) │ │ │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ │ (コンテンツ) │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘
| 部分 | 役割 | 例え |
|---|---|---|
content |
テキストや画像などの中身 | 手紙の文章 |
padding |
コンテンツと枠線の間の余白 | 封筒の内側の空白 |
border |
枠線 | 封筒の縁 |
margin |
他の要素との間の余白 | 封筒同士の隙間 |
.box {
/* コンテンツのサイズ */
width: 200px;
height: 100px;
/* 内側の余白 */
padding: 16px; /* 上下左右すべて16px */
padding: 16px 8px; /* 上下16px・左右8px */
padding: 8px 16px 4px 12px; /* 上・右・下・左（時計回り） */
/* 枠線 */
border: 1px solid black; /* 太さ・スタイル・色 */
border-radius: 8px; /* 角を丸くする */
/* 外側の余白 */
margin: 16px;
margin: 0 auto; /* 左右中央揃えによく使う */
}
box-sizing の罠
/* ❌ デフォルト（content-box）：paddingとborderが幅に追加される */
.box {
width: 200px;
padding: 20px;
border: 1px solid;
/* 実際の表示幅：200 + 20×2 + 1×2 = 242px 😱 */
}
/* ✅ border-box：paddingとborderを含めた幅になる */
* {
box-sizing: border-box; /* 全要素に適用するのが現代の標準 */
}
.box {
width: 200px;
padding: 20px;
border: 1px solid;
/* 実際の表示幅：200px（指定通り！） */
}
💡
box-sizing: border-boxは全要素に設定するのが現代の標準です。
Tailwindなどのフレームワークは最初からこの設定が入っています。
5. 🔧 Flexbox：1次元のレイアウト
Flexboxとは？
Flexboxは「子要素を横・縦に並べるためのレイアウト方法」です。
ナビゲーションバー・カードの横並び・中央揃えなど、
1方向のレイアウトに最適です。
/* 親要素に display: flex を指定するだけで子要素が横並びになる */
.container {
display: flex;
/* 並ぶ方向 */
flex-direction: row; /* 横並び（デフォルト） */
flex-direction: column; /* 縦並び */
/* 主軸方向の揃え方 */
justify-content: flex-start; /* 左揃え（デフォルト） */
justify-content: center; /* 中央揃え */
justify-content: flex-end; /* 右揃え */
justify-content: space-between; /* 両端揃え・均等間隔 */
justify-content: space-around; /* 均等間隔（両端にも余白） */
/* 交差軸方向の揃え方 */
align-items: stretch; /* 高さを揃える（デフォルト） */
align-items: center; /* 垂直中央揃え */
align-items: flex-start; /* 上揃え */
/* 折り返し */
flex-wrap: wrap; /* 幅が足りないとき折り返す */
flex-wrap: nowrap; /* 折り返さない（デフォルト） */
/* 要素間の隙間 */
gap: 16px;
}
よくあるFlexboxのパターン
【flex-start】左揃え（デフォルト）
┌──────────────────────────────┐
│ [A] [B] [C] │
└──────────────────────────────┘
【center】中央揃え
┌──────────────────────────────┐
│ [A] [B] [C] │
└──────────────────────────────┘
【flex-end】右揃え
┌──────────────────────────────┐
│ [A] [B] [C]│
└──────────────────────────────┘
【space-between】両端揃え・均等間隔
┌──────────────────────────────┐
│[A] [B] [C]│
└──────────────────────────────┘
【space-around】均等間隔（両端にも余白）
┌──────────────────────────────┐
│ [A] [B] [C] │
└──────────────────────────────┘
💡 開発者ツールでリアルタイムに実験しよう！
ChromeやEdgeの開発者ツール（F12キー）を開くと、
Flexboxのプロパティをボタンをポチポチするだけで
リアルタイムに試せます。
「justify-contentを変えるとどう変わるか」を
目で確認しながら学ぶのが一番の近道です！
/* ① 水平・垂直中央揃え（最もよく使う！） */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* ② ナビゲーションバー */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
/* ③ カードの横並び（折り返しあり） */
.card-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
6. 🔲 Grid：2次元のレイアウト
Gridとは？
CSSグリッドは「行と列を組み合わせた2次元のレイアウト方法」です。
ダッシュボード・ギャラリー・複雑なページレイアウトに最適です。
.grid-container {
display: grid;
/* 列の定義 */
grid-template-columns: 200px 1fr 1fr; /* 固定200px・残りを均等に2分割 */
grid-template-columns: repeat(3, 1fr); /* 3列均等 */
/* 行の定義 */
grid-template-rows: 60px 1fr 60px; /* ヘッダー・メイン・フッター */
/* 要素間の隙間 */
gap: 16px;
}
/* 子要素が何列分を占めるか指定 */
.wide-item {
grid-column: span 2; /* 2列分を占める */
}
FlexboxとGridの使い分け
| Flexbox | Grid | |
|---|---|---|
| 次元 | 1次元（横 or 縦） | 2次元（横と縦） |
| 向いている用途 | ナビ・カード横並び・中央揃え | ダッシュボード・複雑なレイアウト |
| 子要素の制御 | 子要素が自分のサイズを決める | 親要素がレイアウトを決める |
7. 📱 レスポンシブデザイン
レスポンシブデザインとは？
「画面サイズに応じてレイアウトが変わるデザイン」のことです。
スマホ・タブレット・PCすべてで見やすいページを1つのCSSで実現します。
メディアクエリ
/* デフォルト：スマホ向けのスタイル（モバイルファースト） */
.container {
flex-direction: column; /* 縦並び */
padding: 16px;
}
/* タブレット以上（768px〜）のスタイル */
@media (min-width: 768px) {
.container {
flex-direction: row; /* 横並びに変える */
padding: 24px;
}
}
/* PC以上（1024px〜）のスタイル */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
padding: 32px;
}
}
よく使うブレークポイント
| 名前 | 幅 | 対象デバイス |
|---|---|---|
| sm | 640px〜 | 大きめのスマホ |
| md | 768px〜 | タブレット |
| lg | 1024px〜 | 小さめのPC |
| xl | 1280px〜 | 普通のPC |
| 2xl | 1536px〜 | 大きなモニター |
💡 モバイルファーストで書こう！
スマホ向けのスタイルをデフォルトにして、
画面が大きくなるにつれてスタイルを追加していく方法が現代の標準です。
8. 🚀 CSSフレームワーク・UIライブラリの紹介
CSSをゼロから書くのは大変です。現代のWeb開発ではフレームワークやUIライブラリを活用するのが一般的です。
主要なフレームワーク・ライブラリの比較
| Tailwind CSS | shadcn/ui | Bootstrap / react-bootstrap | |
|---|---|---|---|
| 種類 | ユーティリティCSSフレームワーク | コンポーネントライブラリ | CSSフレームワーク |
| 使い方 | クラスをHTMLに直接書く | コンポーネントをコードにコピー | クラスをHTMLに書く／Reactコンポーネント |
| カスタマイズ性 | ⭐⭐⭐⭐⭐ 非常に高い | ⭐⭐⭐⭐⭐ 非常に高い | ⭐⭐⭐ 中程度 |
| 学習コスト | ⭐⭐⭐ 中程度 | ⭐⭐⭐ 中程度 | ⭐⭐ 低い |
| Reactとの相性 | ✅ 抜群 | ✅ React専用 | ✅ react-bootstrapで対応 |
| TypeScript対応 | ✅ 対応 | ✅ 型安全 | ✅ react-bootstrapで型定義あり |
| バンドルサイズ | 小さい（使ったものだけ） | 小さい | 比較的大きい |
| 現在の人気 | 🔥 非常に高い | 🔥 急上昇中 | 📊 安定・老舗 |
🌊 Tailwind CSS
「ユーティリティクラスをHTMLに直接書く」フレームワーク
<!-- 通常のCSS -->
<button class="submit-button">送信</button>
<style>
.submit-button {
background-color: blue;
color: white;
padding: 8px 16px;
border-radius: 4px;
}
</style>
<!-- Tailwind CSS：クラスを直接書くだけ！ -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
送信
</button>
Tailwindのよく使うクラス：
| カテゴリ | クラス例 | 意味 |
|---|---|---|
| 色 |
bg-blue-500 text-gray-700
|
背景色・文字色 |
| 余白 |
p-4 px-8 mt-2 mb-4
|
padding・margin |
| サイズ |
w-full h-screen max-w-lg
|
幅・高さ |
| フォント |
text-xl font-bold text-center
|
サイズ・太さ・揃え |
| Flex |
flex items-center justify-between
|
Flexboxのショートカット |
| Grid |
grid grid-cols-3 gap-4
|
Gridのショートカット |
| ホバー |
hover:bg-blue-600 hover:opacity-80
|
ホバー時のスタイル |
| レスポンシブ |
md:flex-row lg:grid-cols-4
|
ブレークポイント付きのクラス |
// Reactで使う例（TSX）
const Button = ({ children }: { children: React.ReactNode }) => {
return (
<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition-colors">
{children}
</button>
);
};
Tailwindのメリット・デメリット：
| メリット | デメリット |
|---|---|
| CSSファイルを別に管理しなくていい | クラス名が長くなることがある |
| 命名に悩まなくていい | 最初はクラス名を覚える必要がある |
レスポンシブ対応が md: で簡単 |
HTMLが少し読みにくくなることも |
| 使ったクラスだけバンドルされる |
💡 クラス名を全部覚えなくても大丈夫！
「こんなにたくさんのクラス名、覚えられない…」と思った方も安心してください。
VS Codeに 「Tailwind CSS IntelliSense」 という拡張機能を入れると、
数文字打つだけでクラス名を予測補完してくれます。
実務のエンジニアもみんなこの機能を使っています😊
まずはbg-・text-・p-・flexあたりから慣れていきましょう！
🎨 shadcn/ui
「コンポーネントのコードをコピーしてプロジェクトに取り込む」ライブラリ
Tailwind CSSを内部で使っており、React × TypeScriptと抜群の相性です。
# インストール（コンポーネントを個別に追加する）
npx shadcn@latest add button
npx shadcn@latest add input
npx shadcn@latest add card
// shadcn/ui のコンポーネントを使う例（TSX）
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
const LoginForm = () => {
return (
<Card className="w-96">
<CardHeader>
<CardTitle>ログイン</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<Input type="email" placeholder="メールアドレス" />
<Input type="password" placeholder="パスワード" />
<Button className="w-full">ログイン</Button>
</CardContent>
</Card>
);
};
shadcn/uiが特別な理由：
一般的なUIライブラリ：
npm install → node_modulesに入る → ブラックボックス
→ カスタマイズしにくい・バージョン依存
shadcn/ui：
コンポーネントのコードが自分のプロジェクトにコピーされる
→ 自分のコードになる → 自由に編集できる！
→ Tailwind + TypeScript で型安全
| メリット | デメリット |
|---|---|
| コードが自分のものになる・自由に編集できる | React専用（他のフレームワークでは使いにくい） |
| Tailwind + TypeScriptで型安全 | Tailwind CSSの知識が必要 |
| アクセシビリティ対応済み | セットアップが少し複雑 |
| デザインが洗練されている |
🅱️ Bootstrap / react-bootstrap
「クラスを書くだけで整ったデザインになる」老舗フレームワーク
2011年登場で長い歴史を持つ。学習コストが低く、素早く使い始められます。
Reactで使う場合はreact-bootstrapというライブラリを使うのが現代の標準です。
<!-- 素のBootstrap：HTMLにクラスを書くだけ -->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">カードタイトル</h5>
<p class="card-text">カードの内容です。</p>
<button class="btn btn-primary">ボタン</button>
</div>
</div>
</div>
</div>
</div>
// react-bootstrap：Reactコンポーネントとして使う（TSX）
import { Button, Card, Form } from "react-bootstrap";
const LoginForm = () => {
return (
<Card style={{ width: "24rem" }}>
<Card.Body>
<Card.Title>ログイン</Card.Title>
<Form.Control type="email" placeholder="メールアドレス" className="mb-3" />
<Form.Control type="password" placeholder="パスワード" className="mb-3" />
<Button variant="primary" className="w-100">ログイン</Button>
</Card.Body>
</Card>
);
};
Bootstrap vs react-bootstrap の違い：
| Bootstrap（素） | react-bootstrap | |
|---|---|---|
| 使い方 | HTMLにクラスを書く | Reactコンポーネントとして使う |
| jQueryへの依存 | あり（旧版） | なし |
| Reactとの相性 | ⚠️ やや悪い | ✅ 問題なし |
| TypeScript対応 | 限定的 | ✅ 型定義あり |
メリット・デメリット：
| メリット | デメリット |
|---|---|
| 学習コストが低い | デザインが似たり寄ったりになりやすい |
| ドキュメントが豊富 | Tailwindに比べてカスタマイズしにくい |
| 枯れた技術で安定している | バンドルサイズが比較的大きい |
| react-bootstrapでReactにも対応 | shadcn/uiほどの型安全性はない |
どれを選べばいいの？
このシリーズでは Tailwind CSS を中心に解説します。
Reactと抜群の相性で、現在最も広く使われているフレームワークだからです。
9. 🎯 まとめ
| 概念 | 一言で言うと |
|---|---|
| 🎨 CSS | Webページの「見た目」を整える言語 |
| 🎯 セレクター | どの要素にスタイルを当てるかを指定する |
| 📦 ボックスモデル | すべての要素はcontent・padding・border・marginの「箱」 |
| 🔧 Flexbox | 1次元（横 or 縦）のレイアウトを整える |
| 🔲 Grid | 2次元（横と縦）のレイアウトを整える |
| 📱 レスポンシブ | メディアクエリで画面サイズに応じてスタイルを変える |
| 🌊 Tailwind CSS | ユーティリティクラスをHTMLに書くフレームワーク |
| 🎨 shadcn/ui | コピーして使うReact向けコンポーネントライブラリ |
| 🅱️ Bootstrap | クラスを書くだけで整うシンプルな老舗フレームワーク |
CSSは「書いて・見て・調整する」の繰り返しで身につきます。
ブラウザの開発者ツール（F12）でリアルタイムに変更を試しながら学ぶのが一番の近道です！
次回は TypeScriptでインタラクションを作る を解説します！
DOMの操作・イベント処理・TypeScriptの型を活かしたインタラクティブなページの作り方を学びます⚡
💬 質問や感想があれば、コメント欄でお気軽にどうぞ!
👍 役に立ったら、いいね&ストックをお願いします!
🎓 ここまで読んでくださって、本当にありがとうございました!
🔗 シリーズ記事
- 【第一回】Webページの仕組み・HTML基礎
- 【第二回】CSSで見た目を整える（この記事）
- 【第三回】TypeScriptでインタラクションを作る（近日公開）
- 【第四回】React × TypeScriptの基礎（近日公開）
- 【第五回】React × TypeScriptの実践（近日公開）
- 【第六回】まとめ・開発環境・次のステップ（近日公開）