VIDEO LESSON

CSSのz-indexの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:33動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、ゼットインデックスです。
0:06これは、要素が重なったときに、どちらを手前に表示するかを決めるプロパティです。
0:11紙を机の上に重ねる場面を思い浮かべてください。
0:14あとから置いた紙が上になることもあれば、順番を入れ替えたいこともあります。
0:20この動画では、対象の箱に二を指定した場合と、ゼロを指定した場合を比べて、
0:23前後がどう変わるかを確認します。
0:27基本の書き方、主な値、実例、そして効かないときの確認まで順番に解説します。
0:32大きな数字を書けば必ず一番前へ出る、という単純な仕組みではない点が、このプロパティの大切なポイントです。
0:39まず基本の書き方です。
0:41セレクターのあとに、ゼットインデックス、コロン、値、セミコロンを書きます。
0:47スライドの例では、デモというクラスを持つ要素に、二を指定しています。
0:52意味は、この要素の重なり順を二にする、ということです。
0:56ここで大切なのは、前に出したい要素自身に書く点です。
1:00ただし、この一行だけを書いても、すぐに前へ出るとは限りません。
1:04要素の配置方法など、効くための条件が関係してきます。
1:08その条件は後のセクションで丁寧に確認します。
1:11まずは書き方として、プロパティ名と整数の組み合わせを覚えてください。
1:17対象のクラス名とエイチティーエムエルのクラスが一致しているかも、あわせて確認しましょう。
1:23指定できる主な値を確認します。
1:26値は、オート、または整数です。
1:28オートは、重なり順を自動に任せる指定です。
1:32数字を指定した場合は、同じ重なりの文脈の中で、数字が大きい要素ほど手前に表示されます。
1:39ゼロも使えますし、マイナス一のような負の数を指定して、後ろへ下げることもできます。
1:47単位は付けません。
1:48ピクセルやパーセントのような単位は不要で、整数だけを書く点に注意してください。
1:55また、百や千のような極端に大きな数字を競うように付け合うのはおすすめしません。
2:02ヘッダーは十、メニューは二十、モーダルは三十のように、役割ごとに段階を決めておくと管理しやすくなります。
2:11初期値と継承を確認します。
2:13ゼットインデックスの初期値はオートです。
2:16つまり、何も指定しなければ、重なり順は自動の仕組みに任されます。
2:21通常は、エイチティーエムエルにあとから書かれた要素ほど手前に表示されます。
2:27通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。
2:33前後を決めたい要素ごとに指定してください。
2:36また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。
2:42アンセットやリバートなどの共通値もありますが、まずは初期値オートと、継承しない点をはっきり覚えましょう。
2:51ゼットインデックスが効く条件を整理します。
2:54基本のルールは、ポジションがスタティック以外の要素で効く、という点です。
2:59スタティックは通常の流れに置く初期の配置で、この状態では数字を書いても重なり順は変わりません。
3:05リラティブ、アブソリュート、フィックスド、スティッキーといった配置と組み合わせて使ってください。
3:12実例でも、対象の箱にはアブソリュートが指定されています。
3:16また例外として、フレックスボックスやグリッドの子要素は、ポジションがなくてもゼットインデックスが効きます。
3:24効かないと感じたら、まず対象のポジションを確認する。
3:27これが最初のチェックです。
3:29ここが一番大切な考え方、スタッキングコンテキストです。
3:33日本語では、重なりの文脈と呼ばれることがあります。
3:36ゼットインデックスの数字比べは、同じグループの中でだけ行われます。
3:40親要素が一つの層を作ると、その子要素はグループごと前後が決まり、内側の数字だけでは外の要素を越えられません。
3:47たとえば、親にゼットインデックス一が付いた層と、別の要素の層が並んでいれば、
3:52子の数字をいくら大きくしても、親同士の勝負を覆すことはできません。
3:57さらに、祖先の要素にトランスフォームやオパシティなどが付くと、新しい層ができることもあります。
4:03数字が効かない原因の多くは、この層の仕組みで説明できます。
4:07実例を見ていきます。
4:08まずエイチティーエムエルの用意です。
4:11ステージという外側の箱の中に、箱が二つ入っています。
4:15一つは比較する箱で、アザーというクラスが付いています。
4:19もう一つが今回の対象で、デモというクラスが付いています。
4:23頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
4:28親と子の構造そのものが例の一部です。
4:31二つの箱はどちらも絶対配置で、位置がずれて重なるように置かれます。
4:36中身は変えず、ゼットインデックスの値だけを比べる準備をしましょう。
4:41どちらが手前に出るかを予想してから次へ進むと、違いがよく分かります。
4:46次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
4:51ステージは幅の上限や余白、枠線に加えて、リラティブと高さが指定され、絶対配置の基準になっています。
4:58二つの箱はどちらもアブソリュートで、位置をずらして重ねます。
5:03比較する箱、アザーのゼットインデックスは一です。
5:07そして主役である対象の箱、デモにはゼットインデックス二が指定されています。
5:13二は一より大きいので、デモが手前に表示されます。
5:17土台の指定は重なりを見やすくするためのものなので、数字の大小と前後の結果の対応に注目してください。
5:24値を変えて比べてみましょう。
5:26最後のゼットインデックスの値だけを、二からゼロへ置き換えます。
5:31ファイルを保存してブラウザーを再読み込みすると、対象の箱は比較する箱の後ろへ下がります。
5:37比較する箱の値は一のままで、ゼロより大きいからです。
5:41エイチティーエムエルや位置の指定は一切変えていません。
5:45数字の大小だけで前後が入れ替わることが確認できます。
5:49比較のコツは、変える値を一つだけにすることです。
5:53練習として、まず二とゼロの違いを自分の言葉で説明し、次に文章量や親の幅だけを変えて、
5:57結果がどう変わるかも観察してみてください。
6:02効かないときの確認手順です。
6:04まず、対象のポジションがスタティックのままになっていないかを確認してください。
6:10次に、数字を大きくしても前に出ない場合は、親や祖先が作る層に負けていないかを疑いましょう。
6:17祖先のトランスフォームやオパシティも、層ができる原因になります。
6:22そのうえで開発者ツールを使います。
6:25ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、
6:30スタイルズで宣言が上書きされていないかを見てください。
6:36コンピューテッドで最終的な値とポジションを確認します。
6:40最後に、三百二十ピクセル程度の画面幅や文字の拡大でも、内容を利用できるか確かめましょう。
6:47最後に互換性とまとめです。
6:49ゼットインデックスは、記事ではクローム一以降、エッジ十二以降、ファイアフォックス一以降、
6:54サファリ一以降で対応すると紹介されています。
6:59現在の主要ブラウザーでは広く使える、基本のプロパティです。
7:03まとめます。
7:04ゼットインデックスは重なり順を決める指定で、値はオートまたは整数、初期値はオート、
7:08継承はしません。
7:11数字比べは同じスタッキングコンテキストの中で行われ、ポジションとの組み合わせが前提になります。
7:18お疲れさまでした。
7:20関連するポジションもあわせて確認すると、理解がさらに深まります。
7:25数字を大きくすればよい、ではなく、どの層同士の比較なのかを言葉で説明できれば、
7:28基本は身についています。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

z-indexの役割と主な指定値を解説。重なった2枚の箱のうち、対象の箱が前面に出るかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのz-indexの使い方：指定値・実例・効かない原因とブラウザー互換性 →