WEBVTT

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

2
00:00:00.845 --> 00:00:03.379
シーエスエス、リファレンス解説です。

3
00:00:03.379 --> 00:00:06.195
今回のテーマは、ゼットインデックスです。

4
00:00:06.195 --> 00:00:11.687
これは、要素が重なったときに、どちらを手前に表示するかを決めるプロパティです。

5
00:00:11.687 --> 00:00:14.925
紙を机の上に重ねる場面を思い浮かべてください。

6
00:00:14.925 --> 00:00:20.135
あとから置いた紙が上になることもあれば、順番を入れ替えたいこともあります。

7
00:00:20.135 --> 00:00:23.796
この動画では、対象の箱に二を指定した場合と、ゼロを指定した場合を比べて、

8
00:00:23.796 --> 00:00:27.457
前後がどう変わるかを確認します。

9
00:00:27.457 --> 00:00:32.666
基本の書き方、主な値、実例、そして効かないときの確認まで順番に解説します。

10
00:00:32.666 --> 00:00:39.988
大きな数字を書けば必ず一番前へ出る、という単純な仕組みではない点が、このプロパティの大切なポイントです。

11
00:00:39.988 --> 00:00:41.630
まず基本の書き方です。

12
00:00:41.630 --> 00:00:47.153
セレクターのあとに、ゼットインデックス、コロン、値、セミコロンを書きます。

13
00:00:47.153 --> 00:00:52.228
スライドの例では、デモというクラスを持つ要素に、二を指定しています。

14
00:00:52.228 --> 00:00:56.259
意味は、この要素の重なり順を二にする、ということです。

15
00:00:56.259 --> 00:01:00.140
ここで大切なのは、前に出したい要素自身に書く点です。

16
00:01:00.140 --> 00:01:04.767
ただし、この一行だけを書いても、すぐに前へ出るとは限りません。

17
00:01:04.767 --> 00:01:08.649
要素の配置方法など、効くための条件が関係してきます。

18
00:01:08.649 --> 00:01:11.933
その条件は後のセクションで丁寧に確認します。

19
00:01:11.933 --> 00:01:17.008
まずは書き方として、プロパティ名と整数の組み合わせを覚えてください。

20
00:01:17.008 --> 00:01:23.576
対象のクラス名とエイチティーエムエルのクラスが一致しているかも、あわせて確認しましょう。

21
00:01:23.576 --> 00:01:26.180
指定できる主な値を確認します。

22
00:01:26.180 --> 00:01:28.785
値は、オート、または整数です。

23
00:01:28.785 --> 00:01:32.431
オートは、重なり順を自動に任せる指定です。

24
00:01:32.431 --> 00:01:39.896
数字を指定した場合は、同じ重なりの文脈の中で、数字が大きい要素ほど手前に表示されます。

25
00:01:39.896 --> 00:01:47.015
ゼロも使えますし、マイナス一のような負の数を指定して、後ろへ下げることもできます。

26
00:01:47.015 --> 00:01:48.577
単位は付けません。

27
00:01:48.577 --> 00:01:55.349
ピクセルやパーセントのような単位は不要で、整数だけを書く点に注意してください。

28
00:01:55.349 --> 00:02:02.120
また、百や千のような極端に大きな数字を競うように付け合うのはおすすめしません。

29
00:02:02.120 --> 00:02:11.148
ヘッダーは十、メニューは二十、モーダルは三十のように、役割ごとに段階を決めておくと管理しやすくなります。

30
00:02:11.148 --> 00:02:13.200
初期値と継承を確認します。

31
00:02:13.200 --> 00:02:16.358
ゼットインデックスの初期値はオートです。

32
00:02:16.358 --> 00:02:21.409
つまり、何も指定しなければ、重なり順は自動の仕組みに任されます。

33
00:02:21.409 --> 00:02:27.250
通常は、エイチティーエムエルにあとから書かれた要素ほど手前に表示されます。

34
00:02:27.250 --> 00:02:33.407
通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。

35
00:02:33.407 --> 00:02:36.722
前後を決めたい要素ごとに指定してください。

36
00:02:36.722 --> 00:02:42.879
また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。

37
00:02:42.879 --> 00:02:51.088
アンセットやリバートなどの共通値もありますが、まずは初期値オートと、継承しない点をはっきり覚えましょう。

38
00:02:51.088 --> 00:02:54.066
ゼットインデックスが効く条件を整理します。

39
00:02:54.066 --> 00:02:59.171
基本のルールは、ポジションがスタティック以外の要素で効く、という点です。

40
00:02:59.171 --> 00:03:05.836
スタティックは通常の流れに置く初期の配置で、この状態では数字を書いても重なり順は変わりません。

41
00:03:05.836 --> 00:03:12.643
リラティブ、アブソリュート、フィックスド、スティッキーといった配置と組み合わせて使ってください。

42
00:03:12.643 --> 00:03:16.614
実例でも、対象の箱にはアブソリュートが指定されています。

43
00:03:16.614 --> 00:03:24.129
また例外として、フレックスボックスやグリッドの子要素は、ポジションがなくてもゼットインデックスが効きます。

44
00:03:24.129 --> 00:03:27.816
効かないと感じたら、まず対象のポジションを確認する。

45
00:03:27.816 --> 00:03:29.660
これが最初のチェックです。

46
00:03:29.660 --> 00:03:33.204
ここが一番大切な考え方、スタッキングコンテキストです。

47
00:03:33.204 --> 00:03:36.485
日本語では、重なりの文脈と呼ばれることがあります。

48
00:03:36.485 --> 00:03:40.817
ゼットインデックスの数字比べは、同じグループの中でだけ行われます。

49
00:03:40.817 --> 00:03:47.905
親要素が一つの層を作ると、その子要素はグループごと前後が決まり、内側の数字だけでは外の要素を越えられません。

50
00:03:47.905 --> 00:03:52.565
たとえば、親にゼットインデックス一が付いた層と、別の要素の層が並んでいれば、

51
00:03:52.565 --> 00:03:57.224
子の数字をいくら大きくしても、親同士の勝負を覆すことはできません。

52
00:03:57.224 --> 00:04:03.393
さらに、祖先の要素にトランスフォームやオパシティなどが付くと、新しい層ができることもあります。

53
00:04:03.393 --> 00:04:07.200
数字が効かない原因の多くは、この層の仕組みで説明できます。

54
00:04:07.200 --> 00:04:08.696
実例を見ていきます。

55
00:04:08.696 --> 00:04:11.389
まずエイチティーエムエルの用意です。

56
00:04:11.389 --> 00:04:15.280
ステージという外側の箱の中に、箱が二つ入っています。

57
00:04:15.280 --> 00:04:19.320
一つは比較する箱で、アザーというクラスが付いています。

58
00:04:19.320 --> 00:04:23.509
もう一つが今回の対象で、デモというクラスが付いています。

59
00:04:23.509 --> 00:04:28.596
頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。

60
00:04:28.596 --> 00:04:31.290
親と子の構造そのものが例の一部です。

61
00:04:31.290 --> 00:04:36.227
二つの箱はどちらも絶対配置で、位置がずれて重なるように置かれます。

62
00:04:36.227 --> 00:04:41.165
中身は変えず、ゼットインデックスの値だけを比べる準備をしましょう。

63
00:04:41.165 --> 00:04:46.252
どちらが手前に出るかを予想してから次へ進むと、違いがよく分かります。

64
00:04:46.252 --> 00:04:51.149
次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。

65
00:04:51.149 --> 00:04:58.891
ステージは幅の上限や余白、枠線に加えて、リラティブと高さが指定され、絶対配置の基準になっています。

66
00:04:58.891 --> 00:05:03.630
二つの箱はどちらもアブソリュートで、位置をずらして重ねます。

67
00:05:03.630 --> 00:05:07.422
比較する箱、アザーのゼットインデックスは一です。

68
00:05:07.422 --> 00:05:13.267
そして主役である対象の箱、デモにはゼットインデックス二が指定されています。

69
00:05:13.267 --> 00:05:17.059
二は一より大きいので、デモが手前に表示されます。

70
00:05:17.059 --> 00:05:24.800
土台の指定は重なりを見やすくするためのものなので、数字の大小と前後の結果の対応に注目してください。

71
00:05:24.800 --> 00:05:26.864
値を変えて比べてみましょう。

72
00:05:26.864 --> 00:05:31.433
最後のゼットインデックスの値だけを、二からゼロへ置き換えます。

73
00:05:31.433 --> 00:05:37.919
ファイルを保存してブラウザーを再読み込みすると、対象の箱は比較する箱の後ろへ下がります。

74
00:05:37.919 --> 00:05:41.751
比較する箱の値は一のままで、ゼロより大きいからです。

75
00:05:41.751 --> 00:05:45.731
エイチティーエムエルや位置の指定は一切変えていません。

76
00:05:45.731 --> 00:05:49.564
数字の大小だけで前後が入れ替わることが確認できます。

77
00:05:49.564 --> 00:05:53.102
比較のコツは、変える値を一つだけにすることです。

78
00:05:53.102 --> 00:05:57.745
練習として、まず二とゼロの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて、

79
00:05:57.745 --> 00:06:02.388
結果がどう変わるかも観察してみてください。

80
00:06:02.388 --> 00:06:04.551
効かないときの確認手順です。

81
00:06:04.551 --> 00:06:10.576
まず、対象のポジションがスタティックのままになっていないかを確認してください。

82
00:06:10.576 --> 00:06:17.529
次に、数字を大きくしても前に出ない場合は、親や祖先が作る層に負けていないかを疑いましょう。

83
00:06:17.529 --> 00:06:22.473
祖先のトランスフォームやオパシティも、層ができる原因になります。

84
00:06:22.473 --> 00:06:25.099
そのうえで開発者ツールを使います。

85
00:06:25.099 --> 00:06:30.893
ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、

86
00:06:30.893 --> 00:06:36.687
スタイルズで宣言が上書きされていないかを見てください。

87
00:06:36.687 --> 00:06:40.858
コンピューテッドで最終的な値とポジションを確認します。

88
00:06:40.858 --> 00:06:47.656
最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容を利用できるか確かめましょう。

89
00:06:47.656 --> 00:06:49.592
最後に互換性とまとめです。

90
00:06:49.592 --> 00:06:54.507
ゼットインデックスは、記事ではクローム一以降、エッジ十二以降、ファイアフォックス一以降、

91
00:06:54.507 --> 00:06:59.422
サファリ一以降で対応すると紹介されています。

92
00:06:59.422 --> 00:07:03.742
現在の主要ブラウザーでは広く使える、基本のプロパティです。

93
00:07:03.742 --> 00:07:04.635
まとめます。

94
00:07:04.635 --> 00:07:08.284
ゼットインデックスは重なり順を決める指定で、値はオートまたは整数、初期値はオート、

95
00:07:08.284 --> 00:07:11.933
継承はしません。

96
00:07:11.933 --> 00:07:18.933
数字比べは同じスタッキングコンテキストの中で行われ、ポジションとの組み合わせが前提になります。

97
00:07:18.933 --> 00:07:20.274
お疲れさまでした。

98
00:07:20.274 --> 00:07:25.040
関連するポジションもあわせて確認すると、理解がさらに深まります。

99
00:07:25.040 --> 00:07:28.838
数字を大きくすればよい、ではなく、どの層同士の比較なのかを言葉で説明できれば、

100
00:07:28.838 --> 00:07:32.636
基本は身についています。