重ねて表示する!CSSのz-indexの使い方【初心者向け】

初心者向けにCSSで書くz-indexの使い方について解説しています。画像などボックスの重なりの順序を指定する際に利用します。書き方を間違えると変な見た目になってしまうので、自分で書けるようにしておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで書くz-indexの使い方について解説している記事です。

ボックスを重ねて表示させる場合に必要な知識になります。現場でも使える技術なので、ぜひ身につけておきましょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回は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に値を設定してみよう。今回はふたつの画像を重ねて、順序を指定していない場合と指定した場合のそれぞれの状態を画面で確認するよ。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に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”の方が手前に表示されています。

zind_p_1

 

次に、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”よりも手前に表示されています。

zind_p_2

 

さらにテキストを追加した場合の例です。

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にすることによって一番手前に表示されています。

zind_p_3

 

以上、CSSのz-indexの使い方について説明しました。

z-indexを使えば要素の重なりも自由に作れるので、覚えておくと役に立つでしょう。

 

田島悠介

テキストにも同じように値が適用されるのが分かるね。

大石ゆかり

なるほど、こうすることで見える順番を自由に設定できるんですね。

田島悠介

z-indexを使うときは、positionの値にstatic以外の値が入っていないといけないということに注意しよう。

大石ゆかり

staticは初期値だから、positionプロパティは必ず使わないといけないということになりますね。ありがとうございました!

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。