「z-index」とは？
Webデザインやプログラミングをしていると、時々「z-index」という言葉を聞くことがあります。この「z-index」はCSS（カスケーディングスタイルシート）に関係しており、特に要素の重なり具合を指定するために使われるfromation.co.jp/archives/5656">プロパティです。
「z-index」の基本的な使い方
「z-index」は、要素がどの順序で重なるかを制御するために使用されます。簡単に言うと、数値が大きいほど手前に表示され、数値が小さいほど奥に隠れます。
「z-index」の値の設定
以下の表に「z-index」の値の設定についてfromation.co.jp/archives/2280">まとめました。
| 値 | 説明 |
|---|---|
| 0 | 基本のレベル。通常は奥に隠れやすい。 |
| 1~10 | 通常の要素に対する前面。 |
| 10以上 | 非常に前面に出やすい。 |
fromation.co.jp/archives/4921">具体的な例
例えば、2つの箱があるとします。一つは「box1」、もう一つは「box2」とします。
box1に「z-index: 1」、box2に「z-index: 2」を設定すると、box2がbox1の上に表示されます。反対に、box1の方がz-indexが高い場合、box1が手前に表示されます。
CSSのfromation.co.jp/archives/1198">コード例
div.box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
z-index: 1;
}
div.box2 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
z-index: 2;
}fromation.co.jp/archives/2280">まとめ
「z-index」はCSSにおいて、要素の重なりを制御する非常に重要なfromation.co.jp/archives/5656">プロパティです。このfromation.co.jp/archives/5656">プロパティをしっかり理解することで、Webページのデザインをよりfromation.co.jp/archives/8199">効果的に設定することができます。初心者の方でも、少しずつ試していくうちに使いこなせるようになるでしょう。
CSS：カスケーディングスタイルシートの略で、ウェブページのデザインやレイアウトを制御するためのスタイルシート言語です。z-indexはCSSのfromation.co.jp/archives/5656">プロパティの一つです。
position：要素の配置方法を指定するCSSfromation.co.jp/archives/5656">プロパティです。z-indexを使用するためには、要素のpositionfromation.co.jp/archives/5656">プロパティがrelative、absolute、fixedのいずれかに設定されている必要があります。
layering：要素を重ね合わせることを指します。z-indexは、どの要素が前面に表示されるかを決定するための値を設定することで、レイヤーを管理します。
stacking context：HTML要素がどのように重ねられるかを制御する境界のことです。z-indexを持つ要素は、新しいスタッキングfromation.co.jp/archives/16530">コンテキストを作成し、その中での順序が定義されます。
opacity：要素の透明度を示すfromation.co.jp/archives/5656">プロパティです。opacityの値が低いほど、要素が透明になり、背後の要素が見えるようになります。z-indexと組み合わせて使うことが多いです。
visibility：要素の表示状態を制御するfromation.co.jp/archives/5656">プロパティです。visibilityは要素を非表示にすることができますが、z-indexは要素の重なり順序に影響を与えます。
fromation.co.jp/archives/6973">flow：要素の文書内での流れや配置を指します。z-indexはこのフローを無視して重なり順序を制御するために使用されます。
layout：ウェブページ上での要素の配置や構造のことです。z-indexは要素の重なりや前後関係を調整する重要な役割を果たします。
スタッキングfromation.co.jp/archives/16530">コンテキスト：z-indexは、要素が重なり合う順序を決定するための属性であり、スタッキングfromation.co.jp/archives/16530">コンテキストを形成することによって、要素の表示順序を制御します。fromation.co.jp/archives/4921">具体的には、z-indexの値が高い要素は低い要素の上に表示されます。
重なり順序：z-indexは、HTML要素が画面上でどのように重なり合うかを示す値です。重なり順序を調整することにより、特定の要素を他の要素の上または下に配置することが可能です。
レイヤー：z-indexは、要素を異なるレイヤーに配置するために使用されます。レイヤーが異なる要素は、視覚的に重なり合う際に表示順序が異なります。高いz-indexを持つレイヤーは、低いレイヤーの上に表示されます。
表示順序：z-indexの設定は、要素の表示順序を管理するために不可欠です。特に、複数の要素が重なり合う場合、適切に表示順序を設定することで、Webページの見栄えを向上させることができます。
CSS：Cascading Style Sheetsの略で、ウェブページのデザインやレイアウトを指定するためのスタイルシート言語です。z-indexはCSSのfromation.co.jp/archives/5656">プロパティの一つです。
position：要素の配置を指定するfromation.co.jp/archives/5656">プロパティです。`static`, `relative`, `absolute`, `fixed`, `sticky`などの値を設定できます。z-indexはこれらの値が設定された要素にのみ適用されます。
レイヤー：ウェブページ内の要素が重なる場合、各要素はレイヤーとして考えられます。z-indexを使ってレイヤーの重なり順を制御します。
重なり順：要素が重なっている場合に、どの要素が前面に表示されるかを決定します。z-indexの値が大きいほど、前面に表示されます。
スタッキングfromation.co.jp/archives/16530">コンテキスト：CSSにおけるz-indexの効果が及ぶ範囲のことで、特定の条件（例えば、positionfromation.co.jp/archives/5656">プロパティがrelative, absolute, fixed, stickyに設定されているときなど）にある要素で成り立ちます。スタッキングfromation.co.jp/archives/16530">コンテキスト内では、z-indexの値に応じて要素の重なりが決まります。
スタイルシート：HTMLなどのfromation.co.jp/archives/5337">マークアップ言語によって作成された文書に対して、視覚的なスタイルを適用するための手法です。CSSはスタイルシートの一種です。
フロート：要素を左または右に寄せて、その周りに他の要素が流れるようにするCSSfromation.co.jp/archives/5656">プロパティです。フロートされた要素はz-indexによってレイヤーの前後関係に影響を与えることがあります。
オーバーレイ：別の要素の上に表示される要素のことです。z-indexを利用して、オーバーレイが既存の要素を上に表示させることが可能です。
透明度：要素の透明度を設定するCSSfromation.co.jp/archives/5656">プロパティです。透明度を設定した要素は、他の要素と重なったときに下の要素が見える場合があります。z-indexは透明度の高い要素の前後関係にも影響します。
ドキュメントフロー：HTML文書における要素の自然な流れや配置のことです。z-indexはドキュメントフローに逆らって要素の重なり順を設定するために使用されます。
z-indexの対義語・反対語
z-indexの対義語は？
z-indexの関連記事
z-indexを【毒舌】で語ると
学問の人気記事
