グローバルCSSとは何か
なぜ「アプリ全体に適用されるCSS」が必要なのか。コンポーネントCSSとの違いと、グローバルCSSの役割を理解します。
CSSには2つの適用範囲がある
CSSにはスタイルの適用範囲によって、大きく2つの種類があります。
| 種類 | 適用範囲 | 例 |
|---|---|---|
| グローバルCSS | サイト全体 | サイト全体のスタイルを定義するCSSファイル（`globals.css`） |
| コンポーネントCSS | 特定の部品だけ | ボタンやカードなど、個別の部品に閉じたスタイル |
コンポーネントCSSの実現方法には、CSSやユーティリティCSS（Tailwind CSS）などがあります。
このコースではグローバルCSSに集中するため、それらの詳細は扱いません。
グローバルCSSの役割
グローバルCSSは「どのページを開いても適用されるCSS」です。
- サイト全体の色（背景色、文字色、ボーダー色など）
- サイト全体のデザイントークン（余白やフォントサイズのルール）
- ダークモードの色定義
- ベースとなるタイポグラフィ（フォント、行間、見出しサイズ）
例えば、ダークモードの色定義はグローバルCSSに書きます。どのページを開いても同じ配色になるからです。
このサイトでもダークモードを有効にすると、すべてのページに下記のスタイルが適用されます。これは globals.css 内の定義の一部です。
コンポーネントCSSの役割
コンポーネントCSSはグローバルCSSとは反対に、「特定の部品だけに効くCSS」です。
例えば、「お問い合わせボタン」だけを青くしたいとき、グローバルCSSに書くとサイト中のボタンが全部青くなってしまいます。そこで、このボタン専用のスタイルを別に書きます。
.contact-button {
background-color: #2563eb;
color: #ffffff;
padding: 8px 16px;
border-radius: 4px;
}この .contact-button はお問い合わせボタンだけに効くスタイルです。他のボタンやページには影響しません。
このように、コンポーネントCSSは特定の部品にだけ影響します。グローバルCSSとは役割が明確に分かれています。
このサイトでは Tailwind CSS というユーティリティCSSを使って、コンポーネントCSSを書いています。例えば、下の画像にある <br className="md:hidden" /> は「画面幅が狭いときだけ改行する」という、この要素だけのスタイルです。
スマホでアクセスすると、テキストが改行されて表示されます。
グローバルCSSの中身を覗いてみよう
典型的なグローバルCSSは、大きく分けて以下のような構成になっています。
/* 1. CSSリセット */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* 2. ベーススタイル */
body { font-family: system-ui, sans-serif; line-height: 1.6; }
/* 3. デザイントークン（CSS変数） */
:root { --background: #ffffff; --text: #171717; }
/* 4. ダークモードの色定義 */
.dark { --background: #171717; --text: #ffffff; }
/* 5. レスポンシブなサイズ定義 */
h1 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); }最初から全部理解する必要はありません。このコースでは、1つずつ順番に「何をしているのか」「なぜこう書くのか」を解説していきます。
コンポーネントCSS との違い
「全部グローバルCSSに書けばいいのでは？」と思うかもしれません。しかし、グローバルCSSにすべてを書くと問題が起きます。
- ファイルが巨大になり、どこに何があるか分からなくなる
- クラス名が衝突する（
.titleが別の場所で上書きされる） - 変更の影響範囲が分からない（1行直したら別のページが崩れる）
だから、サイト全体に関わるものだけグローバルCSSに書き、コンポーネント固有のスタイルはコンポーネントCSSで管理します。
| 書く場所 | 内容 |
|---|---|
| グローバルCSS | 色定義、ダークモード、フォント設定、リセット、デザイントークン |
| コンポーネント側 | ボタンの大きさ、カードのレイアウト、アニメーション |
どのにもこの概念がある
「グローバルCSS」は固有の機能ではなく、Web開発に共通する概念です。ファイル名や読み込み方が違うだけで、どの環境にも存在します。
| 環境 | ファイル名の例 | 読み込み方 |
|---|---|---|
| 素のHTML | style.css | <link> タグで読み込み |
| Next.js | globals.css | layout.tsx で import |
| Vite (React) | index.css | main.tsx で import |
| Nuxt | main.css | nuxt.config. で設定 |
| SvelteKit | app.css | +layout.svelte で import |
名前は違いますが、役割は同じです。アプリ全体に影響するスタイルを1箇所で定義するというのが共通の考え方です。
このコースでは グローバルCSS と呼びます。
同じフロントエンドエンジニアでもによって呼び方が違うことがあります。
次のステップ
グローバルCSSの中身を読むために、まず知っておかないといけないのが CSS の優先順位（カスケードと詳細度） です。次のレッスンで学びましょう。