レスポンシブデザインでよく使う技（％、calc関数、vw）

SPテクニック

calcで要素を柔軟に調整する

calc(Xvw / 3.9);

vw(ビューポート幅)

vw 単位は、ビューポート（ブラウザの表示領域）の幅に対して相対的にサイズを決定するため、要素をスケーリングするのに非常に強力。

/3.9

• これはvwだけで指定した場合に起こりがちな極端なスケーリングを防ぐために行われる。

  • たとえば、単にfont-size: 3vw;と指定すると、画面が非常に広くなったときにフォントサイズが極端に大きくなりすぎたり、非常に狭くなったときに小さくなりすぎたりする可能性があり。
  • 3.9のように除算を行うことで、vw の値を「ある基準値」で割ることで、スケーリングの度合いを調整し、より自然なサイズ変化を実現。

• この3.9という数値は、「基準となる特定の画面幅（で意図したサイズになるように調整された値」。

• 数値を指定するときは、390pxで値を合わせるように。

---

PCテクニック

max-widthで幅が広がりすぎないようにする

ウェブサイトのコンテンツを、どんな画面サイズでも見やすく、適切な幅に保つためには、以下の3つのCSSプロパティを組み合わせる。

.container {
    max-width: 1200px;
    margin: 0 auto;
    width: calc(100% - 2vw);
}

max-width: 1200px;

コンテンツが入る箱（要素）の最大幅を1200ピクセルに制限。
これにより、間延びを防ぐ。

margin: 0 auto;

この設定により、要素が左右に自動で中央揃えされる。
上下の余白は0。

width: calc(100% - 2vw);

要素の幅を親要素の幅の100%から、画面幅の2%（2vw）を引いた値に。
画面の端にわずかな余白を設けることで、コンテンツが画面の端にぴったりくっつくのを防ぎ、特にスマホなどの画面が狭いデバイスでも見やすくするための工夫。

---

calcとmin()で要素を柔軟に調整する

#main {
　padding-top: min(calc(140vw / 19.2), 140px);
}

• 1920pxで合わせた要素値を画面が縮小・拡大した際レスポンシブに配置される。
  ※前述の3.9と同じ、「基準となる特定の画面幅（で意図したサイズになるように調整された値」である。
• 間延びしないためにmin()で最大値を指定する。
  -大体の場合、 max-widthと親に指定しているため、最大値を指定しておく必要がある。

---

SP/PC共通テクニック

transformを使った中央寄せ

transform: translateX(-50%);

要素の現在の位置から、自身の幅の50%だけ水平方向（X軸）に左へ移動。
正の値（50%）であれば右へ移動。

活用例

• 親要素内で子要素を水平方向の中央に配置する際に使用される
  position: absolute; left: 50%; と組み合わせることで、要素の左端が親要素の中心に来てしまう問題を解決し、要素自体の中心を親要素の中心に合わせることが可能になる。

自身の幅の50%だけ水平方向（X軸）に左へ移動することで、
半分の位置になる＝中心にくる

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 子要素の幅の半分だけ左に戻す */
}

transform: translateY(-50%);

要素の現在の位置から、自身の高さの50%だけ垂直方向（Y軸）に上へ移動。
正の値（50%）であれば下へ移動。

活用例

• 親要素内で子要素を垂直方向の中央に配置する際に使用される
  position: absolute; top: 50%;と組み合わせることで、要素の上端が親要素の中心に来てしまう問題を解決し、要素自体の中心を親要素の中心に合わせることができる。

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 子要素の高さの半分だけ上に戻す */
}

transform: translate(-50%, -50%);

要素の現在の位置から、自身の幅の50%だけ水平方向（X軸）に左へ移動し、
かつ自身の高さの50%だけ垂直方向（Y軸）に上へ移動させる。

活用例

• 要素の「中央」を基準点にぴったり合わせる
  親要素に対して子要素を水平方向、垂直方向ともに完全に中央に配置する際に、最も効率的でよく使われるテクニック。
  特に、要素のサイズが可変である場合や、コンテンツによってサイズが変わる場合に非常に有効。

.parent {
    position: relative;
    /* またはflexbox/gridコンテナでも可 */
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 自身の中心が親の中心に */
}

---

背景画像や親要素に合わせて、子要素をレスポンシブに正確に配置する

<div class="point1">
  <div class="point1-innner">
      <h4>テストタイトル</h4>
      <p>テスト説明</p>
  </div>
</div>

.point1 {
    background-image: url(../img/pc/pc_poin1.png);
    width: min(calc(380vw / 19.2), 380px);
    height: min(calc(600vw / 19.2), 600px);
    position: relative;
}

.point1-innner {
    width: min(calc(260vw / 19.2), 260px);
    position: absolute;
    top: 52%;
    left: 52%;
    transform: translate(-50%, -50%);
}

基準となる「親」（.point1）の指定

• 親の設定が何よりも大切。
• そしてその親にレスポンシブの高さ・幅を設定することが重要。

子要素 (.point1-innner) に position: absolute; と位置を指定

• ％指定。

transformを使った中央寄せ

要素の「中央」を基準点にぴったり合わせるためによく使われるテクニック。

%とcalc(Xvw / Y)指定の使い分け

%指定

親要素のサイズがレスポンシブであり、子要素をその親の特定の「相対位置」（例：中央、端）にぴったり合わせたいときに使う。

「親の動きに合わせて、自分も同じ割合で動く」というイメージ。

親要素がレスポンシブ指定の例:

• width(height): 100%; (親の親の100%)
• width(height): 80vw; (ビューポート幅の80%)
• max-width(max-height): 1200px
• width: calc(100% - 20px);
• width: min(500px, 80vw);
• aspect-ratio

calc(Xvw / Y)指定

親要素の有無にかかわらず、要素のサイズや位置を「画面全体のサイズ」に連動させたいとき、特に、極端なスケーリングを防ぎ、特定の最大値（または最小値）で制限したいときに使います。

「画面全体を見て、自分は最適なサイズ・位置に収まる。ただし、デカくなりすぎない（小さくなりすぎない）」というイメージ。

---

フォントサイズ

• PC→min(calc(18vw / 19.2), 18px)
• SP→font-size: calc(9vw / 3.9)

clamp(最小値, 推奨値, 最大値)

minやmaxは最大値・最小値どちらかの値を設定できるが、clampはどちらも設定できるので良く使用する。

clamp() が値を決定するルール

• 推奨値が「最小値」と「最大値」の間にある場合
  • このとき、推奨値が適用。
• 推奨値が「最小値」より小さい場合
  • このとき、最小値が適用。
• 推奨値が「最大値」より大きい場合
  • 最大値が適用されます。