SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSセレクターと条件指定：擬似クラス・擬似要素・詳細度を実例で理解するの解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、シーエスエス入門、概要編です。
  3. 0:04今回のテーマは、シーエスエスのセレクターと条件指定です。
  4. 0:08セレクターとは、スタイルを適用する要素を選ぶ仕組みのことです。
  5. 0:12色や余白を正しく書いても、セレクターが目的の要素に一致していなければ、見た目はまったく変わりません。
  6. 0:19シーエスエスが効かないという悩みの多くは、この選び方の問題です。
  7. 0:23元になる記事では、基本の選び方、状態による切り替え、画面や機能による条件指定、
  8. 0:28ルール同士が競合したときの読み方を実例で整理しています。
  9. 0:32ゴールは、狙った要素に狙ったスタイルだけを当てられるようになることです。
  10. 0:37まずは基本の選び方です。
  11. 0:39要素名だけを書くと、そのタグすべてが対象になります。
  12. 0:43ドットに続けてクラス名を書くと、そのクラスを付けた要素だけ。
  13. 0:48シャープに続けてアイディーを書くと、文書の中で一意のアイディーを持つ要素だけが対象です。
  14. 0:56アスタリスクは全要素を表し、カンマで区切ると複数のセレクターへ同じ指定をまとめて書けます。
  15. 1:03同じクラスは複数の要素に付けられますが、アイディーは文書内で一つだけという決まりです。
  16. 1:10またアイディーは、後で学ぶ詳細度がとても高いので、使い回す部品の装飾はクラスを中心に組むと、
  17. 1:15あとから調整しやすくなります。
  18. 1:21次は、要素同士の関係で選ぶ結合子です。
  19. 1:23セレクターを空白でつなぐと、左側の要素のどこかの子孫が対象になります。
  20. 1:29大なりの記号は直接の子だけ、プラス記号は直後にある兄弟、チルダは同じ親を持つ後ろの兄弟すべて、
  21. 1:33という意味です。
  22. 1:37画面の例では、見出しの直後の段落だけを太くしたり、パネルの中の段落だけに色を付けたりしています。
  23. 1:45注意点は、途中に要素が増えると直接の子の一致が変わってしまうことです。
  24. 1:50構造を深くたどる書き方は、エイチティーエムエルの組み替えに弱くなりがちなので、
  25. 1:54本当に必要な範囲だけを指定しましょう。
  26. 1:59属性の値を使った選び方もあります。
  27. 2:01角括弧の中に属性名を書くと、その属性を持つ要素が対象です。
  28. 2:06イコールで値を添えれば完全一致、キャレット記号はその文字で始まる値、ドル記号はその文字で終わる値、
  29. 2:11アスタリスクはその文字列を含む値を表します。
  30. 2:17画面の例では、ピー・ディー・エフで終わるリンクを太くしたり、メール入力欄だけ枠の色を変えたりしています。
  31. 2:25ただし注意も必要です。
  32. 2:27リンク先のアドレスの後ろにパラメーターが付くと、末尾の一致は外れてしまいます。
  33. 2:33あくまで文字列の見かけで選ぶ仕組みで、実際のファイル形式を判定しているわけではありません。
  34. 2:40ここからは擬似クラスです。
  35. 2:42コロンを一つ付ける書き方で、要素の今の状態を選べます。
  36. 2:46代表例は、ポインターが重なったときのホバー、入力中のフォーカス、チェック済みのチェックド、
  37. 2:51入力が無効な状態のインバリッドなどです。
  38. 2:56画面のフォーカスビジブルは、ブラウザーがフォーカスの輪郭を見せるべき場面だけを指定でき、
  39. 3:01キーボードで操作する人への大切な道しるべになります。
  40. 3:07フォーカスウィズインは、中の入力欄にフォーカスがある間、入れ物全体を光らせる指定です。
  41. 3:14エラーは赤色だけで伝えず、理由を文章で示す設計と組み合わせましょう。
  42. 3:19擬似クラスには、並び順や条件で絞り込む仲間もいます。
  43. 3:23ファーストチャイルドは最初の子、エヌスチャイルドは括弧で指定した番目の子で、
  44. 3:28偶数だけに背景を付ける縞模様のような表現ができます。
  45. 3:34ノットは条件に合わないものを除外し、イズはいくつかの候補をまとめて書くためのものです。
  46. 3:41そしてハズは、条件に合う子要素を持つ親を選べます。
  47. 3:45たとえば画像を含むカードだけ余白を詰める、といった指定です。
  48. 3:50ハズは強力ですが比較的新しい仕組みなので、古いブラウザーを対象に含める場合は、
  49. 3:55対応状況を確認してから使いましょう。
  50. 3:59擬似要素は、コロンを二つ付ける書き方で、要素の一部や前後を装飾します。
  51. 4:05ビフォーとアフターは、要素の前後に生成した内容を置く仕組みで、通常はコンテントの指定が必要です。
  52. 4:12画面の例では、注意書きの前に小さな丸印を付けています。
  53. 4:16ほかにも、最初の文字だけを変えるファーストレター、リスト記号の色を変えるマーカー、
  54. 4:21文字を選択したときの色を変えるセレクションなどがあります。
  55. 4:27注意点は、意味のある大切な情報をコンテントだけで作らないことです。
  56. 4:32本当に必要な文章やボタン名は、エイチティーエムエルの中にきちんと書いておきましょう。
  57. 4:38条件指定の主役がアットルールです。
  58. 4:41アットメディアは、画面幅などの条件が成り立つときだけ、中の指定を有効にします。
  59. 4:47画面の例では、狭い画面ではカードを一列に、幅が四十八レム以上になったら二列に切り替えています。
  60. 4:54アットサポーツは少し違い、そのプロパティや値にブラウザーが対応しているかどうかを調べる仕組みです。
  61. 5:01考え方のコツは、すべての環境で困らない土台の指定を先に書き、対応が確認できた環境でのみ追加の見た目を重ねることです。
  62. 5:10条件は効かせるためのスイッチであって、土台の代わりにはなりません。
  63. 5:15アットコンテナは、画面幅ではなく部品の置き場所の幅で切り替える仕組みです。
  64. 5:21まず親にコンテナータイプを設定しておくと、その親の幅が条件を満たしたときに、
  65. 5:25中の部品の並びを変えられます。
  66. 5:28同じカードを広い場所と狭い場所で使い分けたいときに便利です。
  67. 5:33このほかの条件としては、印刷のときだけナビゲーションを隠す指定や、動きを減らす設定をしている人にはアニメーションを付けない配慮があります。
  68. 5:43動きそのものはキーフレームで途中経過を定義し、アニメーションとして利用します。
  69. 5:49条件ごとに、誰のための切り替えかを意識しましょう。
  70. 5:53最後に、ルール同士が競合したときの決着の付け方です。
  71. 5:57ブラウザーは、宣言の出どころや重要度、そして詳細度を比べて勝敗を決めます。
  72. 6:02詳細度の物差しはシンプルで、アイディーはクラスや属性、擬似クラスより強く、
  73. 6:07それらは要素名や擬似要素より強い、という順番です。
  74. 6:11全称セレクターや結合子の記号そのものは、詳細度を押し上げません。
  75. 6:16強さがまったく同じなら、後に書かれた宣言が勝ちます。
  76. 6:20変わり種として、ウェアの中身は常にゼロとして数えられ、あとから上書きしやすい指定が作れます。
  77. 6:27逆にイズやノットは、中身で一番強いものの影響を受けます。
  78. 6:31安易にインポータントを足す前に、開発者ツールで何と競合しているかを調べるのが先決です。
  79. 6:37仕上げにカスケードレイヤーを紹介します。
  80. 6:41レイヤーは、指定のまとまり同士に優先順位を付ける仕組みで、通常は後に宣言したレイヤーが優先されます。
  81. 6:49基盤の指定と部品の指定を分けて管理すれば、詳細度の競争を設計の段階で減らせます。
  82. 6:56今回のまとめです。
  83. 6:58セレクターは要素の選び方、擬似クラスと擬似要素は状態と一部の指定、アットルールは条件のスイッチ、
  84. 7:04そして競合は詳細度とカスケードで読み解く。
  85. 7:10この四つの視点がそろうと、効かない理由を自分で切り分けられます。
  86. 7:15記事の課題では、注目クラスのカードの背景を変え、画像のあるカードだけをハズで選ぶ練習ができます。
  87. 7:23まずは通常の表示を完成させてから、追加の装飾を重ねていきましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

CSSのセレクター、擬似クラス、擬似要素、@media・@supports・@container、カスケードと詳細度を実例で学びます。

解説記事・サンプルコードを読む：CSSセレクターと条件指定：擬似クラス・擬似要素・詳細度を実例で理解する →