【完全解説】CSS z-indexでWebページを自由自在にレイアウト

Web ページのデザインにおいて、要素を重ねて表示することは頻繁に行われます。その際、どの要素が前面に表示され、どの要素が背面に表示されるかを制御するプロパティが z-index です。このチュートリアルでは、z-index の仕組みと、それを効果的に使用する際のヒントについて詳しく説明します。

z-index の基本

• 同じ z-index の値を持つ要素が複数ある場合は、後から記述された要素の方が前面に表示されます。
• 既定の z-index の値は 0 です。
• z-index の値が大きい要素ほど、前面に表示されます。
• このプロパティは、要素の 重ね合わせ順序 を決定します。
• z-index は、CSS の positioned layout モジュールで使用されるプロパティです。

z-index の書き方

selector {
  position: absolute | fixed | relative; /* 要素を配置モードに変更 */
  z-index: number; /* 重なり順序を指定する数値 */
}

例

.element1 {
  position: relative;
  z-index: 10; /* 要素1を前面に表示 */
}

.element2 {
  position: relative;
  z-index: 5; /* 要素2を背面に表示 */
}

z-index の注意点

• z-index は、慎重に使用する必要があります。z-index の値をむやみに上げると、コードが読みづらくなり、予期しない動作が発生する可能性があります。
• z-index は、nesting によって影響を受けます。親要素の z-index は、子要素の z-index よりも優先されます。
• z-index は、position の値によって動作が異なります。
  • absolute または fixed の場合：要素はブラウザウィンドウに対して配置されます。
  • relative の場合：要素は通常のフローから取り除かれ、元の位置に対して配置されます。
• z-index は、position プロパティが static 以外の要素にのみ適用されます。

z-index の応用例

• 要素を 階層構造 に配置する
• スクロール時にヘッダーやフッターを固定する
• ドロップダウンメニューやポップアップウィンドウなどの オーバーレイ を作成する

---

例 1：オーバーレイの作成

この例では、z-index を使用して、ボタンの上にドロップダウンメニューを作成します。

<div class="container">
  <button class="btn">ボタン</button>
  <div class="dropdown">
    <ul>
      <li><a href="#">オプション 1</a></li>
      <li><a href="#">オプション 2</a></li>
      <li><a href="#">オプション 3</a></li>
    </ul>
  </div>
</div>

.container {
  position: relative;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
}

.dropdown {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; /* ドロップダウンメニューをボタンの上に表示 */
}

.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.dropdown li:hover {
  background-color: #3e8e41;
}

例 2：ヘッダーの固定

この例では、z-index を使用して、ページをスクロールしてもヘッダーが常に画面上部に表示されるようにします。

<header>
  <h1>私の Web サイト</h1>
</header>

<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  position: fixed; /* ヘッダーを固定位置に配置 */
  top: 0; /* ヘッダーを画面上部に配置 */
  width: 100%;
  z-index: 10; /* ヘッダーを他のコンテンツの上に表示 */
}

main {
  padding: 20px;
}

例 3：要素の階層化

この例では、z-index を使用して、3 つの四角形を積み重ねて表示します。

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.

---

float プロパティ

float プロパティは、要素を水平方向に左または右に配置するために使用されます。z-index と同様に、float を使用して要素を重ねて表示することができます。ただし、float は古いレイアウト方法であり、最近の CSS レイアウトではあまり使用されていません。また、float はクリアリングの問題など、いくつかのレイアウトの問題を引き起こす可能性があることに注意する必要があります。

例：

.box1 {
  width: 100px;
  height: 100px;
  background-color: #f00;
  float: left;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: #0f0;
  float: left;
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: #00f;
  clear: both;
}

flexbox レイアウト

flexbox は、現代的な CSS レイアウトにおける強力なツールであり、柔軟なレイアウトを作成するために使用できます。z-index と異なり、flexbox は要素を垂直方向、水平方向、または両方に配置することができます。また、flexbox を使用して、要素を隙間なく配置したり、親要素内での要素の比率を調整したりすることができます。

例：

.container {
  display: flex;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: #f00;
  flex-order: 1; /* 要素1を前面に表示 */
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: #0f0;
  flex-order: 2; /* 要素2を中央に表示 */
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: #00f;
  flex-order: 3; /* 要素3を背面に表示 */
}

grid レイアウト

grid レイアウトは、flexbox と同様に、現代的な CSS レイアウトにおけるもう 1 つの強力なツールです。grid は、行と列のグリッドを作成し、要素をそのグリッド内に配置するために使用されます。z-index と異なり、grid を使用して要素をより精密に配置することができます。また、grid を使用して、レスポンシブなレイアウトを作成し、画面サイズに合わせて要素を自動的に調整することができます。

例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列のグリッドを作成 */
}

.box1 {
  grid-row: 1; /* 要素1を 1 行目に配置 */
  grid-column: 1; /* 要素1を 1 列目に配置 */
}

.box2 {
  grid-row: 1; /* 要素2を 1 行目に配置 */
  grid-column: 2; /* 要素2を 2 列目に配置 */
}

.box3 {
  grid-row: 2; /* 要素3を 2 行目に配置 */
  grid-column: 3; /* 要素3を 3 列目に配置 */
}

position: sticky

position: sticky は、要素をブラウザウィンドウ内に固定し、スクロールしても画面上の特定の位置に維持するために使用されます。z-index と異なり、position: sticky は要素を常に前面に表示するとは限りません。要素がブラウザウィンドウの境界に達すると、固定解除されて通常のフローに戻ります。

.sidebar {
  position: sticky;
  top: 20px;
  width: 100px;
  height: 300px;
  background