VIDEO LESSON

Next.jsのCSS入門：グローバルCSSとCSS Modulesの適用手順の解説動画

再生時間 7:41動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回は、ネクストジェイエスのシーエスエス入門です。
0:05ページズルーターで、グローバルシーエスエスとシーエスエスモジュールズを使う手順を学びます。
0:13全体の基本スタイルはグローバルシーエスエスへ、カードのような部品ごとの見た目はシーエスエスモジュールズへ分けるのが、
0:19この記事の考え方です。
0:25ファイルの配置、読み込み先、クラスの適用方法、そしてスタイルの衝突を避ける考え方を、
0:29順に確認していきます。
0:34まずは全体像をつかみましょう。
0:36具体例を通して手順を体験しますので、初めての方も安心して進めてください。
0:43まず、二種類のシーエスエスの違いです。
0:45グローバルシーエスエスは、余白や文字の色など、アプリケーション全体に共通する基礎を書く場所です。
0:52一方、シーエスエスモジュールズは部品ごとの見た目を書く仕組みで、ファイル名をドット・モジュール・ドット・シーエスエスで終わらせて使います。
1:03モジュールズでは、書いたクラス名がビルド時に衝突しにくい名前へ変換されるため、
1:08別のファイルで同じクラス名を使っても混ざりにくくなります。
1:13この記事はタイプスクリプトとページズルーターの構成を前提にします。
1:17置き場所と読み込み方を最初に区別しておくと、後でスタイルが反映されないときに、
1:22原因の切り分けがぐっと楽になります。
1:26全体に適用するシーエスエスを、エスアールシー・スタイルズ・グローバルズ・ドット・シーエスエスへ書きます。
1:34内容は、ボックスのサイズ計算をそろえる指定、ボディの余白をなくす指定、文字の色と背景、
1:39フォントと行の高さなど、基礎になるものだけです。
1:44ボタンや入力欄は、周りの文字と同じフォントを使うようそろえます。
1:48リンクの色もここで決めます。
1:50ポイントは、全体に必要な基礎だけに絞ることです。
1:54ここに細かな部品の見た目まで書き込むと、後から上書きする量が増えてしまいます。
2:00色は十六進数で指定し、背景とのコントラストが保てる組み合わせを選んでいる点にも注目してください。
2:07ページズルーターでは、グローバルシーエスエスをエスアールシー・ページズ・アンダースコア・アップ・ティーエスエックスから読み込みます。
2:17このファイルが全ページの土台になるため、ここで一度読み込めば全体へ適用されます。
2:23すでにこのファイルがあり、プロバイダーやレイアウトを使っている場合は、それらを残したままインポートを追加してください。
2:31例は最小構成で、受け取ったコンポーネントとページのプロップスを、そのまま表示する形です。
2:38読み込み先を一か所に決めることが、全体スタイルを管理するコツです。
2:43ページごとに読み込むのではなく、アプリ全体の入り口で一度だけ読み込む、という位置づけを覚えておきましょう。
2:51グローバルシーエスエスのセレクターは、ページ全体へ影響します。
2:55たとえばボタンの背景色をここで一律に指定すると、別の機能のボタンにも同じ色が適用されます。
3:01意図しない場所まで変わってしまうのが、グローバルに書きすぎる難しさです。
3:06だからこそ、余白の初期値や文字の色のような、どこでも共通でよい基礎だけに絞ります。
3:12部品ごとの色や形は、次のシーエスエスモジュールズ側で調整します。
3:16全体と部品の役割を分けることで、後から直す範囲も小さくなります。
3:21逆に言えば、共通化したい基礎はここへ集めるほど効果が出ます。
3:25役割の線引きが、そのまま保守のしやすさにつながります。
3:29次はカード用のシーエスエスモジュールズです。
3:32エスアールシー・コンポーネンツに、アーティクルカード・ドット・モジュール・ドット・シーエスエスを作成します。
3:40カード本体には、幅、中央寄せ、内側の余白、枠線、角の丸み、背景などをまとめます。
3:46幅はミン関数で、小さい画面では親要素に収め、大きい画面では最大幅を制限しています。
3:52見出しとリンクにも、それぞれ専用のクラスを用意します。
3:55記事では、キーボード操作でリンクの位置が分かるよう、フォーカス時の枠も残しています。
4:02余白はクランプ関数で画面幅に応じて調整され、小さい画面でも窮屈にならない工夫が入っています。
4:08タイプスクリプトのコンポーネント、アーティクルカード・ティーエスエックスを作成します。
4:15シーエスエス側のドット・カードは、インポートしたスタイルズ・ドット・カードから参照します。
4:21クラスネームにこの参照を指定することで、初めてスタイルが付きます。
4:26ビルド時には衝突しにくいクラス名へ変換され、別のモジュールで同じドット・カードという名前を使っても、
4:31それぞれのローカルクラスとして扱われます。
4:37文字列でクラス名を直接書かず、読み込んだオブジェクトから参照する点が大切です。
4:43タイトル、説明文、リンク先はプロップスとして受け取るため、別の記事データでも同じカードを使い回せます。
4:50ページ側は、エスアールシー・ページズ・インデックス・ティーエスエックスからカードを読み込みます。
4:57タイトル、説明文、リンク先の三つをプロップスで渡し、見出しの下にカードを表示します。
5:03この例のリンク先は、同じプロジェクトで作成する紹介ページ、アバウトです。
5:09表示確認では画面幅を変え、文字の折り返しや横スクロールがないかを見ます。
5:14シーエスエスをインポートしただけではクラスは付きません。
5:18見た目が変わらないときは、クラスネームの指定とシーエスエス側のクラス名が一致するか調べましょう。
5:25キーボードでリンクへ移動したときに、フォーカスの枠が見えるかどうかも、あわせて確認しておくと安心です。
5:33注意点として、シーエスエスモジュールズはシャドー・ディーオーエムのような完全な隔離ではありません。
5:41グローバルシーエスエス、親から継承されるプロパティ、コロン・グローバルで指定したルールは、
5:45部品の中へ影響し得ます。
5:50また、同じモジュールから取得したクラスを複数の部品に付ければ、当然それらすべてにスタイルが適用されます。
5:58衝突しにくくなる仕組みであって、影響が一切なくなるわけではない、という理解が正確です。
6:05この前提を知っておくと、意図しない見た目の原因を追いやすくなります。
6:11名前の衝突を防ぐことが主目的で、見た目を外部から完全に切り離す仕組みではない、
6:15と整理しておきましょう。
6:19アプリルーターとの違いも押さえます。
6:21アプリルーターでは、全体用のシーエスエスを通常、エスアールシー・アップ・レイアウト・ティーエスエックスから読み込みます。
6:30シーエスエスを使うためだけに、ユース・クライアントを付ける必要はありません。
6:35シーエスエスモジュールズは、どちらのルーターでも利用できます。
6:39追加の仕組みについては、通常のシーエスエスとモジュールズは追加パッケージなしで使えます。
6:46サスを使う場合は、別途サスのパッケージが必要です。
6:49最初は標準のシーエスエスで構成を理解してから、必要な仕組みを追加すると判断しやすくなります。
6:56レスも標準でそのまま使える意味ではない点に注意します。
6:59最後に、スタイルが反映されないときの調べ方とまとめです。
7:04まず、シーエスエスファイルが読み込まれているか、クラスネームに期待するクラスが付いているかを、
7:08開発者ツールで確認します。
7:13モジュールズのクラスは文字列だけで指定せず、読み込んだオブジェクトから参照してください。
7:20デスクトップで収まっていても、長い見出しで横にはみ出す場合があるため、小さい画面でも折り返しや操作を確認します。
7:28全体はグローバル、部品はモジュールズ。
7:31この分け方が、ネクストジェイエスのシーエスエス入門のゴールです。
7:36焦らず、読み込み、参照、表示の順に確かめていきましょう。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Pages RouterでグローバルCSSとCSS Modulesを使う手順を解説。ファイルの配置、読み込み先、クラスの適用、スタイルの衝突を避ける考え方を紹介します。

解説記事・サンプルコードを読む：Next.jsのCSS入門：グローバルCSSとCSS Modulesの適用手順 →