月別アーカイブ: 2017年2月

Photoshop 写真からシームレスパターンを作成する方法

Photoshop 写真からシームレスパターンを作成する方法

今回は、Photoshopで写真から継ぎ目のない(シームレスな)パターンを作る方法を紹介します。

シームレスパターンの作り方

素材の準備

写真素材を準備します。パターンを作るときは、できるだけパースがきつくなく、明暗の差が少ない写真を選んでください。今回は下のような、草を真上から撮影した写真を使って解説します。

パターンにする前の写真

画像の大きさは、できるだけきりのいい数値にしておいた方が後の作業がやりやすくなります。また、画像の大きさはそのままパターンの大きさになります。

画像サイズ

フィルター「スクロール」で画像の端を中央に

継ぎ目のないパターンにするために、画像の端の部分を調整しないといけません。そこで便利なのが「スクロール」というフィルターです。

フィルター>その他>スクロール で画像の縦横の長さの半分水平・垂直にスクロールすると、元画像の四隅が中央でくっつき、上下左右の辺が十字に接するようになります。この十字の部分を自然に馴染ませればパターンができるというわけです。

フィルター「スクロール」の適用

ここでは画像の大きさが800px*800pxだったので、水平・垂直にそれぞれ400pxずつスクロールしました。

中央の十字のエリアを馴染ませる

「スクロール」でできた中央の十字(画像の継ぎ目)を馴染ませればパターンの完成です。この画像には修復ブラシツールを使用しました。

馴染ませる際の注意点は、画像の辺に接する部分は変更しないことです。辺に接する部分とは、十字の上下左右の端の部分です。ここをいじってしまうと、パターンがうまく繋がらなくなってしまうのでご注意ください。

下は完成したパターンです。

完成したパターン

HTML5.1で画像のレスポンシブ対応4 ~picture要素内でsource要素を使う~

前回までの記事で、img要素にsrcset属性を記述して画像を様々なデバイスに対応させる方法を紹介してきました。

  1. HTML5.1で画像のレスポンシブ対応1 ~img要素のsrcset属性で画像の横幅を指定する方法~
  2. HTML5.1で画像のレスポンシブ対応2 ~img要素のsrcset属性でデバイスピクセル比ごとに画像を切り替える方法~
  3. HTML5.1で画像のレスポンシブ対応3 ~img要素のsizes属性で画面幅に対する画像の大きさを指定する方法~

今回の記事では、HTML 5.1で新しく追加されたpicture要素内のsource要素の機能についてです。

picture要素とsource要素

様々なデバイスに画像を対応させるために、画像の解像度を変更する(拡大・縮小のみを行う)場合は、img要素にsrcset属性を指定する方法を使うのが一般的です。では、picture要素はいつ使うのかというと、以下のような場合が挙げられます。

  • ブラウザ幅に合わせて、画像の拡大・縮小だけでなく縦横比や画像の内容を変えるとき(アートディレクション)
  • WebPなど対応ブラウザの少ない新しい画像形式を使いたいとき

「新しい画像形式を使いたいとき」というのは画像のレスポンシブ対応ではありませんが、こちらも解説しています。

記述例

アートディレクションで使う場合

HTML

<picture>
  <source
    media="(max-width: 400px)"
    srcset="imageA.jpg,
            imageA@2x.jpg 2x">
  <source
    media="(max-width: 800px)"
    srcset="imageB.jpg,
            imageB@2x.jpg 2x">
  <img
    src="imageC.jpg"
    srcset="imageC.jpg,
            imageC@2x.jpg 2x"
    alt="sample">
</picture>

picture要素の中のsource要素でメディアクエリと画像の候補を指定しています。img要素は未対応ブラウザのためのフォールバックとして必要です。

source要素の属性

  • media属性→メディアクエリを指定
  • srcset属性→画像の候補を提示

新しい画像形式の出し分けをする場合

HTML

<picture>
  <source type="image/webp" srcset="imageA.webp">
  <img src="imageA.jpg" alt="sample">
</picture>

WebPなど、未対応ブラウザが多い画像を対応ブラウザのみに読み込ませるときの書き方です。source要素でtype属性を使うと、ブラウザがその画像形式に対応しているか判断してくれます。未対応のブラウザではimg要素が読み込まれます。

source要素の属性

  • type属性→画像形式(MIMEタイプ)を記述することで、ブラウザがその形式に対応しているか判断する
  • srcset属性→新しい形式(ここではWebP)の画像ファイルのパス

参考サイト

HTML5.1で画像のレスポンシブ対応3 ~img要素のsizes属性で画面幅に対する画像の大きさを指定する方法~

引き続き、画像のレスポンシブ対応についてです。前回の記事ではsrcset属性でデバイスピクセル比を指定する方法、前々回の記事では画像の幅を記述する方法を書きました。今回は、srcset属性で画像の候補を記述したうえで、sizes属性を使って画像をどのくらいの大きさで表示するか指定する方法を紹介します。

sizes属性について

img要素(もしくはpicture要素内のsource要素)にsrcset属性を記述しただけでは、画像を任意の大きさで表示することができません。そのため、任意のサイズで画像を表示したければ、sizes属性を使う必要があります。sizes属性を記述すると、画像をどのくらいの大きさで表示するか指定できるほか、メディアクエリも使えるので、あるブラウザ幅のときは画像を50%のサイズ、別のブラウザ幅ときは100%のサイズ…とブラウザ幅によって違う条件を指定できます。

書き方

sizes属性のフォーマット

sizes="[メディア・クエリ] [長さ], [メディア・クエリ] [長さ]..."

このように、メディアクエリと画像の長さ(横幅)を1セットとして、複数の条件を「 ,(カンマ)」で区切って記述します。ブラウザはこの条件に適した画像をsrcsetの値から探して読み込みます。メディアクエリを書かずに長さだけを描いた場合、それがデフォルトの表示幅になります。

sizes属性の記述例

sizes="(max-width: 768px) 100vw, 50vw"

この例では、以下のように画像が表示されます。

  • ブラウザの幅768pxまでビューポートの幅に対して100%のサイズで画像を表示する
  • それ以外はビューポートの幅に対して50%のサイズで画像を表示する

「vw」について

sizes属性で[長さ]を指定するとき、「vw」という単位がよく使われます。「vw」は「vewport width」のことで、ビューポートの幅に対する割合を表す単位です。

  • 100vw → ビューポートの幅に対して100%の幅
  • 50vw → ビューポートの幅に対して50%の幅

なお、sizes属性の[長さ]の指定では、「px」や「em」など他の単位も使えます

img要素での記述例

※コード中の改行や字下げは見やすくするために入れているだけなので、無くても問題ありません。

HTML

<img src="image_320.jpg"
     srcset="image_320.jpg 320w,
             image_640.jpg 640w"
     sizes="(max-width: 640px) 50vw, 25vw"
     alt="例">

この例では、以下のような条件で、最も適した画像をブラウザが自動で選んでくれます。srcset属性に未対応のブラウザでは、src属性で指定したimage_320.jpgが表示されます。

  • ブラウザの幅640pxまでビューポートの幅に対して50%のサイズで表示する
  • それ以外はビューポートの幅に対して25%のサイズで表示する

参考サイト

HTML5.1で画像のレスポンシブ対応2 ~img要素のsrcset属性でデバイスピクセル比ごとに画像を切り替える方法~

前回の記事のように、srcsetで画像の横幅を指定するとブラウザが自動で適したサイズの画像を読み込んでくれました。今回の記事では、デバイスピクセル比(高解像度ディスプレイかどうか)の違いで表示する画像を指定したい場合の記述方法を紹介します。

デバイスピクセル比について

スマートフォンなどの高解像度ディスプレイでは、CSSで指定するピクセルのサイズ(CSSピクセルまたはポイント)と、デバイスの実際のピクセルのサイズ(デバイスピクセル)が違います。たとえばCSSで幅10pxのボーダーを指定したとき、iPhone 6 で表示したら20px使ってボーダーの幅が表示される、という風にです。このCSSピクセルとデバイスピクセルの比のことをデバイスピクセル比といいます。高解像度ディスプレイのピクセルの密度と考えていいと思います。

先ほど例に挙げた iPhone 6 や iPhone 7 のデバイスピクセル比は 2 で、iPhone 6 Plus や iPhone 7 Plus は 3 です。現状、画像を高解像度ディスプレイへ対応させる際、2倍のサイズの画像を用意することがほとんどです。3倍のサイズの画像はファイルサイズが大きくなるため、デバイスへの負荷を考えて、無理に対応しないことが多いからです。

デバイスピクセル比で高解像度ディスプレイ用画像を指定する場合

srcsetでファイルパスとデバイスピクセル比を指定すると、ブラウザがそのデバイスのデバイスピクセル比を判断して、該当するピクセル密度に指定された画像を表示してくれます。もちろん、ピクセル密度2倍で指定した画像は1/2のサイズに縮小され、適性な解像度で表示されるようになっています。ブラウザの幅ではなく、高解像度ディスプレイかどうかで画像を切り替えたい場合に使用してください。下記はコードの例です。
※コード中の改行や字下げは見やすくするために入れているだけなので、無くても問題ありません。

HTML

<img src="image_320.jpg"
     srcset="image_640.jpg 2x,
             image_960.jpg 3x"
     alt="例">

srcset属性のファイルパスの後の「数字 + x」がデバイスピクセル比を表しています。2x がデバイスピクセル比2、 3x がデバイスピクセル比3という意味です。

上記例のブラウザ表示

それぞれの画像が読み込まれる条件は以下のようなときです。

image_320.jpg(srcで指定)
  •  デバイスピクセル比が1のとき
  • srcset の条件に当てはまらなかったとき
  • ブラウザが srcset 属性に対応していないとき
image_640.jpg(srcsetで指定)
  • デバイスピクセル比が 2 のとき
image_960.jpg(srcsetで指定)
  • デバイスピクセル比が 3 のとき

「w」と「x」は混ぜて使えない

画像の幅をブラウザに知らせる「w」と、デバイスピクセル比を指定する「x」は、同じsrcset属性の中で両方を使うことができません。両方指定した場合は、そのsrcset属性が無効になりますので注意してください。

参考サイト

HTML5.1で画像のレスポンシブ対応1 ~img要素のsrcset属性で画像の横幅を指定する方法~

2016/11/1付で勧告されたHTML5.1に追加された、<picture>要素とsrcset属性を使って画像をレスポンシブ対応させる方法についてです。HTML5.1で追加されたといっても、<picture>要素やsrcset属性は以前から策定されており、ブラウザ対応も進んでいたため、今までも使われてきました。HTML5.1で正式勧告されたということです。

今回は、以前この記事「レスポンシブデザインで画像を切り替える方法2 ~HTML5のsrcset属性で切り替える~」でも少し紹介している、srcset属性の使い方についてです。

srcset属性とは

srcset属性は、img要素や<picture>要素内の<source>要素に記述し、デバイスピクセル比(高解像度ディスプレイかどうか)や、ブラウザの横幅によって読み込む画像を切り替えるための属性です。srcset属性で画像の横幅やデバイス解像度、条件に合う画像のみ読み込まれるので、無駄なく必要な画像だけを読み込ませることが可能です。ただし、IEは未対応なので、ご注意ください。

今回は、img要素に対して指定するシンプルな例を1つ紹介します。

srcsetで画像の横幅だけ指定する場合

srcsetでファイルパスと画像の横幅を指定すると、ブラウザが自動で適したサイズの画像を選んでくれます。※コード中の改行や字下げは見やすくするために入れているだけなので、無くても問題ありません。

HTML

<img src="image_320.jpg"
     srcset="image_320.jpg 320w,
             image_640.jpg 640w"
     alt="例">

単位「w」について

上記コードで、srcset属性のファイルパスの後に半角スペースを空けて「320w」や「640w」といった指定があります。この「w」は画像の横幅です。ブラウザに画像の横幅を知らせるためのものだと思ってください。ブラウザは、srcset属性に記述されている情報から適した画像を判断した後、必要な画像だけを読み込むので、まだ画像サイズが分らないのです。

上記例のブラウザ表示

上記例では画像が以下のように表示されます。

高解像度ディスプレイ以外
  • srcset属性に未対応のブラウザではsrc属性に指定したimg_320.jpgが表示される
  • 画面サイズ320px以下の場合img_320.jpgが表示される
  • 画面サイズ321px以上の場合img_640.jpgが表示される
デバイスピクセル比が2の高解像度ディスプレイの場合
  • srcset属性に未対応のブラウザではsrc属性に指定したimg_320.jpgが表示される
  • 画面サイズ160px以下の場合img_320.jpgが表示される
    (画面サイズがあまりにも小さいので、ほとんどあり得ません)
  • 画面サイズ161px以上の場合img_640.jpgが表示される

このように、高解像度ディスプレイだった場合、自動で適したサイズの画像を選んで表示してくれます。

次回記事では、srcsetでデバイスピクセル比を指定する方法を紹介します。

参考サイト

Illustrator & Photoshop アクション機能で作業効率UP

今回の記事では、IllustratorとPhotoshopのアクション機能を紹介します。アクションとは、複数の操作を事前に記録しておき、まとめて実行できる機能です。アクションでは、記録した操作がかなり高速で実行されるので、同じ操作を何度も行いたいときなどの作業効率アップに役立ちます。

アクションの使い方

アクションはIllustratorにもPhotoshopにもあり、どちらも使い方に大差ないので、ここではPhotoshopを使って解説します。※使用しているPhotoshopのバージョンはCC2015です。

1.アクションパネルを開く

ウィンドウ>アクション からアクションパネルを開きます。パネルには、元から登録されているアクションの一覧が表示されています。

Photoshopの初期設定アクション

2.作業を記録する

新しいアクションを作成するときは、アクションパネルで新規アクションを作成(書類のマークをクリック)し、「記録」ボタンをクリックします。すでにあるアクションに記録するときは、アクションを選択して「記録開始」ボタン(録画ボタン)をクリックします。

アクションを分類して整理するには、「アクションセット」を使います。セットはアクションパネル下部のフォルダのマークから作成できます。

新規セット作成

作業の記録は、あらゆる操作に対して行われます。色調補正やフィルターだけでなく、レイヤーの変更や保存、ドキュメントを閉じる操作までが記録されます。下の画像はその例です。

アクションの登録例

ここでは、画像をスマートオブジェクトにし、調整レイヤーのトーンカーブと色相・彩度、スマートフィルターのアンシャープマスクを適用する操作を記録しました。

登録されたアクション

3.アクションを実行する

アクションパネルで実行したいアクションを選び、アクションの実行ボタン(再生ボタン)を押します。

別のドキュメントを開き、先ほど作ったアクションを実行します。すると、アクションを記録した時と全く同じ操作が、1、2秒程度で実行されました。トーンカーブの形や、アンシャープマスクの設定値まで全く同じになっています。

アクションの実行例

このように、沢山の画像に同じ調整をしたいときなど、アクションを作って実行すると大幅な時間短縮になるので、ご活用ください。

アクションの削除について

アクションは、作業中のパソコン内に記録されるので、一度作ればいつでも利用することができます。しかし、共用のパソコンなどでは、使い終わったら削除しておいたほうがいいでしょう。

アクションを削除するには、アクションパネルでアクション(もしくはアクションセット)を選択し、ごみ箱マークをクリックすれば削除できます。

カメラ用語の紹介 ~ISO、シャッタースピード、絞り~

制作をする際、写真を自分で撮れると、作品にオリジナリティが生まれ、少ない予算での制作も可能になります。カメラについての知識はあった方がプラスになるはずです。そこで、この記事ではデジタルカメラで写真を撮影するときの設定で登場するカメラ用語について紹介します。

ISO(読み:アイエスオーまたはイソ)

ISO感度は、カメラが光を感じる感度のことで、ISO100、ISO1600 のように数値で表されます。数値が大きい方が暗いところで手ブレが少なく撮影できますが、光を増幅させるときのノイズで写真が荒くなるので注意が必要です。暗いところでノイズを少なく撮影するには、後述のシャッタースピードを遅くし、三脚を使用して撮影します。

どのくらいISOを高くできるかは、カメラの性能によって異なります。晴れた日中の屋外で撮影する際は、ISO200程度に設定するのが一般的です。

シャッタースピード

シャッターを開いて、撮像素子に光を当てている時間のことです。シャッタースピードが早いと、動いているものが止まって写り、手ブレや被写体ブレを起こしづらくなります。また、同じISO、絞りなら暗く映ります。シャッタースピードが遅いと、動いているものがブレて写り、手ブレも起こしやすくなります。また、同じISO、絞りなら明るく映ります。

シャッタースピードは秒数で表されます。多くは1秒以下なので、1/100、1/200 のように分数で表示され、1秒以上の場合は 1″ 2″ のように表示されます。

絞り(F値)

絞りは、撮像素子に当てる光の量のことで、F4 F5.6 のようにFと数値で表されるのでF値とも呼ばれます。絞りを開ける(数値を小さくする)と、撮像素子に当たる光の量が多くなり、同じISO、シャッタースピードなら写真が明るくなります。絞りを絞る(数値を大きくする)と、撮像素子に当たる光の量が少なくなり、同じISO、シャッタースピードなら写真が暗くなります。

また、絞りは被写界深度(ピントが合って見える範囲)にも関わってきます。絞りを絞る(数値を大きくする)と、被写界深度が深くなり、ピントを合わせた場所の前後も広い範囲がくっきりと写ります。絞りを調節できないカメラでは、被写界深度は深くなっているのが普通です。

絞りを開ける(数値を小さくする)と、被写界深度が浅くなり、ピントを合わせた場所の前後がぼけます。メインの被写体以外をぼかしたいときは、絞りを開けて撮影すればOKです。ただし、その分写真は明るくなるので、シャッタースピードを速くして丁度いい明るさ(適正露出)になるよう調整します。

参考サイト

CSS 要素の重ね順を指定するz-indexの使い方4 ~スタックレベルについて~

前回の記事で、z-indexで重ね順を操作する際に重要な概念のスタックコンテキストの構造について紹介しました。もうひとつ、スタックレベルについての理解もz-indexの指定に必要なので、今回はスタックレベルに関して記事にします。

スタックレベルの仕様

スタックコンテキストと合わせて、スタックレベルの仕様も理解しておかないと、z-indexの指定が適切にできません。まずはスタックレベルの仕様について確認しておきます。

  • スタックレベルはz-indexで指定する数値のこと
  • スタックレベルはスタックコンテキスト内の重ね順を指定するもの

スタックレベルは前回の記事で紹介したスタックコンテキストの中での重ね順を指定するものです。別のスタックコンテキストに属する要素と数値を共有することはなく、スタックコンテキストごとに独立しています。つまり、以下のようなことが言えます。

  • Aの要素に z-index:0 を指定し、Bの要素に z-index:1 を指定したからといって、BがAの上に重なるとは限らない

Aの要素とBの要素が別のスタックコンテキストに属している場合は、数値通りの順番になるとは限りません。

スタックコンテキストとスタックレベルの関係

z-indexがうまく適用されないときは、スタックコンテキストとスタックレベルの関係を確認してみてください。ここでは、CSS 要素の重ね順を指定するz-indexの使い方2 ~スタックレベルとスタックコンテキスト~で紹介した、z-index指定がうまくいかない例について、スタックコンテキストの構造とスタックレベルを確認してみます。以下のような場合です。

z-index指定の失敗例

A、B、Cのボックスを奥から「C、B、A」の順で表示したいとき、z-indexの値をそれぞれ「A : 3」、「B : 2」、「C : 1」、で指定しています。

※コードは一部省略しています。

HTML

<div id="A">
  A → z-index:3
  <div id="B">
    B → z-index:2
  </div>
</div>
</div id="C">
  C → z-index:1
</div>

CSS

#A {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
#B {
  position: absolute;
  top: 60px;
  left: 60px;
  z-index: 2;
}
#C {
  position: absolute;
  top: 120px;
  left: 120px;
  z-index: 1;
}

一見、「C、B、A」と並びそうですが、実際に表示すると下のように「C、A、B」の順になります。

実際の表示

※分かりやすいようにAとBのボックスを透明にしてあります。

A → z-index:3

B → z-index:2
C → z-index:1

この例では、スタックコンテキストの構造とスタックレベルは以下のようになっています。

上記例でのスタックコンテキストの構造とスタックレベル
要素 所属するスタックコンテキスト スタックレベル
#A html要素が作るスタックコンテキスト(ルートスタックコンテキスト) 3
#B #Aが作るスタックコンテキスト 2
#C html要素が作るスタックコンテキスト(ルートスタックコンテキスト) 1
※AとCのボックスはbody要素直下にあるとします。

このように、#Bのボックスだけ所属するスタックコンテキストが違うため、スタックレベル通りの順番にならなかったというわけです。#Bは#Aの作るスタックコンテキストに所属するため、#Aよりも後ろに来ることはできません。

#Aの後ろに表示したいのであれば、#Aでスタックコンテキストを作成してはいけないということになるので、#Aをさらに別の要素で囲むなどして、#Aと#Bが同じスタックコンテキストに所属するように構造を変更する必要があります。

このように、z-indexで思い通りの重ね順にするには、スタックコンテキストとスタックレベルについて知っておかなければいけないので、ご注意ください。

CSS 要素の重ね順を指定するz-indexの使い方3 ~スタックコンテキストの構造について~

z-indexのルール

前回の記事でスタックレベルとスタックコンテキストについて紹介しました。そこでz-indexには以下のようなルールがあると書きました。

  • スタックレベルで指定できる重ね順は、同じスタックコンテキスト内の重ね順

それを踏まえたうえで今回は、スタックコンテキストの構造についてもう少し詳しく解説していきます。

スタックコンテキストの構造について

HTML要素は、ルートスタックコンテキストを作成しますが、これは他のすべてのスタックコンテキストを内包しています。このように、スタックコンテキストは入れ子状に存在することができます。入れ子にしたスタックコンテキストは、上へ上へと重なって表示されます。

たとえば、section要素とその子要素のh2要素に position(static以外) と z-index を指定した場合、ルートスタックコンテキストの中にsectionの作るスタックコンテキストがあり、さらにその中にh2の作るスタックコンテキストがある、という構造になります。なお、html要素以外の要素が作るスタックコンテキストは、ローカルスタックコンテキストと呼ばれます。

ここで、z-indexを指定する際に知っておかなければいけない仕様があります。以下の2つです。

  • スタックコンテキストは、入れ子状になっていてもひとつひとつ独立していて、ひとつの要素が複数のスタックコンテキストに属することはできません
  • 他のスタックコンテキストに属する要素を、スタックコンテキスト内の任意のボックスの間の層に配置することはできません

これだけではわかりづらいので、section要素とその子要素のh2要素に position(static以外) と z-index を指定した場合で具体的な例を挙げると、

  • h2がsectionの作るスタックコンテキストに属することはない
  • h2をsectionより奥に表示させたり、sectionをh2より手前に表示させることはできない

ということが言えます。

実際にHTMLとCSSで試してみます。以下は、section要素とその子要素のh2要素に position(static以外) を指定したうえで、sectionに z-index:1、h2に z-index:0 を指定した例です。

※コードは一部省略しています。

HTML

<section>
  section要素 → z-index:1
  <h2>h2要素 → z-index:0</h2>
</section>

CSS

section {
  position: relative;
  z-index: 1;
}
h2 {
  position: absolute;
  top: 60px;
  left: 60px;
  z-index: 0;
}

実際に表示すると下のようになります。

※分かりやすいよう要素を透明にしてあります。

section要素 → z-index:1

h2要素 → z-index:0

スタックレベルはsectionが1でh2が0と、h2の方が小さいですが、表示はh2が上になります。これはsectionとh2がぞれぞれ別のスタックコンテキストを作っていて、表示順を入れ替えられなくなっているためです。

では、もしh2をsectionの後ろに表示させたかったらどうすればいいでしょうか。スタックコンテキストが入れ子になると順番の入れ替えができないので、sectionでスタックコンテキストが作られないようにします。具体的な指定の例を挙げると下のような感じです。ここではsectionとh2をdivで囲み、そのdivにz-index:0 、h2にz-index:-1 を指定しています。

div要素 → z-index:0

section要素 → z-index指定なし

h2要素 → z-index:-1

CSS 要素の重ね順を指定するz-indexの使い方2 ~スタックレベルとスタックコンテキスト~

前回の記事でz-indexの使い方のルールを紹介しましたが、z-indexの仕様についてほとんど触れずに書いたので、一部正しいとは言えない部分がありました。今回からは、もっとz-indexについて掘り下げて、正しい仕様を解説していきます。

z-indexで思い通りに重ね順が変えられない

z-indexは、仕様を理解せずに使っていると、思うように要素の順番が変わらないという事態に直面することがあります。たとえば、下のような例です。

z-index指定の失敗例

A、B、Cのボックスを奥から「C、B、A」の順で表示したいとき、z-indexの値をそれぞれ「A : 3」、「B : 2」、「C : 1」、で指定しています。

※コードは一部省略しています。

HTML

<div id="A">
  A → z-index:3
  <div id="B">
    B → z-index:2
  </div>
</div>
</div id="C">
  C → z-index:1
</div>

CSS

#A {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
#B {
  position: absolute;
  top: 60px;
  left: 60px;
  z-index: 2;
}
#C {
  position: absolute;
  top: 120px;
  left: 120px;
  z-index: 1;
}

一見、「C、B、A」と並びそうですが、実際に表示すると下のように「C、A、B」の順になります。

※分かりやすいようにAとBのボックスを透明にしてあります。

A → z-index:3

B → z-index:2
C → z-index:1

BのボックスがAより前に来てしまう理由を説明するには、z-indexの仕様を知っておく必要があります。

スタックレベルとスタックコンテキスト(スタック文脈)

z-indexの仕様について理解するために重要な2つの用語「スタックレベル」と「スタックコンテキスト」について解説します。

スタックレベル

z-indexは、positionをstatic以外にしたうえで要素の重ね順を数値指定しますが、そのz-indexの数値のことをスタックレベルといいます。スタックレベルは、上記例のようにブラウザ上の重ね順と数値の大小が必ず一致するとは限りません

スタックコンテキスト(スタック文脈)

特定の親要素の中に入った子要素の集合のことをスタックコンテキスト(スタック文脈)といいます。「特定の親要素」とは、たとえば次のような要素です。

  • html要素
  • positionの値がstatic以外かつz-indexの値がauto以外(つまり、z-indexを有効にした要素)

html要素が作るスタックコンテキストをルートスタックコンテキストといいます。html要素はほかのすべての要素を含んでいるので、ルートスタックコンテキストは、そのHTML文書に含まれるほぼ全ての要素のグループとなります。

もう一つの「特定の親要素」に当てはまるのが、z-indexを適用した要素です。たとえば、sectionに position:relative と z-index:100 を指定したとき、sectionに含まれる見出しや段落などの要素でスタックコンテキストが作られます。

z-indexのルール

上記で解説したスタックレベルとスタックコンテキストは、z-indexの指定に大きくかかわってきます。z-indexの仕様に基づくルールは次の通りです。このルールを理解すれば、z-indexの謎の挙動も理解できるようになります。

  • スタックレベルで指定できる重ね順は、同じスタックコンテキスト内の重ね順

このルールがあるため、冒頭の例ではうまく順番が変わりませんでした。それについての詳しい解説は、次回以降の記事に書きます。