こんにちは、最近ブログをお休みさせていただいて勉強していましたが、せっかくなので勉強した内容をブログに残していきたいと思います。
今回は、html5プロフェッショナル認定試験レベル１のCSS「z-idex」についてお話しさせていただきます。
z-indexってなに？何にどうやって使うの？というところを可愛い猫の画像と一緒に確認していきましょう。
z-indexとは何か。
z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。
z-indexの数値が小さい順に表示され、大きい数値を設定したボックスがより前面に表示されます。
というところなのですが、文字で表現するのは難しいので実際のサンプルページをご紹介します。
z-indexでサンプルページを作ってみた。
このように画像を重ねて表示できるのです！
コードも簡単で、CSSにz-indexで番号をつけるだけ！
一番目にcat1「ごめんね画像」を表示して、その上にcat2「おっさん座り画像」を表示させています。
ソースコード(test.html)
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>z-indexテストページ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="cat">
<img id="cat1" src="img/cat_001.png" alt="cat1">
<img id="cat2" src="img/cat_002.png" alt="cat2">
</div>
</body>
</html>ソースコード（style.css）
#cat1 {
position :absolute; /*指定された要素の配置:絶対値指定（起点からどれだけ離れた場所に配置するか）;*/
left:10px; /*左からの位置指定*/
top:10px; /*上からの位置指定*/
z-index:1; /*一番はじめに表示する=つまり一番うしろ*/
}
#cat2 {
position :absolute;
left:400px;
top:400px;
z-index:2;/*二番目に表示する*/
}出力限度数はあるか？
たくさん重ねられるけど・・・どこまで表示できるのでしょう？
z-indexの最大値は「2147483647」で、最小値が「-2147483647」となります。このため、最大値を超える画像を表示させることは、デザイン的に考えられないためそこまで最大値を気にする必要はないと言えるでしょう。
テキストを全面に配置することもできる！
画像をそこまで重ねる用途ってある？と思ったかもしれませんが、z-indexはテキストを重ねることもできます。
普通に表示されると、フォントの色によってどこにあるか見えなかったので文字色は白に設定しています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>z-indexテストページ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p class="text1">重ねたい文字列</p>
<div class="cat">
<img id="cat1" src="img/cat_001.png" alt="cat1">
<img id="cat2" src="img/cat_002.png" alt="cat2">
<img id="cat3" src="img/cat_001.png" alt="cat3">
<img id="cat4" src="img/cat_001.png" alt="cat4">
<img id="cat5" src="img/cat_001.png" alt="cat5">
<img id="cat6" src="img/cat_001.png" alt="cat6">
<img id="cat7" src="img/cat_001.png" alt="cat7">
<img id="cat8" src="img/cat_001.png" alt="cat8">
<img id="cat9" src="img/cat_001.png" alt="cat9">
<img id="cat10" src="img/cat_001.png" alt="cat10">
</div>
</body>
</html>.text1 {
position :absolute;
left:250px;
top:250px;
z-index:11;
font-size: 60px;
color:#ffffff;
}
#cat1 {
position :absolute; /*指定された要素の配置:絶対値指定（起点からどれだけ離れた場所に配置するか）;*/
left:10px; /*左からの位置指定*/
top:10px; /*上からの位置指定*/
z-index:1; /*一番はじめに表示する=つまり一番うしろ*/
}
#cat2 {
position :absolute;
left:200px;
top:200px;
z-index:2;/*二番目に表示する*/
}
#cat3 {
position :absolute;
left:300px;
top:300px;
z-index:3;
}
#cat4 {
position :absolute;
left:400px;
top:400px;
z-index:4;
}
#cat5 {
position :absolute;
left:500px;
top:500px;
z-index:5;
}
#cat6 {
position :absolute;
left:600px;
top:600px;
z-index:6;
}
#cat7 {
position :absolute;
left:600px;
top:600px;
z-index:7;
}
#cat8 {
position :absolute;
left:700px;
top:700px;
z-index:8;
}
#cat9 {
position :absolute;
left:800px;
top:800px;
z-index:9;
}
#cat10 {
position :absolute;
left:900px;
top:900px;
z-index:10;
}画像の上に文字列を表示できれば、活用の幅が広がりそうですね！
auto設定とは？
z-indexにはauto設定が存在します。autoの説明は下記の通り
整数値で指定：重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。
auto：親要素と同じ階層になります。これが初期値です。
スタイルシートリファレンス
どういう意味なの・・・？
よくわからないので、やってみましょう。
先ほど１０番目に設定したテキストをautoに設定します。
.text1 {
position :absolute;
left:250px;
top:250px;
z-index:auto;
font-size: 60px;
color:#ffffff;
}表示してみた
えーん、消えちゃったー！
わかりにくかったので画像を減らして最初の画像とどちらが前に表示されるのか確認してます。
.text1 {
position :absolute;
left:400px;
top:10px;
z-index:auto;
font-size: 60px;
color:#ff0000;
}
#cat1 {
position :absolute; /*指定された要素の配置:絶対値指定（起点からどれだけ離れた場所に配置するか）;*/
left:10px; /*左からの位置指定*/
top:10px; /*上からの位置指定*/
z-index:1; /*一番はじめに表示する=つまり一番うしろ*/
}
#cat2 {
position :absolute;
left:200px;
top:200px;
z-index:2;/*二番目に表示する*/
}
一番後ろに表示されてますね。
.text1 {
position :absolute;
left:400px;
top:10px;
z-index:auto;
font-size: 60px;
color:#ff0000;
}
#cat1 {
position :absolute; /*指定された要素の配置:絶対値指定（起点からどれだけ離れた場所に配置するか）;*/
left:10px; /*左からの位置指定*/
top:10px; /*上からの位置指定*/
z-index:auto;
}
#cat2 {
position :absolute;
left:200px;
top:200px;
z-index:2;
}全てをオート設定にしても表示はかわりませんでした。
ただし、auto設定にした上でhtml要素の記載順序を変えると・・・
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>z-indexテストページ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="cat">
<img id="cat1" src="img/cat_001.png" alt="cat1">
<img id="cat2" src="img/cat_002.png" alt="cat2">
</div>
<p class="text1">重ねたい文字列</p>
</body>
</html>
お、前にでてきた。HTMLの記載順に影響されるのがautoなんですね！
まとめ
- z-indexは、画像や文字を重ねて表示する場合の順序を指定できる。
- autoで設定する場合は、HTMLの記載順序に影響される。
- 整数指定の場合の最大値や最小値はかなり幅広い（-2147483647〜2147483647）ため、通常使用ではそこまで気にする必要はない。
な〜んだ、順序指定するだけ簡単簡単と思いましたが、意外理解が足りてなかったことがわかりました。
