Closed7

レスポンシブ対応まとめ

ebi_yuebi_yu

CSSの比較関数

複数の値を比較して値を計算する比較関数について紹介します。
レスポンシブ対応を行うときに便利です。

min()

「最小の値」 を適用する関数

width: min(100vw, 1200px);
/* 
  - `100vw` と `1200px` のうち、小さい方を適用。
  - 画面幅が 1200px 未満のとき → `width: 100vw`;
  - 画面幅が 1200px 以上のとき → `width: 1200px`;
*/

https://developer.mozilla.org/ja/docs/Web/CSS/min

max()

「最大の値」 を適用する関数

width: max(100vw, 1200px);
/*
  -`100vw` と `1200px` のうち、大きい方を適用
  - 画面幅が 1200px 以上のとき → `width: 100vw`
  -  画面幅が 100vw 以下のとき → `width: 1200px`
*/

https://developer.mozilla.org/ja/docs/Web/CSS/max

clamp()

最小・理想・最大の範囲で値を調整する関数

width: clamp(300px,100vw,1200px);
/*
  - 最小値 (`300px`) → これ以下にはならない
  - 理想値 (`100vw`) → 300px以上1200px未満のとき適用される
  - 最大値 (`1200px`) → これ以上にはならない
*/

https://developer.mozilla.org/ja/docs/Web/CSS/clamp

用途

1. レスポンシブな幅の調整

/* 
  - 最小値 (300px) → 画面が狭くても 300px は確保。
  - 理想値 (100vw) → 画面幅いっぱいを使う。
  - 最大値 (1200px) → 画面が広くても 1200px 以上にはならない。
*/
width: clamp(300px, 100vw, 1200px);
  • コンテンツ幅の制御：狭すぎず、広すぎない最適な幅を確保。
  • レスポンシブデザイン：デスクトップでもモバイルでも適切なサイズを維持。

2. フォントサイズのスケーリング

/* 
  - 最小値 (16px) → 文字が小さくなりすぎない。
  - 理想値 (2vw) → 画面幅に応じて拡大・縮小。
  - 最大値 (24px) → 文字が大きくなりすぎない。
*/
font-size: clamp(16px, 2vw, 24px);
  • 可読性の向上：小さい画面でも文字が読める。
  • 自動調整：画面サイズに応じて適切なフォントサイズを適用。

参考

ebi_yuebi_yu

📌 レスポンシブデザインのベストプラクティス（完全版）

今までの会話をまとめつつ、さらに 意識すべきポイント や 適切な単位・関数の選び方 を整理しました。

🎯 1️⃣ レスポンシブデザインで意識するべきこと

📌 1. 文字サイズ

  • 適切な単位: clamp()（最小・最大制御）
  • 理由: 小さい画面では縮小し、大きい画面では適切に拡大
font-size: clamp(0.8rem, 2vw, 1.5rem);

✅ 最小 0.8rem,
✅ 推奨 2vw（画面幅に応じてスケール）
✅ 最大 1.5rem に抑える

📌 2. 要素の大きさ

  • 適切な単位: minmax()（最小・最大制御） + % や vw
  • 理由: 画面サイズに適応させつつ、縮小しすぎないようにする
grid-template-columns: minmax(150px, 1fr);

✅ 最小 150px,
✅ 最大で 1fr（利用可能なスペースを活用）

📌 3. gap の適切な調整

  • 適切な単位: clamp() や calc()
  • 理由: 画面サイズによって gap を動的に変化させる
gap: clamp(0.5rem, 2vw, 2rem);

✅ 狭い画面では 0.5rem,
✅ 大きい画面では 2rem に拡大

📌 4. padding の適切な調整

  • 適切な単位: clamp() または %
  • 理由: 画面サイズによって適切な余白を確保
padding: clamp(1rem, 3vw, 4rem);

✅ 最小 1rem,
✅ 通常 3vw（画面サイズ依存）,
✅ 最大 4rem

📌 5. width / height の適切な設定

  • 適切な単位: % / vw / vh
  • 理由: 画面に適応しつつ、可変に対応する
width: 100%;
height: auto;
max-width: 1200px; /* PC では最大1200px */

✅ 100% で親要素にフィット
✅ 最大 1200px に制限して極端に広がるのを防ぐ

🎯 2️⃣ grid と flex のベストプラクティス

どちらを使うべきか、どう組み合わせるべきかを整理。

📌 grid のベストプラクティス

✅ レスポンシブ対応に auto-fit / auto-fill を活用

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

✅ 行・列の比率を調整

grid-template-columns: 1fr 2fr;

✅ コンテンツの最小・最大サイズを適切に設定

grid-template-columns: minmax(200px, 1fr);

✅ 縦方向の配置調整

align-items: center;

📌 flex のベストプラクティス

✅ 子要素を適切に縮小できるように min-width: 0; を設定

.flex-item {
    flex: 1;
    min-width: 0;
}

✅ 折り返しを考慮して flex-wrap を適用

display: flex;
flex-wrap: wrap;

✅ 要素間の gap を適切に設定

gap: clamp(0.5rem, 2vw, 2rem);

✅ 中央揃えの簡単な指定

display: flex;
justify-content: center;
align-items: center;

🎯 3️⃣ まとめ

対象 単位・関数の選び方 理由
フォントサイズ clamp(0.8rem, 2vw, 1.5rem); 画面サイズに応じた適切なスケール
要素の幅 minmax(150px, 1fr); 最小値を確保しつつ、余白があれば拡張
gap clamp(0.5rem, 2vw, 2rem); 画面サイズに応じて調整
padding clamp(1rem, 3vw, 4rem); 余白を適切に確保
width width: 100%; max-width: 1200px; 画面に適応しつつ、最大値を設定
grid のカラム repeat(auto-fit, minmax(150px, 1fr)); 自動調整しながら適切な幅に
flex の縮小 min-width: 0; 子要素が適切に縮小できるようにする
中央揃え (flex) justify-content: center; align-items: center; 中央揃えを簡単に指定
折り返し (flex) flex-wrap: wrap; はみ出しを防ぐ
画像の調整 object-fit: contain; 画像が grid からはみ出ないように

📌 これらを意識すれば、レスポンシブデザインの品質が向上！🎯

💡 適切な単位と関数 (clamp(), minmax(), %) を使い分ける
💡 grid と flex を組み合わせて最適なレイアウトを実現
💡 はみ出し・折り返し・サイズ調整を意識したスタイル設計

このまとめを活用すれば、どんな画面サイズにも対応できる 柔軟なレスポンシブデザイン が実現できます！ 🚀

ebi_yuebi_yu

abdoluteとrelaitive

  • absolute は デフォルトでは static 以外の親要素を探し、その親要素を基準 に配置される。
  • 親要素にrelative をつけていないと absolute の基準が想定と違くなる可能性がある。
このスクラップは6ヶ月前にクローズされました