SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSS応用：カスタムプロパティ・部品設計・状態表現でスタイルを整理するの解説動画

再生時間 8:11動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、シーエスエス入門、第八回です。
  3. 0:04今回のテーマは、シーエスエスの応用です。
  4. 0:07これまで私たちは、練習のために、シーエスエスをファイルの末尾へ追加してきました。
  5. 0:12今回は、その積み重なったシーエスエスを整理して、完成サイトのスタイルへ置き換える回です。
  6. 0:19同じ色やボタンの指定を何度も書く状態から、変更する場所が分かりやすいシーエスエスへ進みます。
  7. 0:25使う道具は、カスタムプロパティ、共通部品、そして状態表現です。
  8. 0:29ジャバスクリプトで切り替える状態の見た目も、この段階で先に用意しておきます。
  9. 0:35元になる記事は、エスイーの部屋の、シーエスエス応用、です。
  10. 0:39最初の道具は、カスタムプロパティです。
  11. 0:42これは、色などの値に名前を付けて、定義しておける仕組みです。
  12. 0:46大切なのは、名前を用途で決めることです。
  13. 0:49たとえば、インクは文字の色、ペーパーはページの背景、サーフェスはカードや入力欄の面、
  14. 0:54ラインは境界線、という具合です。
  15. 0:58使う側は、バー、括弧の中に変数名、と書いて参照するだけです。
  16. 1:03もしブランドの色を変えたくなったら、定義した一か所を直せば、参照している全部に反映されます。
  17. 1:10色の値を何十か所も探して書き換える、という作業から解放されるのが、この仕組みの大きな利点です。
  18. 1:17変数を置く場所と、テーマの切り替え方を見ます。
  19. 1:21カスタムプロパティは、通常、子要素へ継承されます。
  20. 1:25そこで、基本値はルート、つまり文書の一番上の要素にまとめて置きます。
  21. 1:30暗いテーマにしたい場合は、エイチティーエムエルの要素に、データテーマ、イコール、
  22. 1:36ダーク、という属性が付いたときだけ、同じ変数名の値を差し替える指定を、もう一組用意します。
  23. 1:43ボタンやカードなどの部品側は、変数を参照する書き方のままで何も変えません。
  24. 1:49値の定義だけが入れ替わることで、サイト全体のテーマが切り替わる、という設計です。
  25. 1:55部品と配色を分けて考えられるのがポイントです。
  26. 1:59テーマを切り替えるときの注意点です。
  27. 2:02背景色だけを暗くすると、本文の文字や入力欄が背景に沈んで、読みにくくなります。
  28. 2:08確認すべきは、背景と文字の組み合わせだけではありません。
  29. 2:12リンクの色、カードなどの面の色、境界線の色まで、組み合わせ全体で読めるかを見ます。
  30. 2:19また、カラースキームという指定も出てきます。
  31. 2:22これは、フォームの部品など、ブラウザーが標準で用意する部品に対して、今は明るいテーマです、
  32. 2:28暗いテーマです、という意図を伝えるためのものです。
  33. 2:34ただし、これは自分の色設定の代わりにはなりません。
  34. 2:38自分の色は、変数の定義で責任を持って決める必要があります。
  35. 2:42では、完成版シーエスエスの最初、変数の定義部分を見てみましょう。
  36. 2:47上の塊が、通常の明るいテーマです。
  37. 2:49文字のインク、背景のペーパー、面のサーフェス、淡い色のティント、境界線のライン、
  38. 2:54強調色のアクセント、リンク、といった用途ごとの色が並んでいます。
  39. 2:59最後のカラースキーム、ライトは、標準部品への意図の伝達です。
  40. 3:03下の塊が、暗いテーマです。
  41. 3:05変数の名前はまったく同じで、値だけが暗い背景でも読める色に差し替わっています。
  42. 3:10カラースキームもダークになっています。
  43. 3:13名前が同じで値だけ違う。
  44. 3:15この対応表が、テーマ切り替えの正体です。
  45. 3:17なお、暗いテーマではアクセントが抜けています。
  46. 3:21これは、明るいテーマの強調色をそのまま流用する設計だからです。
  47. 3:25作業の方法自体も、これまでと違います。
  48. 3:28これまでの回では、スタイルズ ドット シーエスエスの末尾へコードを追加してきましたが、
  49. 3:31この回は違います。
  50. 3:35ファイル全体を、完成版の内容で置き換えます。
  51. 3:38理由は、学習のために重ねてきた重複した指定を、一度きれいに整理するためです。
  52. 3:43完成版の中の並び順にも決まりがあります。
  53. 3:46最初に変数、次に基本の要素、レイアウト、部品、最後にレスポンシブの調整、
  54. 3:49という順序です。
  55. 3:52順序が決まっていると、直したい指定がファイルのどのあたりにあるか、見当が付けやすくなります。
  56. 3:58なお、エイチティーエムエルは、第三回で作ったものを引き続きそのまま使います。
  57. 4:04変えるのはシーエスエスだけです。
  58. 4:06次に、共通部品のボタンです。
  59. 4:08ドット、ボタン、というクラスを作り、ボタンの見た目を一か所にまとめます。
  60. 4:14補助的な操作には、ドット、ボタン、セカンダリー、というクラスを組み合わせて、
  61. 4:18落ち着いた見た目に変えます。
  62. 4:22このボタンクラスは、ページ内を移動するリンクに付けることもできます。
  63. 4:27ただし、ここは大切な注意点です。
  64. 4:30見た目がボタンらしくなっても、そのエイチティーエムエル要素の役割はリンクのままです。
  65. 4:36別のページへ移動するのか、その場で動作するのか、という違いは、シーエスエスのクラス名ではなく、
  66. 4:41エイチティーエムエルの要素で決まります。
  67. 4:47見た目と役割を混同しないことが、部品設計の基本です。
  68. 4:51状態の表現を三つ、まとめて用意します。
  69. 4:53一つ目はフォーカスです。
  70. 4:55フォーカス、ビジブル、という指定で、キーボード操作で項目を移動したときに、
  71. 4:59輪郭線が見えるようにします。
  72. 5:02二つ目は、無効状態です。
  73. 5:04ディセーブルド、という指定で、押せないボタンを薄く表示します。
  74. 5:09ただし、意味を色だけで伝えてはいけません。
  75. 5:12なぜ押せないのかは、フォームの説明文にも残しておきます。
  76. 5:16三つ目は、非表示です。
  77. 5:17ヒドゥン属性のある要素は、必ず非表示になるよう、強い指定を置きます。
  78. 5:22フレックスボックスなどのディスプレイ指定が付いた部品でも、隠したつもりが表示されてしまう事故を防ぐためです。
  79. 5:30部品の中の間隔の整え方も見ておきましょう。
  80. 5:33カードの中身は、縦方向のフレックスボックスで並べます。
  81. 5:38そして、カードの中のリンクに、マージントップ、オートを指定します。
  82. 5:43これは、上側の余白が自動で伸びて、リンクを一番下へ押し下げる、という意味です。
  83. 5:49説明文の長さがカードごとに違っても、横に並んだカードのリンクの位置が、下端でそろうようになります。
  84. 5:57ここで注目してほしいのは、手法の組み合わせです。
  85. 6:01カード同士を並べるのはグリッド、カードの中を整えるのはフレックスボックス。
  86. 6:07外側と内側で、別のレイアウト手法を使い分けている好例です。
  87. 6:11動きへの配慮も、応用の一つです。
  88. 6:14プリファーズ、リデュースト、モーションは、利用者が、動きを減らす、という設定をしているかどうかを表す条件です。
  89. 6:25今回の完成版では、逆の条件、つまり、動きを減らす設定がないときだけ、ボタンに短い移動の効果を付けています。
  90. 6:35ボタンが少しだけ上に浮く、という小さな動きです。
  91. 6:40原則は、動きはあくまで補助的な装飾にとどめること。
  92. 6:44アニメーションがなくても、操作の意味がきちんと伝わるようにしておきます。
  93. 6:51また、暗いテーマの見た目は、今の段階では開発者ツールで確認します。
  94. 6:58エイチティーエムエル要素に、データテーマ、ダークを一時的に追加すれば、暗い配色を試せます。
  95. 7:06本物の切り替えは、次回、ジャバスクリプトで行います。
  96. 7:11最後に、練習と保守の考え方です。
  97. 7:14練習の一つ目は、変数のアクセントだけを変更して、ボタンの色へ一括で反映されるかを確認することです。
  98. 7:21二つ目は、カードの角丸を変えてみることです。
  99. 7:25どちらも、直す場所が一か所で済むことを体感するための練習です。
  100. 7:30共通化とは、何でも一つのクラスに詰め込むことではありません。
  101. 7:34同じ役割の指定を、同じ場所へ集めることが目的です。
  102. 7:38そして保守の心得として、シーエスエスを増やす前に、開発者ツールで、今どのルールが効いているかを調べる習慣を付けましょう。
  103. 7:48上書きを重ね続けると、効かない原因を追うのがどんどん難しくなります。
  104. 7:53まとめです。
  105. 7:54今回は、色をカスタムプロパティで管理し、共通部品と状態表現をそろえ、完成版シーエスエスへ置き換えました。
  106. 8:02次回は、このテーマ属性をジャバスクリプトで切り替えるなど、ページに操作を追加します。
  107. 8:09お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

カスタムプロパティで配色を管理し、共通ボタン、フォーカス、無効状態、動きを減らす設定に対応。完成版CSSへ整理します。

解説記事・サンプルコードを読む：CSS応用：カスタムプロパティ・部品設計・状態表現でスタイルを整理する →