【CSS】コツはパーセント計算！positionをレスポンシブで使うとズレるときに気を付けること

「position レスポンシブ」「position レスポンシブ ずれる」などの検索キーワードで当ブログを訪れてくださる方がいることに気づいたのですが、【css】position:absolute怖くなくなるまで徹底解剖！の記事では「基準位置の要素の大きさも、配置する要素の大きさも、そして位置の指定もすべて%で計算して配置してみましょう。」としか書いていなかったので、詳しく説明します。

※2025年9月に、以降の内容を全面的に改訂しました→旧バージョンはこちら

作るのはコチラ→比率を保ったままレスポンシブするデモ

長方形の中にハート型の要素配置されているデザインを、全体の要素の位置関係・大きさの関係性・縦横比を保ったまま、画面幅にあわせて拡縮できるように気を付けながら、positionを使って実装してみましょう。

※この記事ではvw (vi) やcqw(cqi)ではなく % 単位を使って要素を配置しますが、相対的な単位を使う場合は同じ考え方が使えます！

ステップ1 デザイン上の要素の大きさ・位置を測る

今回は横1000px縦1200pxの長方形の中に、横300px縦260pxのハート型の要素を配置したデザインを実装します。
ハート型の要素は、長方形の上から100px、左から100pxの位置に配置されています。

このデザインデータを、長方形の要素は position:relative ハート形の要素はposition:absolute で配置して、長方形の横幅を画面いっぱい width:100% で実装することにしましょう。

ステップ2. 各要素の縦横比を確認する

position:absolute を使うとき、最初のハードルは position:relative の要素の高さが消滅することです。

高さを消滅させたくない場合、今回のように「縦横比を保ちたい」場合は aspect-ratio が便利です。

aspect-ratio: [横幅(単位無し)] / [高さ(単位無し)];

この書き方だと aspect-ratio : 1000 / 1200; のように、約分したくなる見た目になりますが、このままで大丈夫です。

要素の大きさを改めて確認して、縦横比設定のために使う数値を取得しましょう。

※ 今回は例示としてハート形の要素にも aspect-ratio を書いていますが、今回のハート型の要素のように画像単体を配置するときは、画像部分は aspect-ratioを使わなくても縦横比維持できます。実際の実装では、必要に応じて調整してください。

ステップ3. 要素の横方向の位置と大きさの計算式を確認する

長いので

• ハート型の要素＝要素
• 長方形＝親要素

と呼ぶことにして、

ステップ4. 縦方向の位置の計算式を確認する

ステップ5. 実際にCSSで書いてみる

いままで確認してきた要素の大きさや計算式をもとに、実際に全体のCSSを書いてみます。

実装サンプルコード

HTML

<div class="position-container">
    <div class="img-box">
        <img src="heart.png" alt="ハートマーク" width="600" height="520">
    </div>
</div>

CSS

.position-container {
  position: relative;
  width: 100%; /* 領域を画面幅にあわせて拡縮させる */
  aspect-ratio: 1000 / 1200; /* デザイン通りの縦横比で固定 */
  background: linear-gradient(132deg, #ffffff, #ffccff);
}

.img-box {
  position: absolute;
  aspect-ratio: 300 / 260; /* デザイン通りの縦横比で固定 */
  width: calc(300 / 1000 * 100%); /* 要素の幅の％を計算 */
  left: calc(100 / 1000 * 100%); /* 要素の位置の％を計算 */
  top: calc(100 / 1200 * 100%); /* 要素の位置の％を計算 */
}

.img-box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

※ 今回は例示としてハート形の要素にも aspect-ratio を書いていますが、今回のハート型の要素のように画像単体を配置するときは、画像部分は aspect-ratioを使わなくても縦横比維持できます。実際の実装では、必要に応じて調整してください。

ステップ6. 本当にサイズの計算が合っているか確認する

これで画面の幅にあわせて拡縮できていそうな実装になりましたが、本当にデザイン通りの実装になったでしょうか？

ブラウザ上で長方形の横幅＝デザイン上の幅になる画面サイズで確認してみましょう。

実際の動作はこちらで確認できます→比率を保ったままレスポンシブするデモ

6-1. Chrome DevToolsのElementsパネルを開いた状態で、画面のサイズを調整

1. Elementsパネルで長方形の要素を選択
2. Computedタブの要素の大きさ、または要素の端に表示される要素の大きさが、デザイン上の幅になるように画面のサイズを調整

6-2. Computedタブで要素の大きさ・位置を確認

1. Elementsパネルでハート型の要素の方を選択
2. Computedタブで position と 要素の大きさを確認

これで表示される数値が、デザイン上の数値と一致していたら成功です！

まとめ

計測＆計算式の確認をして、その数値のとおりにCSSを書いて、結果が合っているかを確認する。
この基本の流れを守れば、position配置をレスポンシブ対応するのも簡単です！

各所の大きさをすべて％にして配置するために、以下の流れで上手に要素を配置してみましょう。

まずは計測＆計算式の確認

• デザイン上の要素の大きさ・位置を測る
  • デザインデータを忠実に計測！
• 各要素の縦横比を確認する
  • 計測した数値を使って aspect-ratio: 横 / 縦
• 要素の横方向の位置と大きさの計算式を確認する
  • 横方向の計算は、親要素の「幅」を基準にcalc(要素の幅 / 親要素の幅 * 100%)
• 要素の縦方向の位置の計算式を確認する
  • 縦方向の計算は、親要素の「高さ」を基準にcalc(上端からの距離 / 親要素の高さ * 100%)

確認した数値どおりにCSSを書いて、結果が合っているかを確認

• 実際にCSSで書いてみる
  • 確認した縦横比や計算式をそのまま書くだけ！
• 本当にサイズの計算が合っているか確認する
  • Chrome DevTools の ElementsパネルComputedタブを使うと確認しやすい！

position指定を使いながらのレスポンシブ対応が必要な時は、この方法を試してみてくださいね✨

---

---

【旧バージョンの記事】2020年時点の古い内容はここから