WEBVTT

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

2
00:00:00.840 --> 00:00:04.482
エイチティーエムエル、シーエスエス入門、第八回です。

3
00:00:04.482 --> 00:00:07.284
今回のテーマは、シーエスエスの応用です。

4
00:00:07.284 --> 00:00:12.887
これまで私たちは、練習のために、シーエスエスをファイルの末尾へ追加してきました。

5
00:00:12.887 --> 00:00:19.050
今回は、その積み重なったシーエスエスを整理して、完成サイトのスタイルへ置き換える回です。

6
00:00:19.050 --> 00:00:25.493
同じ色やボタンの指定を何度も書く状態から、変更する場所が分かりやすいシーエスエスへ進みます。

7
00:00:25.493 --> 00:00:29.835
使う道具は、カスタムプロパティ、共通部品、そして状態表現です。

8
00:00:29.835 --> 00:00:35.158
ジャバスクリプトで切り替える状態の見た目も、この段階で先に用意しておきます。

9
00:00:35.158 --> 00:00:39.220
元になる記事は、エスイーの部屋の、シーエスエス応用、です。

10
00:00:39.220 --> 00:00:42.131
最初の道具は、カスタムプロパティです。

11
00:00:42.131 --> 00:00:46.726
これは、色などの値に名前を付けて、定義しておける仕組みです。

12
00:00:46.726 --> 00:00:49.790
大切なのは、名前を用途で決めることです。

13
00:00:49.790 --> 00:00:54.232
たとえば、インクは文字の色、ペーパーはページの背景、サーフェスはカードや入力欄の面、

14
00:00:54.232 --> 00:00:58.675
ラインは境界線、という具合です。

15
00:00:58.675 --> 00:01:03.271
使う側は、バー、括弧の中に変数名、と書いて参照するだけです。

16
00:01:03.271 --> 00:01:10.317
もしブランドの色を変えたくなったら、定義した一か所を直せば、参照している全部に反映されます。

17
00:01:10.317 --> 00:01:17.517
色の値を何十か所も探して書き換える、という作業から解放されるのが、この仕組みの大きな利点です。

18
00:01:17.517 --> 00:01:21.113
変数を置く場所と、テーマの切り替え方を見ます。

19
00:01:21.113 --> 00:01:25.021
カスタムプロパティは、通常、子要素へ継承されます。

20
00:01:25.021 --> 00:01:30.336
そこで、基本値はルート、つまり文書の一番上の要素にまとめて置きます。

21
00:01:30.336 --> 00:01:36.980
暗いテーマにしたい場合は、エイチティーエムエルの要素に、データテーマ、イコール、

22
00:01:36.980 --> 00:01:43.624
ダーク、という属性が付いたときだけ、同じ変数名の値を差し替える指定を、もう一組用意します。

23
00:01:43.624 --> 00:01:49.408
ボタンやカードなどの部品側は、変数を参照する書き方のままで何も変えません。

24
00:01:49.408 --> 00:01:55.661
値の定義だけが入れ替わることで、サイト全体のテーマが切り替わる、という設計です。

25
00:01:55.661 --> 00:01:59.257
部品と配色を分けて考えられるのがポイントです。

26
00:01:59.257 --> 00:02:02.134
テーマを切り替えるときの注意点です。

27
00:02:02.134 --> 00:02:08.366
背景色だけを暗くすると、本文の文字や入力欄が背景に沈んで、読みにくくなります。

28
00:02:08.366 --> 00:02:12.841
確認すべきは、背景と文字の組み合わせだけではありません。

29
00:02:12.841 --> 00:02:19.393
リンクの色、カードなどの面の色、境界線の色まで、組み合わせ全体で読めるかを見ます。

30
00:02:19.393 --> 00:02:22.909
また、カラースキームという指定も出てきます。

31
00:02:22.909 --> 00:02:28.502
これは、フォームの部品など、ブラウザーが標準で用意する部品に対して、今は明るいテーマです、

32
00:02:28.502 --> 00:02:34.095
暗いテーマです、という意図を伝えるためのものです。

33
00:02:34.095 --> 00:02:38.091
ただし、これは自分の色設定の代わりにはなりません。

34
00:02:38.091 --> 00:02:42.725
自分の色は、変数の定義で責任を持って決める必要があります。

35
00:02:42.725 --> 00:02:47.161
では、完成版シーエスエスの最初、変数の定義部分を見てみましょう。

36
00:02:47.161 --> 00:02:49.518
上の塊が、通常の明るいテーマです。

37
00:02:49.518 --> 00:02:54.509
文字のインク、背景のペーパー、面のサーフェス、淡い色のティント、境界線のライン、

38
00:02:54.509 --> 00:02:59.500
強調色のアクセント、リンク、といった用途ごとの色が並んでいます。

39
00:02:59.500 --> 00:03:03.659
最後のカラースキーム、ライトは、標準部品への意図の伝達です。

40
00:03:03.659 --> 00:03:05.461
下の塊が、暗いテーマです。

41
00:03:05.461 --> 00:03:10.868
変数の名前はまったく同じで、値だけが暗い背景でも読める色に差し替わっています。

42
00:03:10.868 --> 00:03:13.502
カラースキームもダークになっています。

43
00:03:13.502 --> 00:03:15.166
名前が同じで値だけ違う。

44
00:03:15.166 --> 00:03:17.939
この対応表が、テーマ切り替えの正体です。

45
00:03:17.939 --> 00:03:21.127
なお、暗いテーマではアクセントが抜けています。

46
00:03:21.127 --> 00:03:25.425
これは、明るいテーマの強調色をそのまま流用する設計だからです。

47
00:03:25.425 --> 00:03:28.062
作業の方法自体も、これまでと違います。

48
00:03:28.062 --> 00:03:31.671
これまでの回では、スタイルズ ドット シーエスエスの末尾へコードを追加してきましたが、

49
00:03:31.671 --> 00:03:35.280
この回は違います。

50
00:03:35.280 --> 00:03:38.333
ファイル全体を、完成版の内容で置き換えます。

51
00:03:38.333 --> 00:03:43.607
理由は、学習のために重ねてきた重複した指定を、一度きれいに整理するためです。

52
00:03:43.607 --> 00:03:46.383
完成版の中の並び順にも決まりがあります。

53
00:03:46.383 --> 00:03:49.437
最初に変数、次に基本の要素、レイアウト、部品、最後にレスポンシブの調整、

54
00:03:49.437 --> 00:03:52.490
という順序です。

55
00:03:52.490 --> 00:03:58.875
順序が決まっていると、直したい指定がファイルのどのあたりにあるか、見当が付けやすくなります。

56
00:03:58.875 --> 00:04:04.149
なお、エイチティーエムエルは、第三回で作ったものを引き続きそのまま使います。

57
00:04:04.149 --> 00:04:06.370
変えるのはシーエスエスだけです。

58
00:04:06.370 --> 00:04:08.556
次に、共通部品のボタンです。

59
00:04:08.556 --> 00:04:14.177
ドット、ボタン、というクラスを作り、ボタンの見た目を一か所にまとめます。

60
00:04:14.177 --> 00:04:18.237
補助的な操作には、ドット、ボタン、セカンダリー、というクラスを組み合わせて、

61
00:04:18.237 --> 00:04:22.296
落ち着いた見た目に変えます。

62
00:04:22.296 --> 00:04:27.605
このボタンクラスは、ページ内を移動するリンクに付けることもできます。

63
00:04:27.605 --> 00:04:30.103
ただし、ここは大切な注意点です。

64
00:04:30.103 --> 00:04:36.661
見た目がボタンらしくなっても、そのエイチティーエムエル要素の役割はリンクのままです。

65
00:04:36.661 --> 00:04:41.892
別のページへ移動するのか、その場で動作するのか、という違いは、シーエスエスのクラス名ではなく、

66
00:04:41.892 --> 00:04:47.122
エイチティーエムエルの要素で決まります。

67
00:04:47.122 --> 00:04:51.182
見た目と役割を混同しないことが、部品設計の基本です。

68
00:04:51.182 --> 00:04:53.907
状態の表現を三つ、まとめて用意します。

69
00:04:53.907 --> 00:04:55.627
一つ目はフォーカスです。

70
00:04:55.627 --> 00:04:59.284
フォーカス、ビジブル、という指定で、キーボード操作で項目を移動したときに、

71
00:04:59.284 --> 00:05:02.941
輪郭線が見えるようにします。

72
00:05:02.941 --> 00:05:04.661
二つ目は、無効状態です。

73
00:05:04.661 --> 00:05:09.107
ディセーブルド、という指定で、押せないボタンを薄く表示します。

74
00:05:09.107 --> 00:05:12.118
ただし、意味を色だけで伝えてはいけません。

75
00:05:12.118 --> 00:05:16.133
なぜ押せないのかは、フォームの説明文にも残しておきます。

76
00:05:16.133 --> 00:05:17.711
三つ目は、非表示です。

77
00:05:17.711 --> 00:05:22.586
ヒドゥン属性のある要素は、必ず非表示になるよう、強い指定を置きます。

78
00:05:22.586 --> 00:05:30.330
フレックスボックスなどのディスプレイ指定が付いた部品でも、隠したつもりが表示されてしまう事故を防ぐためです。

79
00:05:30.330 --> 00:05:33.691
部品の中の間隔の整え方も見ておきましょう。

80
00:05:33.691 --> 00:05:38.012
カードの中身は、縦方向のフレックスボックスで並べます。

81
00:05:38.012 --> 00:05:43.294
そして、カードの中のリンクに、マージントップ、オートを指定します。

82
00:05:43.294 --> 00:05:49.535
これは、上側の余白が自動で伸びて、リンクを一番下へ押し下げる、という意味です。

83
00:05:49.535 --> 00:05:57.378
説明文の長さがカードごとに違っても、横に並んだカードのリンクの位置が、下端でそろうようになります。

84
00:05:57.378 --> 00:06:01.219
ここで注目してほしいのは、手法の組み合わせです。

85
00:06:01.219 --> 00:06:07.141
カード同士を並べるのはグリッド、カードの中を整えるのはフレックスボックス。

86
00:06:07.141 --> 00:06:11.782
外側と内側で、別のレイアウト手法を使い分けている好例です。

87
00:06:11.782 --> 00:06:14.842
動きへの配慮も、応用の一つです。

88
00:06:14.842 --> 00:06:25.360
プリファーズ、リデュースト、モーションは、利用者が、動きを減らす、という設定をしているかどうかを表す条件です。

89
00:06:25.360 --> 00:06:35.496
今回の完成版では、逆の条件、つまり、動きを減らす設定がないときだけ、ボタンに短い移動の効果を付けています。

90
00:06:35.496 --> 00:06:40.086
ボタンが少しだけ上に浮く、という小さな動きです。

91
00:06:40.086 --> 00:06:44.867
原則は、動きはあくまで補助的な装飾にとどめること。

92
00:06:44.867 --> 00:06:51.752
アニメーションがなくても、操作の意味がきちんと伝わるようにしておきます。

93
00:06:51.752 --> 00:06:58.063
また、暗いテーマの見た目は、今の段階では開発者ツールで確認します。

94
00:06:58.063 --> 00:07:06.670
エイチティーエムエル要素に、データテーマ、ダークを一時的に追加すれば、暗い配色を試せます。

95
00:07:06.670 --> 00:07:11.642
本物の切り替えは、次回、ジャバスクリプトで行います。

96
00:07:11.642 --> 00:07:14.158
最後に、練習と保守の考え方です。

97
00:07:14.158 --> 00:07:21.863
練習の一つ目は、変数のアクセントだけを変更して、ボタンの色へ一括で反映されるかを確認することです。

98
00:07:21.863 --> 00:07:25.322
二つ目は、カードの角丸を変えてみることです。

99
00:07:25.322 --> 00:07:30.196
どちらも、直す場所が一か所で済むことを体感するための練習です。

100
00:07:30.196 --> 00:07:34.914
共通化とは、何でも一つのクラスに詰め込むことではありません。

101
00:07:34.914 --> 00:07:38.845
同じ役割の指定を、同じ場所へ集めることが目的です。

102
00:07:38.845 --> 00:07:48.279
そして保守の心得として、シーエスエスを増やす前に、開発者ツールで、今どのルールが効いているかを調べる習慣を付けましょう。

103
00:07:48.279 --> 00:07:53.626
上書きを重ね続けると、効かない原因を追うのがどんどん難しくなります。

104
00:07:53.626 --> 00:07:54.569
まとめです。

105
00:07:54.569 --> 00:08:02.746
今回は、色をカスタムプロパティで管理し、共通部品と状態表現をそろえ、完成版シーエスエスへ置き換えました。

106
00:08:02.746 --> 00:08:09.350
次回は、このテーマ属性をジャバスクリプトで切り替えるなど、ページに操作を追加します。

107
00:08:09.350 --> 00:08:10.765
お疲れさまでした。