重ねて表示する！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プロパティは必ず使うということですね。ありがとうございました！
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
