WEBVTT

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

2
00:00:00.819 --> 00:00:04.366
エイチティーエムエル、シーエスエス入門、概要編です。

3
00:00:04.366 --> 00:00:08.187
今回のテーマは、シーエスエスのセレクターと条件指定です。

4
00:00:08.187 --> 00:00:12.417
セレクターとは、スタイルを適用する要素を選ぶ仕組みのことです。

5
00:00:12.417 --> 00:00:19.239
色や余白を正しく書いても、セレクターが目的の要素に一致していなければ、見た目はまったく変わりません。

6
00:00:19.239 --> 00:00:23.606
シーエスエスが効かないという悩みの多くは、この選び方の問題です。

7
00:00:23.606 --> 00:00:28.177
元になる記事では、基本の選び方、状態による切り替え、画面や機能による条件指定、

8
00:00:28.177 --> 00:00:32.748
ルール同士が競合したときの読み方を実例で整理しています。

9
00:00:32.748 --> 00:00:37.660
ゴールは、狙った要素に狙ったスタイルだけを当てられるようになることです。

10
00:00:37.660 --> 00:00:39.653
まずは基本の選び方です。

11
00:00:39.653 --> 00:00:43.971
要素名だけを書くと、そのタグすべてが対象になります。

12
00:00:43.971 --> 00:00:48.954
ドットに続けてクラス名を書くと、そのクラスを付けた要素だけ。

13
00:00:48.954 --> 00:00:56.261
シャープに続けてアイディーを書くと、文書の中で一意のアイディーを持つ要素だけが対象です。

14
00:00:56.261 --> 00:01:03.735
アスタリスクは全要素を表し、カンマで区切ると複数のセレクターへ同じ指定をまとめて書けます。

15
00:01:03.735 --> 00:01:10.877
同じクラスは複数の要素に付けられますが、アイディーは文書内で一つだけという決まりです。

16
00:01:10.877 --> 00:01:15.942
またアイディーは、後で学ぶ詳細度がとても高いので、使い回す部品の装飾はクラスを中心に組むと、

17
00:01:15.942 --> 00:01:21.008
あとから調整しやすくなります。

18
00:01:21.008 --> 00:01:23.919
次は、要素同士の関係で選ぶ結合子です。

19
00:01:23.919 --> 00:01:29.283
セレクターを空白でつなぐと、左側の要素のどこかの子孫が対象になります。

20
00:01:29.283 --> 00:01:33.496
大なりの記号は直接の子だけ、プラス記号は直後にある兄弟、チルダは同じ親を持つ後ろの兄弟すべて、

21
00:01:33.496 --> 00:01:37.710
という意味です。

22
00:01:37.710 --> 00:01:45.065
画面の例では、見出しの直後の段落だけを太くしたり、パネルの中の段落だけに色を付けたりしています。

23
00:01:45.065 --> 00:01:50.429
注意点は、途中に要素が増えると直接の子の一致が変わってしまうことです。

24
00:01:50.429 --> 00:01:54.872
構造を深くたどる書き方は、エイチティーエムエルの組み替えに弱くなりがちなので、

25
00:01:54.872 --> 00:01:59.316
本当に必要な範囲だけを指定しましょう。

26
00:01:59.316 --> 00:02:01.937
属性の値を使った選び方もあります。

27
00:02:01.937 --> 00:02:06.409
角括弧の中に属性名を書くと、その属性を持つ要素が対象です。

28
00:02:06.409 --> 00:02:11.883
イコールで値を添えれば完全一致、キャレット記号はその文字で始まる値、ドル記号はその文字で終わる値、

29
00:02:11.883 --> 00:02:17.357
アスタリスクはその文字列を含む値を表します。

30
00:02:17.357 --> 00:02:25.375
画面の例では、ピー・ディー・エフで終わるリンクを太くしたり、メール入力欄だけ枠の色を変えたりしています。

31
00:02:25.375 --> 00:02:27.071
ただし注意も必要です。

32
00:02:27.071 --> 00:02:33.085
リンク先のアドレスの後ろにパラメーターが付くと、末尾の一致は外れてしまいます。

33
00:02:33.085 --> 00:02:40.024
あくまで文字列の見かけで選ぶ仕組みで、実際のファイル形式を判定しているわけではありません。

34
00:02:40.024 --> 00:02:42.053
ここからは擬似クラスです。

35
00:02:42.053 --> 00:02:46.268
コロンを一つ付ける書き方で、要素の今の状態を選べます。

36
00:02:46.268 --> 00:02:51.342
代表例は、ポインターが重なったときのホバー、入力中のフォーカス、チェック済みのチェックド、

37
00:02:51.342 --> 00:02:56.416
入力が無効な状態のインバリッドなどです。

38
00:02:56.416 --> 00:03:01.880
画面のフォーカスビジブルは、ブラウザーがフォーカスの輪郭を見せるべき場面だけを指定でき、

39
00:03:01.880 --> 00:03:07.343
キーボードで操作する人への大切な道しるべになります。

40
00:03:07.343 --> 00:03:14.056
フォーカスウィズインは、中の入力欄にフォーカスがある間、入れ物全体を光らせる指定です。

41
00:03:14.056 --> 00:03:19.364
エラーは赤色だけで伝えず、理由を文章で示す設計と組み合わせましょう。

42
00:03:19.364 --> 00:03:23.646
擬似クラスには、並び順や条件で絞り込む仲間もいます。

43
00:03:23.646 --> 00:03:28.916
ファーストチャイルドは最初の子、エヌスチャイルドは括弧で指定した番目の子で、

44
00:03:28.916 --> 00:03:34.186
偶数だけに背景を付ける縞模様のような表現ができます。

45
00:03:34.186 --> 00:03:41.267
ノットは条件に合わないものを除外し、イズはいくつかの候補をまとめて書くためのものです。

46
00:03:41.267 --> 00:03:45.384
そしてハズは、条件に合う子要素を持つ親を選べます。

47
00:03:45.384 --> 00:03:50.325
たとえば画像を含むカードだけ余白を詰める、といった指定です。

48
00:03:50.325 --> 00:03:55.018
ハズは強力ですが比較的新しい仕組みなので、古いブラウザーを対象に含める場合は、

49
00:03:55.018 --> 00:03:59.712
対応状況を確認してから使いましょう。

50
00:03:59.712 --> 00:04:05.079
擬似要素は、コロンを二つ付ける書き方で、要素の一部や前後を装飾します。

51
00:04:05.079 --> 00:04:12.439
ビフォーとアフターは、要素の前後に生成した内容を置く仕組みで、通常はコンテントの指定が必要です。

52
00:04:12.439 --> 00:04:16.579
画面の例では、注意書きの前に小さな丸印を付けています。

53
00:04:16.579 --> 00:04:21.945
ほかにも、最初の文字だけを変えるファーストレター、リスト記号の色を変えるマーカー、

54
00:04:21.945 --> 00:04:27.312
文字を選択したときの色を変えるセレクションなどがあります。

55
00:04:27.312 --> 00:04:32.372
注意点は、意味のある大切な情報をコンテントだけで作らないことです。

56
00:04:32.372 --> 00:04:38.812
本当に必要な文章やボタン名は、エイチティーエムエルの中にきちんと書いておきましょう。

57
00:04:38.812 --> 00:04:41.385
条件指定の主役がアットルールです。

58
00:04:41.385 --> 00:04:47.286
アットメディアは、画面幅などの条件が成り立つときだけ、中の指定を有効にします。

59
00:04:47.286 --> 00:04:54.398
画面の例では、狭い画面ではカードを一列に、幅が四十八レム以上になったら二列に切り替えています。

60
00:04:54.398 --> 00:05:01.813
アットサポーツは少し違い、そのプロパティや値にブラウザーが対応しているかどうかを調べる仕組みです。

61
00:05:01.813 --> 00:05:10.590
考え方のコツは、すべての環境で困らない土台の指定を先に書き、対応が確認できた環境でのみ追加の見た目を重ねることです。

62
00:05:10.590 --> 00:05:15.584
条件は効かせるためのスイッチであって、土台の代わりにはなりません。

63
00:05:15.584 --> 00:05:21.085
アットコンテナは、画面幅ではなく部品の置き場所の幅で切り替える仕組みです。

64
00:05:21.085 --> 00:05:25.024
まず親にコンテナータイプを設定しておくと、その親の幅が条件を満たしたときに、

65
00:05:25.024 --> 00:05:28.964
中の部品の並びを変えられます。

66
00:05:28.964 --> 00:05:33.424
同じカードを広い場所と狭い場所で使い分けたいときに便利です。

67
00:05:33.424 --> 00:05:43.682
このほかの条件としては、印刷のときだけナビゲーションを隠す指定や、動きを減らす設定をしている人にはアニメーションを付けない配慮があります。

68
00:05:43.682 --> 00:05:49.479
動きそのものはキーフレームで途中経過を定義し、アニメーションとして利用します。

69
00:05:49.479 --> 00:05:53.196
条件ごとに、誰のための切り替えかを意識しましょう。

70
00:05:53.196 --> 00:05:57.042
最後に、ルール同士が競合したときの決着の付け方です。

71
00:05:57.042 --> 00:06:02.516
ブラウザーは、宣言の出どころや重要度、そして詳細度を比べて勝敗を決めます。

72
00:06:02.516 --> 00:06:07.102
詳細度の物差しはシンプルで、アイディーはクラスや属性、擬似クラスより強く、

73
00:06:07.102 --> 00:06:11.688
それらは要素名や擬似要素より強い、という順番です。

74
00:06:11.688 --> 00:06:16.422
全称セレクターや結合子の記号そのものは、詳細度を押し上げません。

75
00:06:16.422 --> 00:06:20.268
強さがまったく同じなら、後に書かれた宣言が勝ちます。

76
00:06:20.268 --> 00:06:27.073
変わり種として、ウェアの中身は常にゼロとして数えられ、あとから上書きしやすい指定が作れます。

77
00:06:27.073 --> 00:06:31.215
逆にイズやノットは、中身で一番強いものの影響を受けます。

78
00:06:31.215 --> 00:06:37.576
安易にインポータントを足す前に、開発者ツールで何と競合しているかを調べるのが先決です。

79
00:06:37.576 --> 00:06:41.038
仕上げにカスケードレイヤーを紹介します。

80
00:06:41.038 --> 00:06:49.694
レイヤーは、指定のまとまり同士に優先順位を付ける仕組みで、通常は後に宣言したレイヤーが優先されます。

81
00:06:49.694 --> 00:06:56.619
基盤の指定と部品の指定を分けて管理すれば、詳細度の競争を設計の段階で減らせます。

82
00:06:56.619 --> 00:06:58.177
今回のまとめです。

83
00:06:58.177 --> 00:07:04.149
セレクターは要素の選び方、擬似クラスと擬似要素は状態と一部の指定、アットルールは条件のスイッチ、

84
00:07:04.149 --> 00:07:10.122
そして競合は詳細度とカスケードで読み解く。

85
00:07:10.122 --> 00:07:15.662
この四つの視点がそろうと、効かない理由を自分で切り分けられます。

86
00:07:15.662 --> 00:07:23.971
記事の課題では、注目クラスのカードの背景を変え、画像のあるカードだけをハズで選ぶ練習ができます。

87
00:07:23.971 --> 00:07:29.684
まずは通常の表示を完成させてから、追加の装飾を重ねていきましょう。