重ねて表示する！CSSのz-indexの使い方【初心者向け】現役エンジニアが解説
初心者向けにCSSで書くz-indexの使い方について解説しています。画像などボックスの重なりの順序を指定する際に利用します。書き方を間違えると変な見た目になってしまうので、自分で書けるようにしておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSで書くz-indexの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
【動画の解説はこちら】
今回はz-indexを使ってみようか。
田島メンター！！z-indexというのは何ですか〜？
要素が複数重なっているとき、どれを手前に、どれを後ろにするかという順序を決めることができるプロパティなんだ。
なるほど、便利そうですね。お願いします！
z-indexとは
z-indexはボックスの重なりの優先順位(スタックレベル)を指定するプロパティです。
通常では後に記述されたものが画面では手前に配置されますが、z-indexを使用することによって自由に優先順位を設定できます。
z-indexの書き方
z-indexは以下のように記述します。
z-index: 値;
値は整数（負の値も指定可能、小数点は不可）で入力し、大きい数値のものほど手前に表示されます。
z-indexを使用するには、その要素にpositionプロパティでstatic(初期値)以外の値が適用されている必要があります。
autoを入力した場合は親要素と同じ値が設定されます。
親要素でz-indexの指定がされていない場合、値は0です。(初期値)
何も設定していない場合は、ソース内で後に記述されたものほど手前に配置されるよ。
z-indexを使うことによって、記述の順番に関係なく重なりの順序を指定することができるわけですね。
次は実際にz-indexに値を設定してみよう。今回は2つの画像を重ねて、順序を指定していない場合と指定した場合のそれぞれの状態を画面で確認するよ。
実際にz-indexを書いてみよう
以下のHTMLにz-indexを適用します。
(※HTMLとCSSファイルが同じディレクトリ内にあり、外部スタイルシートのファイル名が”sample.css”である場合の例です)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<img src=”photo1.jpg” class=”content1″>
<img src=”photo2.jpg” class=”content2″>
</body>
</html>
まず、z-indexを指定していない場合の状態です。
CSS
img.content1{position:absolute; top:100px; left:100px; }
img.content2{position:absolute; top:200px; left:200px; }
ここでは同じディレクトリに”photo1.jpg”というファイル名の夜空の画像と、”photo2.jpg”というファイル名の青空の画像をアップロードし、positionプロパティによってそれらの一部が重なるように配置しています。
z-indexを設定していない最初の状態では、後に記述された”photo2.jpg”の方が手前に表示されています。
次に、CSSを以下のように変更します。
“photo1.jpg”のz-indexの値を2に、”photo2.jpg”のz-indexの値を1に設定します。
CSS
img.content1{position:absolute; top:100px; left:100px; z-index: 2; }
img.content2{position:absolute; top:200px; left:200px; z-index: 1; }
画面では次の画像のように表示されます。
“photo1.jpg”の優先順位が上になったため、”photo2.jpg”よりも手前に表示されています。
さらにテキストを追加した場合の例です。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p>テキストを一番手前に</p>
<img src=”photo1.jpg” class=”content1″>
<img src=”photo2.jpg” class=”content2″>
</body>
</html>
CSS
p {font-size: 32px; color:#ffffff; position:absolute; top:200px; left:200px; z-index: 3;}
img.content1{position:absolute; top:100px; left:100px; z-index: 2; }
img.content2{position:absolute; top:200px; left:200px; z-index: 1; }
段落の文字列は一番最初に記述されているので本来は画像に隠れて表示されませんが、z-indexの値を3にすることによって一番手前に表示されています。
以上、CSSのz-indexの使い方について説明しました。
z-indexを使えば要素の重なりも自由に作れるので、覚えておくと役に立つでしょう。
テキストにも同じように値が適用されるのが分かるね。
なるほど、こうすることで見える順番を自由に設定できるんですね。
z-indexを使うときは、positionの値にstatic以外の値が入っているということに注意しよう。
staticは初期値だから、positionプロパティは必ず使うということですね。ありがとうございました！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
