z-indexとは? 素敵なサイト作ってみたいCSSの勉強

なんとなくz-indexを見かけたことはあるけれど、特に使ったことがなかったのですが、おしゃれな使い方を見かけたので私も作ってみたいということで備忘録です。おしゃれとは無縁な使い方のみの解説です。

z-indexとは

z-indexは重なり順を決める際に使用します。数値が高いほうが上に重なります。

Photoshopなど使ったことがある人はレイヤーをイメージするとわかりやすいと思います。

以下Codepenのサンプルではz-indexの値を切り替えて上下を入れ替えています。

See the Pen zindex by Nakamoto (@programmerlife) on CodePen.

CSSの書き方

class1 {
    position: absolute;
    left: 35px;
    top: 10px;
    z-index: 1;
}

z-indexには数値またはautoが入ります。autoはデフォルト値です。

Javascriptでの指定方法

ついでにJavascriptの取得方法です。

z-indexは以下で取得可能です。

object.style.zIndex

上記のcodepenの例です。

let div1 = document.querySelector('.class1') ;
if(div1.style.zIndex == 1){
    div1.style.zIndex = -1;
}else{
    div1.style.zIndex = 1;
}

querySelector 参考

z-indexのサンプルコード

実際の使い方はアイディア勝負できっといろいろできると思いますが、こんな使い方ができるよという参考程度のものを作ってみました。

See the Pen zindex test1 by Nakamoto (@programmerlife) on CodePen.

おわり

z-indexを使えばアイディア次第でなにか作れそうですね。
普段からサイトを開発者モードで見てみると良いアイディアが集められそうだなと思いました。

参考

https://www.w3schools.com/cssref/pr_pos_z-index.asp

HTML / CSS

Posted by Nakamoto