💭
Next.jsのglobal.cssをAIを使って読解 (Tailwind「じゃない」編)
この記事ではNext.jsのcreate-next-appコマンドで自動作成されるglobal.cssについて理解を深めていきます。その中身を見ていくと、パッと見では意図がわかりづらいCSS記述が一部あるのですが、予備知識がなくてもAIコーディングツールを使えば読解を楽にしてくれます。
AIコーディングツールはソースコードを「書く」だけでなく、「読む」場面でも力を発揮します。AIを使ってコードを読むことの有用性は、Claudeの開発元であるAnthropic社による動画「Claude Code best practices」の中でも、主要な用途の一つ「Explore codebase and history」として紹介されています。
6分25秒付近のスクリーンショット(一部加工)
ソースコードの読解に使うツールはClaude Codeである必要はなく、Gemini CLIでもOpenAI Codex CLIでもCursorでも、好きなものを選んでください。
Next.jsにおけるCSSの選択肢
global.cssの中身を詳細に見ていく前に、Next.jsにおけるCSS利用方法について整理しましょう。Next.jsではCSSの取り扱いに関して、様々な選択肢が提供されています。詳しくは以下の公式ドキュメントの通りです。
- Tailwind CSS
- CSS Modules
- Global CSS (
global.css) - External Stylesheets
- Sass
- CSS-in-JS
これらCSSの選択肢うち「Tailwind CSSだけ」あるいは「CSS Modulesだけ」など、通常どれか一つだけを選べばいいのですが、global CSSに関してだけは異なり、他のどの選択肢を選んでも、global CSSも合わせて使うケースが多くなります。つまり「Tailwindとglobal CSSを併用」あるいは「CSS Modulesとglobal CSSを併用」といった具合です。
その理由は、どの選択肢を選んでも、CSSには「真にグローバルな」ごく一部の設定項目があるからです。公式ドキュメントにも以下のように記述されています。
We recommend using global styles for truly global CSS (like Tailwind's base styles), Tailwind CSS for component styling, and CSS Modules for custom scoped CSS when needed.
2パターンのglobal.cssがある
Next.jsのcreate-next-appコマンドで自動作成されるglobal.cssには2パターンあり、以下の質問にYesで答えるかNoで答えるかによっての中身が変わります。
✔ Would you like to use Tailwind CSS? … No / Yes
ちなみに、Next.jsのGitHub pull request #84750により、Tailwindがデフォルトの選択肢になりました。
Tailwindを選択「しない」時のglobal.css
先程の質問にNoで答えると、以下のglobal.cssが自動作成されます。(Yesの場合はこちらの記事)
global.cssの中身
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
それでは各部分についてAIコーディングツールを使って読み解いていきましょう。本記事を書く際に、私はGemini CLIを使いましたが、先述の通り他のAIツールでも構いません。
:rootでのbackground / foreground色指定
まずはこちらの部分を読み解いていきます。
プロンプト
@app/globals.cssの以下の部分が何をしているか教えて下さい
:root {
--background: #ffffff;
--foreground: #171717;
}
AIの回答(全体)
app/globals.css の :root ブロックは、CSS カスタムプロパティ（CSS Variables とも呼ばれます）を定義しています。
具体的には、以下の役割を持っています。
1. `:root` セレクタ:
これは CSS の擬似クラスセレクタで、ドキュメントツリーのルート要素（HTML
ドキュメントの場合は <html> 要素）を指します。:root で定義されたカスタム
プロパティは、そのドキュメント内のどこからでもアクセスできる「グローバル変数」
のようなものになります。
2. カスタムプロパティの定義:
* --background: #ffffff;: --background という名前のカスタムプロパティ
を定義し、その値を白色 (#ffffff) に設定しています。
* --foreground: #171717;: --foreground という名前のカスタムプロパティ
を定義し、その値を濃い灰色 (#171717) に設定しています。
3. 目的:
これらのカスタムプロパティは、アプリケーション全体で一貫した色を管理するため
に使用されます。このブロックでは、デフォルトのテーマ（通常はライトモード）の
背景色と前景色を定義しています。
4. 使用例:
この後、body セレクタなどで var(--background) や var(--foreground)
のように参照することで、これらの定義された色を適用しています。
1 body {
2 background: var(--background); /* ここで --background の値が使われる */
3 color: var(--foreground); /* ここで --foreground の値が使われる */
4 /* ... */
5 }
5. ダークモードとの連携:
提供されたコードの続きにある @media (prefers-color-scheme: dark)ブロックでは、
ユーザーがダークモードを好む場合に、これらのカスタムプロパティの値を上書きして、
背景色と前景色をダークモードに適した色に変更しています。これにより、テーマの切り
替えが容易になります。
要するに、この :root ブロックは、アプリケーションの基本的なカラースキーム（特にライト
モードのデフォルト）を定義し、CSS全体で再利用可能にするための中心的な場所です。
ここからはAIの回答を分解して解説しましょう。
AIの回答(抜粋)
CSSカスタムプロパティ(CSS Variables とも呼ばれます)を定義しています。
--から始まる--backgroundや--foregroundなどは、いわゆる「CSSにおける変数」であり、正式にはCSSカスタムプロパティ(CSS Variables)と呼ばれる記法です。
次は:rootセレクタについてです。
AIの回答(抜粋)
1. `:root` セレクタ:
これは CSS の擬似クラスセレクタで、ドキュメントツリーのルート要素（HTML
ドキュメントの場合は <html> 要素）を指します。
:rootセレクタについてはこちら。
rootではなく、コロンから始まる:rootであることに注意してください。
ちなみにCSSカスタムプロパティを:rootに定義すべきか、別の箇所に定義すべきか？についてはこちらです。
プロンプト
CSSカスタムプロパティは:rootに定義するのが普通ですか？
✦ グローバルに（アプリケーション全体で）使用するカスタムプロパティは `:root`
に定義するのが最も一般的で、(中略)...コンポーネント固有の値はそのコンポーネント
のセレクタに定義する、という使い分けが一般的です。
AIの回答(全体)
✦ はい、グローバルに（アプリケーション全体で）使用するカスタムプロパティは `:root`
に定義するのが最も一般的で、ベストプラクティスとされています。
理由は以下の通りです。
1. 継承の仕組み:
CSS カスタムプロパティは、定義された要素とそのすべての子孫要素に継承されます。
2. `:root` の役割:
:root はドキュメントの最上位要素である <html> 要素を指します。ここにカスタムプロパティを定義すると、<html>
のすべての子孫要素、つまりページ上のすべての要素がそのプロパティを継承して利用できるようになります。
これにより、アプリケーション全体で共有したいテーマカラー、フォントサイズ、スペーシングなどの値を「グローバル変数」として一元管理
できるため、非常に便利です。
---
補足：`:root` 以外で定義する場合
もちろん、カスタムプロパティを :root
以外で定義することも可能です。その場合、プロパティのスコープ（有効範囲）は、定義された要素とその子孫に限定されます。
これは、特定のコンポーネント内だけで有効な値を定義したい場合に役立ちます。
例：特定のコンポーネント内だけで使う変数を定義する
1 /* グローバルな変数 */
2 :root {
3 --primary-color: blue;
4 }
5
6 /* .alert コンポーネント内だけで使うローカルな変数 */
7 .alert {
8 --alert-background-color: #ffdddd;
9 --alert-text-color: #d8000c;
10
11 background-color: var(--alert-background-color);
12 color: var(--alert-text-color);
13 border: 1px solid var(--alert-text-color);
14 }
15
16 .alert p {
17 /* 親から --alert-text-color を継承して利用できる */
18 color: var(--alert-text-color);
19 }
20
21 .some-other-element {
22 /* ここでは --alert-background-color は利用できない（スコープ外） */
23 background-color: var(--alert-background-color); /* 無効 */
24 }
このように、グローバルな値は `:root`
に、コンポーネント固有の値はそのコンポーネントのセレクタに定義する、という使い分けが一般的です。
至極真っ当な意見が返ってきているので、最終的には自分のプロジェクトに合わせて、他人の例を参考にしつつ選んでいくしかなさそうです。
以上より、以下のブロックは、
:root {
--background: #ffffff;
--foreground: #171717;
}
--backgroundと--foregroundという2つのCSSカスタムプロパティを、ドキュメント全体から参照可能な:rootに定義していることがわかりました。これらがどう参照され、利用されるのかは後述します。
@media (prefers-color-scheme: dark)指定
続いてはこちら。一見してダークテーマに関わる指定のようです。
プロンプト
@app/globals.cssの以下の部分が何をしているか教えて下さい
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
AIからの回答(全体)
✦ app/globals.css のこの部分は、ユーザーのシステム設定に基づいてダークモードを適用するための CSS メディアクエリです。
具体的には、以下の役割を持っています。
1. `@media` ルール:
これは CSS
の標準的なアットルールで、特定の条件（メディアタイプやメディア特性）が満たされた場合にのみ、その中のスタイルを適用します。
2. `(prefers-color-scheme: dark)`:
これはメディア特性の一つで、ユーザーのオペレーティングシステム（OS）やブラウザの設定が「ダークテーマ」を優先しているかどうか
を検出します。
* dark: ユーザーがダークテーマを好む設定にしている場合。
* light: ユーザーがライトテーマを好む設定にしている場合。
3. `:root` ブロック:
このメディアクエリの内部にある :root ブロックは、ユーザーがダークテーマを好む場合にのみ適用されます。
* --background: #0a0a0a;: 背景色を非常に暗い灰色 (#0a0a0a) に上書きします。
* --foreground: #ededed;: 前景色（テキストの色など）を明るい灰色 (#ededed) に上書きします。
全体としての目的
このコードブロックは、ユーザーが OS やブラウザの設定でダークモードを有効にしている場合、アプリケーションのデフォルトの背景色と前
景色を、ダークモードに適した色（暗い背景に明るいテキスト）に自動的に切り替える役割を果たします。
これにより、ユーザーのシステム設定に合わせた、より快適な閲覧体験を提供することができます。
ここからはAIの回答を分解して説明しましょう。
@mediaはCSSでよく見るメディアクエリですが、
AIの回答(抜粋)
1. `@media`ルール:
これは CSSの標準的なアットルールで、特定の条件（メディアタイプや
メディア特性）が満たされた場合にのみ、その中のスタイルを適用します。
(prefers-color-scheme: dark)あまり馴染みがない人もいると思います。
AIの回答(抜粋)
2. `(prefers-color-scheme: dark)`:
これはメディア特性の一つで、ユーザーのオペレーティングシステム（OS）やブラウザの
設定が「ダークテーマ」を優先しているかどうかを検出します。
* dark: ユーザーがダークテーマを好む設定にしている場合。
* light: ユーザーがライトテーマを好む設定にしている場合。
上記のAI回答とMozillaのリンク先を見ると、OSやブラウザの設定であることはわかりますが、どこで設定できるものなのかはわかりません。そこでAIに聞いてみます。
プロンプト
prefers-color-schemeはChromeブラウザの場合どこで設定できますか？
AIからの回答(全体)
✦ prefers-color-scheme は、主にオペレーティングシステム（OS）の表示設定に連動しています。Chrome
ブラウザ自体に直接この設定を変更する項目はありませんが、OS の設定を Chrome が読み取って反映します。
1. OS の設定を変更する（一般的な方法）
お使いの OS の設定を変更することで、Chrome の prefers-color-scheme の挙動が変わります。
* Windows 10/11 の場合:
1. 「設定」を開きます。
2. 「個人用設定」→「色」に進みます。
3. 「モードを選択してください」または「Windows の表示モードを選択」で「ダーク」または「ライト」を選択します。
* macOS の場合:
1. 「システム設定」（または「システム環境設定」）を開きます。
2. 「外観」に進みます。
3. 「ライト」「ダーク」「自動」のいずれかを選択します。「自動」の場合、時間帯によってライト/ダークが切り替わります。
* Linux の場合:
使用しているデスクトップ環境（GNOME, KDE, XFCE
など）によって設定場所が異なりますが、通常は「設定」→「外観」または「テーマ」の項目でダークモード/ライトモードの設定が可能です。
2. Chrome DevTools で一時的にシミュレートする（開発者向け）
開発目的で、OS の設定を変更せずに prefers-color-scheme の挙動を確認したい場合は、Chrome
の開発者ツール（DevTools）で一時的にシミュレートできます。
1. Chrome でウェブページを開きます。
2. F12 キーを押すか、右クリックして「検証」を選択し、開発者ツールを開きます。
3. 開発者ツールの右上にある「︙」（3点リーダー）をクリックし、「More tools」→「Rendering」を選択します。
4. 「Rendering」タブの中に「Emulate CSS media feature prefers-color-scheme」という項目があります。
5. ここで「No emulation」「light」「dark」を選択することで、一時的に prefers-color-scheme の値をシミュレートできます。
AIの回答(抜粋)
✦ prefers-color-scheme は、主にオペレーティングシステム（OS）の表示設定に連動
しています。Chromeブラウザ自体に直接この設定を変更する項目はありませんが、OS
の設定を Chrome が読み取って反映します。
調べてみると、こちらはAIの回答が間違っていました。以下の動画のように、Chromeから設定できます。
AIに指摘しておきます。
プロンプト
Chromeの設定→デザイン→モードから「ダーク」「ライト」「デバイス」が選べるようですよ
AIの回答(全体)
✦ 貴重な情報ありがとうございます！私の説明が不十分でした。
Chrome ブラウザの「設定」→「デザイン」→「モード」から「ダーク」「ライト」「デバイス」が選べるようになったのは、ユーザーがブラウザ
内でより詳細に prefers-color-scheme の挙動を制御できるようになったことを意味します。
それぞれの設定が prefers-color-scheme にどう影響するかは以下の通りです。
* 「ダーク」:
この設定を選択すると、OS の設定に関わらず、すべてのウェブサイトに対して `prefers-color-scheme: dark`
が適用されます。ウェブサイトはダークモードで表示されるようになります。
* 「ライト」:
この設定を選択すると、OS の設定に関わらず、すべてのウェブサイトに対して `prefers-color-scheme: light`
が適用されます。ウェブサイトはライトモードで表示されるようになります。
* 「デバイス」:
これがデフォルトの設定で、Chrome が OS の `prefers-color-scheme` の設定を読み取って反映します。つまり、OS
がダークモードならウェブサイトもダークモードに、OS がライトモードならウェブサイトもライトモードになります。
このブラウザ内の設定により、ユーザーは OS の設定とは別に、Chrome
でのウェブサイトの表示モードを柔軟に選択できるようになっています。ご指摘いただき、ありがとうございました。
ブラウザ下端の不要な水平スクロールバー防止
次はこちら。
プロンプト
@app/globals.cssの以下の部分が何をしているか教えて下さい
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
AIの回答(抜粋)
ウェブページが意図せず水平方向にスクロール可能になるのを防ぎ、特に
レスポンシブデザインにおいてレイアウトの崩れを防ぐためによく使用されます。
AIの回答(全体)
✦ html, body セレクタは、HTMLドキュメント全体（<html>要素）と、その中のコンテンツの大部分を囲む <body> 要素の両方にスタイルを適用することを意味します。
このコードスニペットは以下のことを行っています。
* max-width: 100vw;: これは、要素の最大幅をビューポート（ブラウザの表示領域）の幅の100%に設定します。vw は "viewport width"
の略です。これにより、コンテンツがビューポートの幅を超えて広がるのを防ぎます。
* overflow-x: hidden;: これは、要素の水平方向（X軸）のオーバーフロー（コンテンツが要素の境界からはみ出すこと）を非表示にします。つまり、コンテンツが max-width: 100vw
で設定された幅を超えた場合、横スクロールバーが表示されることなく、はみ出した部分が切り取られて見えなくなります。
これら2つのプロパティを組み合わせることで、ウェブページが意図せず水平方向にスクロール可能になるのを防ぎ、特にレスポンシブデザインにおいてレイアウトの崩れを防ぐために
よく使用されます。
ここは少しわかりづらいので解説します。この設定で防止できるのは「水平」方向のスクロールです。それも、ブラウザ下端に出現する水平スクロールバーです。
max-width: 100%;ではなくmax-width: 100vwとなっている理由こちらです。
プロンプト
@app/globals.css でmax-width: 100%ではなく max-width: 100vw;としている
のはなぜですか？
AIの回答(抜粋)
html, body に max-width: 100vw; を指定する主な理由は、意図しない横スクロールバー
の発生を確実に防ぐためです。
AIの回答(全体)
✦ max-width: 100vw; と max-width: 100%; の違いは、基準となる幅が何かという点にあります。
1. `max-width: 100%;` の場合:
* これは、親要素の幅に対する割合を意味します。
* 例えば、body 要素に max-width: 100%; を指定した場合、body の親要素である html 要素の幅の100%を指します。
* しかし、もし html や body
にデフォルトのマージンやパディングがブラウザによって適用されていたり、他のCSSで設定されていたりすると、100%
はそのマージンやパディングを除いた「コンテンツ領域」の幅を基準にしてしまいます。その結果、body
のコンテンツがビューポートの端からはみ出し、意図しない横スクロールバーが発生する可能性があります。
2. `max-width: 100vw;` の場合:
* vw は "viewport width" の略で、ビューポート（ブラウザの表示領域）の幅に対する割合を意味します。
* 100vw は、ビューポートの幅の100%を正確に指します。これは、親要素のマージンやパディングの影響を受けません。
なぜ 100vw を使うのか
html, body に max-width: 100vw; を指定する主な理由は、意図しない横スクロールバーの発生を確実に防ぐためです。
* 100vw を使うことで、html や body 要素がブラウザの表示領域の幅を絶対に超えないように保証できます。
* これに overflow-x: hidden; を組み合わせることで、ページ全体で横方向のスクロールが発生するのを防ぎ、コンテンツがビュー
ポートの端からはみ出すことを許容しない、より堅牢なレイアウトの基盤を作ることができます。
特に、異なるブラウザやデバイスで一貫した表示を保ちたい場合に、100vw は 100%
よりも予測可能で信頼性の高い挙動を提供します。
vwという単位について詳しく知りたい方はこちら。
body指定
続いてはこちらです。
プロンプト
@app/globals.cssの以下の部分が何をしているか教えて下さい
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
AIの回答(全体)
✦ body セレクタは、HTMLドキュメントの可視コンテンツ全体を囲む <body> 要素にスタイルを適用します。
このコードスニペットは以下のことを行っています。
* color: var(--foreground);: テキストの色を、以前 :root で定義された --foreground 変数の値（この場合は #171717、濃い灰色）に設定します。
* background: var(--background);: 背景色を、以前 :root で定義された --background 変数の値（この場合は #ffffff、白）に設定します。
* font-family: Arial, Helvetica, sans-serif;: ドキュメント内のテキストに使用するフォントを指定します。Arial が利用可能であればそれを使用し、なければ
Helvetica、それもなければ一般的なサンセリフ体フォントを使用します。
* -webkit-font-smoothing: antialiased;: WebKitベースのブラウザ（Chrome, Safariなど）でフォントのアンチエイリアシングを antialiased
に設定します。これにより、テキストのレンダリングがより滑らかになります。
* -moz-osx-font-smoothing: grayscale;: Firefox（特にmacOS上）でフォントのアンチエイリアシングを grayscale
に設定します。これもテキストのレンダリングを滑らかにするためのものです。
要するに、このブロックはウェブページの基本的なテキスト色、背景色、フォント、およびフォントのレンダリング方法をグローバルに設定しています。
こちらの3つについてはわかりやすく、よく目にする指定だと思います。
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
...
}
AIの回答(抜粋)
* color: var(--foreground);: テキストの色を、以前 :root で定義された
--foreground 変数の値（この場合は #171717、濃い灰色）に設定します。
* background: var(--background);: 背景色を、以前 :root で定義された
--background 変数の値（この場合は #ffffff、白）に設定します。
* font-family: Arial, Helvetica, sans-serif;: ドキュメント内のテキスト
に使用するフォントを指定します。Arial が利用可能であればそれを使用し、なければ
Helvetica、それもなければ一般的なサンセリフ体フォントを使用します。
以下の2つについては、適用した時としない時の差異が、正直私の目視ではわからないほど微妙な効果でした。
body {
...
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
AIの回答(抜粋)
* -webkit-font-smoothing: antialiased;: WebKitベースのブラウザ
Chrome, Safariなど）でフォントのアンチエイリアシングを antialiased
に設定します。これにより、テキストのレンダリングがより滑らかになります。
* -moz-osx-font-smoothing: grayscale;: Firefox（特にmacOS上）で
フォントのアンチエイリアシングを grayscaleに設定します。これも
テキストのレンダリングを滑らかにするためのものです。
AIに聞いてみます。
プロンプト
`-webkit-font-smoothing: antialiased;`と
`-moz-osx-font-smoothing: grayscale;`は消去してみても違いがわからなかった
のですが、本当に効いているのでしょうか？
AIの回答(抜粋)
✦ はい、これらのプロパティは機能していますが、その効果は非常に微妙で、
特定の環境や個人の視覚によって違いがわかりにくいことがあります。
AIの回答(全体)
✦ はい、これらのプロパティは機能していますが、その効果は非常に微妙で、特定の環境や個人の視覚によって違いがわかりにくいことがあります。
それぞれのプロパティが何をしているのか、そしてなぜ違いがわかりにくいのかを説明します。
-webkit-font-smoothing: antialiased;
* 対象ブラウザ: WebKitベースのブラウザ（Chrome, Safari, Edge, Operaなど）。
* 効果: フォントのアンチエイリアシング（ギザギザを滑らかにする処理）の方法を制御します。
* antialiased を指定すると、フォントはグレースケールアンチエイリアシングでレンダリングされます。これは、フォントの輪郭を滑らかにするために、文字の周りに灰色のピク
セルを追加する方法です。
* 多くのブラウザのデフォルトはサブピクセルアンチエイリアシングです。これは、ディスプレイのサブピクセル（赤、緑、青の小さな光点）を利用して、よりシャープで太く見え
るテキストをレンダリングします。
* 違いがわかりにくい理由:
* 高DPIディスプレイ: Retinaディスプレイのような高DPI（高解像度）ディスプレイでは、サブピクセルアンチエイリアシングの必要性が低くなるため、antialiased
に設定するとテキストがより細く、シャープに見えることがあります。しかし、標準的なDPIのディスプレイでは、テキストが細くなりすぎて読みにくく感じることもあります。
* フォントの種類: 細いフォントや特定のフォントでは効果が顕著に出やすいですが、太いフォントや一般的なフォントでは違いが少ないことがあります。
-moz-osx-font-smoothing: grayscale;
* 対象ブラウザ: macOS上のFirefox。
* 効果: macOS環境のFirefoxで、フォントのアンチエイリアシングをグレースケールアンチエイリアシングに強制します。これは、macOSが一部のテキストレンダリングで採用している
方法に似ています。
* 違いがわかりにくい理由:
* OSのレンダリング:
macOS自体が非常に高度なフォントレンダリングを行っているため、このCSSプロパティによる変更がデフォルトのレンダリングと大きく異なることが少ないです。
* ブラウザのデフォルト: Firefoxのデフォルトのレンダリングがすでに grayscale に近い場合、このプロパティを設定しても視覚的な変化はほとんどありません。
まとめ
これらのプロパティは、主にデザイナーが特定のフォントの見た目を微調整したり、異なるブラウザやOS間でフォントのレンダリングの一貫性を高めたりするために使用されます。特
に、テキストが「太すぎる」と感じる場合に、より細く、シャープに見せる目的で使われることが多いです。
しかし、その効果は非常に微妙であり、すべてのユーザーがその違いを明確に認識できるわけではありません。そのため、消去しても大きな違いを感じなかったというのは、よくある
ことです。
やはり、わかりづらいくらい微妙な効果とのことです。
Reset CSS
次はこちらです。
プロンプト
@app/globals.cssの以下の部分が何をしているか教えて下さい
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
AIの回答(抜粋)
これらのプロパティをすべての要素に適用することは、CSSリセットまたはノーマライズの
一般的な手法です。ブラウザにはデフォルトで要素にマージンやパディングが設定されて
いることが多く、これらを0にリセットすることで、ブラウザ間の表示の一貫性を高め、
開発者が一からレイアウトをコントロールしやすくします。
AIの回答(全体)
✦ * セレクタはユニバーサルセレクタと呼ばれ、HTMLドキュメント内のすべての要素にスタイルを適用します。
このコードスニペットは以下のことを行っています。
* box-sizing: border-box;:
これは、CSSのボックスモデルの計算方法を変更します。通常、要素の幅と高さはコンテンツ領域のみを指しますが、border-box
を指定すると、width と height の値にパディングとボーダーが含まれるようになります。これにより、レイアウトの計算がより直
感的になり、要素のサイズ調整がしやすくなります。
* padding: 0;: すべての要素の内部余白（パディング）を0に設定します。
* margin: 0;: すべての要素の外部余白（マージン）を0に設定します。
これらのプロパティをすべての要素に適用することは、CSSリセットまたはノーマライズの一般的な手法です。ブラウザにはデフォル
トで要素にマージンやパディングが設定されていることが多く、これらを0にリセットすることで、ブラウザ間の表示の一貫性を高め
、開発者が一からレイアウトをコントロールしやすくします。
Reset CSS / Normalize CSSにはいくつもの流派があり、何を指定すべきかは迷うところです。年月が経つに連れブラウザの動作もだんだん変化し、ブラウザ間の差異が小さくなってきたため、現在では不要と考えられるReset / Normalizeの設定もあります。
Next.jsのglobal.cssはかなり思い切って指定を減らしていると感じます。今の時代はこれくらいシンプルなところからスタートするのがいいのかもしれません。
Reset CSSの歴史、特に初期の変遷については、20年前にundohtml.cssを作り出したと言われるTantek Çelik氏がまとめています。
最近の状況はGoogle検索で「Reset CSS」などと入れれば記事が出てきますが、2025年時点だとこの記事がわかりやすいでしょうか。
<a>, <Link>のキャンセル
プロンプト
@app/globals.cssの以下の部分が何をしているか教えて下さい
a {
color: inherit;
text-decoration: none;
}
こちらは以下の動画を見てもらうと早いですが、<a>要素やNext.jsの<Link>コンポーネントにデフォルトで下線が入ったり、青文字になってしまうのを防ぐ指定です。
<html>のcolor-scheme指定
プロンプト
@app/globals.cssの以下の部分が何をしているか教えて下さい
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
AIの回答(全体)
✦ @app/globals.css ファイル内の以下のCSSコードについて説明します。
1 @media (prefers-color-scheme: dark) {
2 html {
3 color-scheme: dark;
4 }
5 }
このコードは、ユーザーのオペレーティングシステム（OS）がダークモード（暗い配色）を好む設定になっている場合に、ウェブページ全体（
html要素）にダークモードのカラースキームを適用するためのものです。
具体的には：
1. `@media (prefers-color-scheme: dark)`:
これはメディアクエリと呼ばれるもので、「ユーザーのシステム設定がダークカラーテーマを好む場合」という条件を指定しています。
2. `html { color-scheme: dark; }`: 上記の条件が満たされた場合、このスタイルが適用されます。color-scheme: dark;
は、ブラウザに対して、このウェブページが暗い背景と明るいテキストで表示されるように設計されていることを伝えます。これにより、
スクロールバーやフォームのコントロールなど、ブラウザが提供するデフォルトのUI要素も、ページのダークテーマに合わせて暗い配色で
表示されるようになります。
要するに、ユーザーがOSでダークモードを設定している場合、ウェブサイトも自動的にダークモードの表示に切り替わるようにするための設定
です。
こちらも動画を見ていただくのが早いと思います。スクロールバーなどのブラウザ内のUIのテーマを切り替えるのがcolor-schemeです。
Discussion