WEBVTT

1
00:00:00.000 --> 00:00:01.039
こんにちは。

2
00:00:01.039 --> 00:00:05.367
今回は、ネクストジェイエスのシーエスエス入門です。

3
00:00:05.367 --> 00:00:13.157
ページズルーターで、グローバルシーエスエスとシーエスエスモジュールズを使う手順を学びます。

4
00:00:13.157 --> 00:00:19.130
全体の基本スタイルはグローバルシーエスエスへ、カードのような部品ごとの見た目はシーエスエスモジュールズへ分けるのが、

5
00:00:19.130 --> 00:00:25.103
この記事の考え方です。

6
00:00:25.103 --> 00:00:29.691
ファイルの配置、読み込み先、クラスの適用方法、そしてスタイルの衝突を避ける考え方を、

7
00:00:29.691 --> 00:00:34.279
順に確認していきます。

8
00:00:34.279 --> 00:00:36.876
まずは全体像をつかみましょう。

9
00:00:36.876 --> 00:00:43.108
具体例を通して手順を体験しますので、初めての方も安心して進めてください。

10
00:00:43.108 --> 00:00:45.894
まず、二種類のシーエスエスの違いです。

11
00:00:45.894 --> 00:00:52.932
グローバルシーエスエスは、余白や文字の色など、アプリケーション全体に共通する基礎を書く場所です。

12
00:00:52.932 --> 00:01:03.049
一方、シーエスエスモジュールズは部品ごとの見た目を書く仕組みで、ファイル名をドット・モジュール・ドット・シーエスエスで終わらせて使います。

13
00:01:03.049 --> 00:01:08.034
モジュールズでは、書いたクラス名がビルド時に衝突しにくい名前へ変換されるため、

14
00:01:08.034 --> 00:01:13.020
別のファイルで同じクラス名を使っても混ざりにくくなります。

15
00:01:13.020 --> 00:01:17.858
この記事はタイプスクリプトとページズルーターの構成を前提にします。

16
00:01:17.858 --> 00:01:22.037
置き場所と読み込み方を最初に区別しておくと、後でスタイルが反映されないときに、

17
00:01:22.037 --> 00:01:26.216
原因の切り分けがぐっと楽になります。

18
00:01:26.216 --> 00:01:34.026
全体に適用するシーエスエスを、エスアールシー・スタイルズ・グローバルズ・ドット・シーエスエスへ書きます。

19
00:01:34.026 --> 00:01:39.057
内容は、ボックスのサイズ計算をそろえる指定、ボディの余白をなくす指定、文字の色と背景、

20
00:01:39.057 --> 00:01:44.088
フォントと行の高さなど、基礎になるものだけです。

21
00:01:44.088 --> 00:01:48.894
ボタンや入力欄は、周りの文字と同じフォントを使うようそろえます。

22
00:01:48.894 --> 00:01:50.997
リンクの色もここで決めます。

23
00:01:50.997 --> 00:01:54.602
ポイントは、全体に必要な基礎だけに絞ることです。

24
00:01:54.602 --> 00:02:00.459
ここに細かな部品の見た目まで書き込むと、後から上書きする量が増えてしまいます。

25
00:02:00.459 --> 00:02:07.668
色は十六進数で指定し、背景とのコントラストが保てる組み合わせを選んでいる点にも注目してください。

26
00:02:07.668 --> 00:02:17.382
ページズルーターでは、グローバルシーエスエスをエスアールシー・ページズ・アンダースコア・アップ・ティーエスエックスから読み込みます。

27
00:02:17.382 --> 00:02:23.270
このファイルが全ページの土台になるため、ここで一度読み込めば全体へ適用されます。

28
00:02:23.270 --> 00:02:31.954
すでにこのファイルがあり、プロバイダーやレイアウトを使っている場合は、それらを残したままインポートを追加してください。

29
00:02:31.954 --> 00:02:38.430
例は最小構成で、受け取ったコンポーネントとページのプロップスを、そのまま表示する形です。

30
00:02:38.430 --> 00:02:43.287
読み込み先を一か所に決めることが、全体スタイルを管理するコツです。

31
00:02:43.287 --> 00:02:51.088
ページごとに読み込むのではなく、アプリ全体の入り口で一度だけ読み込む、という位置づけを覚えておきましょう。

32
00:02:51.088 --> 00:02:55.403
グローバルシーエスエスのセレクターは、ページ全体へ影響します。

33
00:02:55.403 --> 00:03:01.667
たとえばボタンの背景色をここで一律に指定すると、別の機能のボタンにも同じ色が適用されます。

34
00:03:01.667 --> 00:03:06.678
意図しない場所まで変わってしまうのが、グローバルに書きすぎる難しさです。

35
00:03:06.678 --> 00:03:12.385
だからこそ、余白の初期値や文字の色のような、どこでも共通でよい基礎だけに絞ります。

36
00:03:12.385 --> 00:03:16.839
部品ごとの色や形は、次のシーエスエスモジュールズ側で調整します。

37
00:03:16.839 --> 00:03:21.294
全体と部品の役割を分けることで、後から直す範囲も小さくなります。

38
00:03:21.294 --> 00:03:25.470
逆に言えば、共通化したい基礎はここへ集めるほど効果が出ます。

39
00:03:25.470 --> 00:03:29.228
役割の線引きが、そのまま保守のしやすさにつながります。

40
00:03:29.228 --> 00:03:32.420
次はカード用のシーエスエスモジュールズです。

41
00:03:32.420 --> 00:03:40.254
エスアールシー・コンポーネンツに、アーティクルカード・ドット・モジュール・ドット・シーエスエスを作成します。

42
00:03:40.254 --> 00:03:46.057
カード本体には、幅、中央寄せ、内側の余白、枠線、角の丸み、背景などをまとめます。

43
00:03:46.057 --> 00:03:52.005
幅はミン関数で、小さい画面では親要素に収め、大きい画面では最大幅を制限しています。

44
00:03:52.005 --> 00:03:55.922
見出しとリンクにも、それぞれ専用のクラスを用意します。

45
00:03:55.922 --> 00:04:02.015
記事では、キーボード操作でリンクの位置が分かるよう、フォーカス時の枠も残しています。

46
00:04:02.015 --> 00:04:08.688
余白はクランプ関数で画面幅に応じて調整され、小さい画面でも窮屈にならない工夫が入っています。

47
00:04:08.688 --> 00:04:15.078
タイプスクリプトのコンポーネント、アーティクルカード・ティーエスエックスを作成します。

48
00:04:15.078 --> 00:04:21.766
シーエスエス側のドット・カードは、インポートしたスタイルズ・ドット・カードから参照します。

49
00:04:21.766 --> 00:04:26.670
クラスネームにこの参照を指定することで、初めてスタイルが付きます。

50
00:04:26.670 --> 00:04:31.945
ビルド時には衝突しにくいクラス名へ変換され、別のモジュールで同じドット・カードという名前を使っても、

51
00:04:31.945 --> 00:04:37.221
それぞれのローカルクラスとして扱われます。

52
00:04:37.221 --> 00:04:43.017
文字列でクラス名を直接書かず、読み込んだオブジェクトから参照する点が大切です。

53
00:04:43.017 --> 00:04:50.596
タイトル、説明文、リンク先はプロップスとして受け取るため、別の記事データでも同じカードを使い回せます。

54
00:04:50.596 --> 00:04:57.696
ページ側は、エスアールシー・ページズ・インデックス・ティーエスエックスからカードを読み込みます。

55
00:04:57.696 --> 00:05:03.909
タイトル、説明文、リンク先の三つをプロップスで渡し、見出しの下にカードを表示します。

56
00:05:03.909 --> 00:05:09.234
この例のリンク先は、同じプロジェクトで作成する紹介ページ、アバウトです。

57
00:05:09.234 --> 00:05:14.559
表示確認では画面幅を変え、文字の折り返しや横スクロールがないかを見ます。

58
00:05:14.559 --> 00:05:18.700
シーエスエスをインポートしただけではクラスは付きません。

59
00:05:18.700 --> 00:05:25.800
見た目が変わらないときは、クラスネームの指定とシーエスエス側のクラス名が一致するか調べましょう。

60
00:05:25.800 --> 00:05:33.344
キーボードでリンクへ移動したときに、フォーカスの枠が見えるかどうかも、あわせて確認しておくと安心です。

61
00:05:33.344 --> 00:05:41.207
注意点として、シーエスエスモジュールズはシャドー・ディーオーエムのような完全な隔離ではありません。

62
00:05:41.207 --> 00:05:45.780
グローバルシーエスエス、親から継承されるプロパティ、コロン・グローバルで指定したルールは、

63
00:05:45.780 --> 00:05:50.353
部品の中へ影響し得ます。

64
00:05:50.353 --> 00:05:58.697
また、同じモジュールから取得したクラスを複数の部品に付ければ、当然それらすべてにスタイルが適用されます。

65
00:05:58.697 --> 00:06:05.597
衝突しにくくなる仕組みであって、影響が一切なくなるわけではない、という理解が正確です。

66
00:06:05.597 --> 00:06:11.052
この前提を知っておくと、意図しない見た目の原因を追いやすくなります。

67
00:06:11.052 --> 00:06:15.144
名前の衝突を防ぐことが主目的で、見た目を外部から完全に切り離す仕組みではない、

68
00:06:15.144 --> 00:06:19.236
と整理しておきましょう。

69
00:06:19.236 --> 00:06:21.771
アプリルーターとの違いも押さえます。

70
00:06:21.771 --> 00:06:30.223
アプリルーターでは、全体用のシーエスエスを通常、エスアールシー・アップ・レイアウト・ティーエスエックスから読み込みます。

71
00:06:30.223 --> 00:06:35.576
シーエスエスを使うためだけに、ユース・クライアントを付ける必要はありません。

72
00:06:35.576 --> 00:06:39.942
シーエスエスモジュールズは、どちらのルーターでも利用できます。

73
00:06:39.942 --> 00:06:46.140
追加の仕組みについては、通常のシーエスエスとモジュールズは追加パッケージなしで使えます。

74
00:06:46.140 --> 00:06:49.661
サスを使う場合は、別途サスのパッケージが必要です。

75
00:06:49.661 --> 00:06:56.141
最初は標準のシーエスエスで構成を理解してから、必要な仕組みを追加すると判断しやすくなります。

76
00:06:56.141 --> 00:06:59.944
レスも標準でそのまま使える意味ではない点に注意します。

77
00:06:59.944 --> 00:07:04.258
最後に、スタイルが反映されないときの調べ方とまとめです。

78
00:07:04.258 --> 00:07:08.881
まず、シーエスエスファイルが読み込まれているか、クラスネームに期待するクラスが付いているかを、

79
00:07:08.881 --> 00:07:13.503
開発者ツールで確認します。

80
00:07:13.503 --> 00:07:20.283
モジュールズのクラスは文字列だけで指定せず、読み込んだオブジェクトから参照してください。

81
00:07:20.283 --> 00:07:28.911
デスクトップで収まっていても、長い見出しで横にはみ出す場合があるため、小さい画面でも折り返しや操作を確認します。

82
00:07:28.911 --> 00:07:31.839
全体はグローバル、部品はモジュールズ。

83
00:07:31.839 --> 00:07:36.770
この分け方が、ネクストジェイエスのシーエスエス入門のゴールです。

84
00:07:36.770 --> 00:07:41.084
焦らず、読み込み、参照、表示の順に確かめていきましょう。