スタート!CSS入門

重なり順

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボックスの重なり順を指定するには、z-indexプロパティを使います。ここでは、z-indexプロパティの使い方について紹介します。
講師:
04:30

字幕

ボックスの重なり順を指定するには z-indexプロパティを使います。このレッスンでは z-index プロパティの使い方について紹介します。まず z-index プロパティの適用対象はボックスの配置方法を指定するposition プロパティに「 static 」以外の値、つまり「 relative 」か「 absolute 」か「 fixed 」のいずれかの値が指定されている必要があります。この点に注意しましょう。z-index プロパティに使える値は「 auto 」キーワードと「整数」です。「 auto 」は CSS の仕様に従って表示します。通常は HTML で後に書いた要素が前に表示されます。「整数」は重なり順を整数で指定します。この値が大きいほど前に表示されます。マイナスの値も指定できその場合は auto よりも後ろに表示されます。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見ると3つの領域が重なって表示されています。上からエメラルドグリーンの領域、写真の領域、山吹色の領域です。HTML を見るとこれらの要素はbox1 box2 box3 というクラスが指定された div 要素になっていることが分かります。 CSS ではこれらのクラスに対して相対的な位置や背景色が設定されています。ここではこれらのクラスの重なり順を変更してみましょう。まずはエメラルドグリーンの領域が写真の後ろに隠れてしまっているのでこれを前に表示するようにします。エメラルドグリーンの領域は ボックス1「 box1 」というクラスが割り当てられていますのでこのセレクタに対して CSS を書きます。box1 に対して z-index プロパティで数値の 1 を指定します。ウェブブラウザを見ると box1 クラスを設定した div 要素が前面、前に表示されたことを確認できます。ここでは単に数字の 1 を設定しましたが、10 でも 100 でも構いません。ただこのことによって box1 と box3 の領域の重なり順が変わりbox3 の内容が読めなくなってしまいました。今度はこの山吹色の領域、box3 の重なり順をさらに前に指定してみます。box3 クラスに対してz-index プロパティで先ほど指定した box1 クラスの値よりも大きい値を指定します。ここでは数値の 2 を設定しましたが、仮に box1 に 10 や 100 を設定した場合はそれよりも大きい数値を設定してください。 ここでは 2 を設定します。先ほどよりも大きな値を z-index プロパティに指定しましたのでウェブブラウザを見ると box3 クラスがbox1 クラスよりも前に表示されたことが確認できます。このレッスンではボックスの重なり順を指定するz-index プロパティの使い方について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。