position: absolute を使ってレスポンシブ対応！%で相対指定のすゝめ

はじめに

こんにちは！たくまです！

Web制作を始めたばかりの方にとって、要素の配置は難題の1つです。
特にposition: absoluteを使って要素を配置しようとすると、画面サイズが変わったときに思ったように動かないことがありませんか？
例えば、以下のような記述を使用した場合：

.container {
  position: relative;
  width: 80%;
  margin: 0 auto;
}
 
.absolute-box {
  position: absolute;
  top: 100px;
  left: 50px;
  width: 300px;
}

このコードでは、.absolute-boxは.containerの中で、上から100px、左から50pxの位置に幅300pxで配置されます。

しかし、タブレットやスマホなどの画面サイズが小さいデバイスでは、.containerの幅が狭くなり、.absolute-boxが親要素からはみ出したり、他の要素と重なったりする可能性があります。
特に、固定のピクセル値を使用するとレスポンシブデザインに対応しづらくなります。

しかし、position: absoluteを使いながらも、親要素に対するパーセンテージ指定を活用することで、レスポンシブ対応に適した柔軟なレイアウトを実現できます。

position: absoluteの基本

ご存じの方も多いかと思いますが、position: absoluteについて簡単なおさらいです！

position: absoluteを指定した要素は、それまでの流れから外れて、特定の位置に配置されます。
その配置の基準となるのは、主にpositionがrelativeに設定された親要素です。
もしそのような親要素が存在しない場合、body要素が基準となります。

.container {
  position: relative;
  width: 80%;
  margin: 0 auto;
}
 
.absolute-box {
  position: absolute;
  top: 100px;
  left: 50px;
  width: 300px;
}

冒頭の例の場合、containerにposition: relative;が設定されているため、.containerの中で、上から100px、左から50pxの位置に幅300pxで配置されます。

しかし、position: relative; が設定されていない場合は、bodyの上から100px、左から50pxの位置に幅300pxで配置されます。

ピクセル（px）指定の問題点

position: absoluteを使用する際に、top、leftなどをpx単位で指定すると、以下のような問題が発生することがあります。

• 画面サイズに応じた調整が困難：固定されたピクセル値は、異なるデバイスや画面サイズに対応しづらく、要素が意図しない位置に表示されることがあります。
• 重なりやはみ出しの発生：他の要素との重なりや、コンテナからのはみ出しが発生し、レイアウトが崩れる原因となります。
• メンテナンスの難しさ：複数のメディアクエリを使用して各画面サイズに対応する必要があり、スタイルシートが複雑になります。

特に複数のposition: absoluteをpx指定で使用した場合、レスポンシブ対応で意図せぬレイアウトが多発して修正に時間がかかってしまうことも多いかと思います🫠

パーセンテージ（%）指定の活用でレスポンシブ対応

position: absoluteを使用する際、top、left、width、heightなどのプロパティにパーセンテージ（%）を使用することで、親要素のサイズに対する相対的な配置が可能になります。

これにより、画面サイズの変化に応じて要素の位置やサイズが自動的に調整され、レスポンシブなレイアウトが実現できます。

なぜパーセンテージ指定がレスポンシブ対応に有効なのか？

topやleftなどの位置指定プロパティに%を使用、widthやheightに%を使用すると、その値は親要素のサイズに対する割合として解釈されます。
つまり、親要素のサイズが変化しても、子要素の位置やサイズはその割合に基づいて自動的に調整されるため、画面サイズの変化に柔軟に対応できます。

実際のコードと画面で確認してみましょう。

<div class="container">
  <div class="absolute-box">コンテンツ</div>
</div>

.container {
  position: relative;
  width: 80%;
  background-color: red;
  margin: 0 auto;
  height: 700px;
}
 
.absolute-box {
  position: absolute;
  background-color: blue;
  top: 30%;
  left: 5%;
  width: 50%;
  height: 50px;
  color: white;
}

上記のコードでは、.absolute-boxは.containerの上から30%、左から5%の位置に配置され、幅は親要素の50%となります。画面サイズが変化して.containerのサイズが変わっても、.absolute-boxの位置とサイズは自動的に調整され、レスポンシブなレイアウトが実現されます。

画面幅が小さくなってもコンテンツの位置関係は変わってないことが分かるかと思います。

まとめ

position: absoluteを使用しながらも、親要素に対するパーセンテージ指定を活用することで、レスポンシブ対応の柔軟なレイアウトが実現可能です。
position: absoluteは非常に便利なプロパティですが、使い方次第では他の要素を巻き込んでおかしなレイアウトになってしまうので注意しましょう。

適切な親要素の設定と相対的な配置を意識することで、画面サイズの変化にも対応したレイアウトを構築できます。
また、複雑なレイアウトや多くの要素を含む場合は、FlexboxやGridレイアウトの使用も検討しましょう。

今後のWeb制作において、これらのテクニックを活用して、より柔軟でユーザーフレンドリーなレイアウトを目指しましょう。