absolute｜CSSの absolute を使うときの手順

CSSの absolute を使うときの手順（取扱説明書）

1. デザインに必要な子要素を揃える

• 何をするか？
  まず、画面に配置したい要素（テキスト、画像、ボタンなど）をすべて準備する。
• 気をつけないといけないこと
  • 必要な要素をHTMLに記述しておかないと、後でレイアウトの調整が面倒になる。
  • あらかじめ、どの要素を absolute で配置するか決めておくとスムーズ。
• 失敗した時の対処
  • 要素が想定外の場所にいく場合は、親要素の position を確認（親が relative になっていないと暴れる）。
• 親要素および子要素に名前をつけるタイミング
  • 要素を揃えた時点で、それぞれに適切な class を付けると後で管理が楽。

---

2. 親要素を設定する

• 何をするか？
  absolute を適用する子要素を包む親要素を作る。
• 気をつけないといけないこと
  • absolute の基準となる親要素には position: relative; を指定する。
  • relative を設定しないと、子要素が body に対して配置されるので注意。
• 失敗した時の対処
  • 子要素の位置がずれる場合、親要素が relative になっているか確認する。
• 親要素の名前をつけるタイミング
  • この段階で wrapper や container などの名前をつける。

---

3. 子要素に absolute を設定

• 何をするか？
  子要素に position: absolute; を適用し、配置を調整する。
• 気をつけないといけないこと
  • top, left, right, bottom を使って位置を調整する。
  • z-index を使って重なり順を決める。
• 失敗した時の対処
  • top: 0; left: 0; などを試して、どこに配置されるか確認する。
  • z-index が適切かチェックする（要素が後ろに隠れていないか）。
• 子要素の名前をつけるタイミング
  • 位置ごとに適切な class 名を付けると管理しやすい。

---

4. レスポンシブ対応

• 何をするか？
  画面サイズに応じた absolute の位置調整をする。
• 気をつけないといけないこと
  • @media を使って、スマホ・タブレット対応を忘れずに。
  • vw, vh, % を活用し、柔軟な配置にする。
• 失敗した時の対処
  • スマホで崩れたら max-width を設定し、left などを調整する。

---

position 別の親・子要素の雛形

1. absolute の基準が relative の場合

.parent {
  position: relative; /* 基準 */
  width: 300px;
  height: 300px;
  background: lightgray;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="child"></div>
</div>

---

2. absolute の基準が fixed の場合（画面に固定）

.child {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background: blue;
}

<div class="child"></div>

---

3. absolute の基準が sticky の場合（スクロールに応じて固定）

.parent {
  position: sticky;
  top: 10px;
  background: yellow;
}

<div class="parent">
  <p>スクロールに応じて固定される</p>
</div>

---

子要素はまとめて１つ？いくつかに小分け？

基本的には 各セクションごとにグループ化 する方が管理しやすいです。理由は以下の通りです。

各セクションごとにグループ化するメリット

1. レイアウトの崩れを防げる
   → absolute を使うと、親要素の影響を受けずに自由に配置できますが、親を統一しないと意図しない場所に飛ぶ可能性があります。
2. CSSの管理がしやすい
   → 各セクションの relative な親を設定することで、子要素が暴れないようにコントロールできます。
3. レスポンシブ対応が楽になる
   → 画面幅によって absolute の配置を調整しやすい。

---

「子要素を全部揃えてからまとめて1つのグループ」にする場合の問題点

• absolute の基準が body や大きな親要素になり、意図しない場所に要素が配置される。
• 各セクションの管理が難しくなり、修正が大変。
• セクションごとにデザイン変更したいときに影響範囲が大きくなる。

---

適切なグループ化の方法

<section class="section1">
  <div class="container">
    <div class="child"></div>
  </div>
</section>

<section class="section2">
  <div class="container">
    <div class="child"></div>
  </div>
</section>

.section1, .section2 {
  position: relative; /* それぞれの基準 */
  height: 500px;
  background: lightgray;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}

✅ 各セクション (.section1, .section2) に position: relative; をつけるのがポイント！
→ これで、.child が body ではなく、各 .section を基準に absolute 配置されます。

---

結論

👉 各セクションごとに relative の親要素を作り、子要素 (absolute) をその中で管理する方が良い！
👉 もし absolute をまとめて一括で管理したい場合は、特定のグループを作って、その親を relative にする 方法もあるが、TOPページの構成によってはやや管理が難しくなる。

この方法で試してみて、うまくいかなければ調整案を考えます！