Webサイトをスマホやタブレットで画面幅に合わせてサイズを調整するCSSの書き方をご紹介します！
使用ケース
- 画面が大きくなるにつれて、文字やロゴも画面幅に合わせて大きくします。
- 画面が小さくなると、文字やロゴも自動的に小さくします。
- ただし、大きくなりすぎたり小さくなりすぎたりしないように、最大値と最小値を設定します。
CSSコードの例
以下のコードを 「外観 → カスタマイズ → 追加CSS」 にコピペしてください。
/* ===== 通常の画面サイズ（PCなど）での設定 ===== */
.tagline {
/* フォントサイズは画面幅に応じて変化。ただし最大18.43pxまで */
font-size: min(3.86vw, 18.43px);
}
.logo-header img {
/* 高さは10vwまで。ただし最大50pxまでに制限 */
height: min(10vw, 50px);
}
/* ===== スマホ画面（480px以下）での調整 ===== */
@media screen and (max-width: 480px) {
.tagline {
/* フォントは小さくなりすぎないように最低7pxを確保 */
font-size: max(3.86vw, 7px);
}
.logo-header img {
/* ロゴ画像も小さすぎないように最低15pxに保証 */
height: max(10vw, 15px);
}
}どういう動きになるの例
| 画面幅 | .tagline のフォントサイズ | .logo-header img の高さ |
|---|---|---|
| min(3.86vw, 18.43px) | min(10vw, 50px) | |
| 1500px | 3.86vw = 57.9px → 最大18.43pxに制限 | 10vw = 150px → 最大50pxに制限 |
| 1024px | 3.86vw = 39.5px → 最大18.43pxに制限 | 10vw = 102.4px → 最大50pxに制限 |
| 768px | 3.86vw = 29.6px → 最大18.43pxに制限 | 10vw = 76.8px → 最大50pxに制限 |
| max(3.86vw, 7px) | max(10vw, 15px) | |
| 480px | 3.86vw = 18.5px → OK | 10vw = 48px → OK |
| 300px | 3.86vw = 11.6px → OK | 10vw = 30px → OK |
| 150px | 3.86vw = 5.79px → 最低7pxに保証 | 10vw = 15px → 最低15pxに保証 |
ポイント説明
min(A, B)→ AとBの小さい方を使う。→ サイズが大きくなりすぎるのを防ぐ。max(A, B)→ AとBの大きい方を使う。→ サイズが小さくなりすぎるのを防ぐ。vw→ ビューポート幅（画面の横幅）に対するパーセント → 画面サイズに応じて自動で調整される。
補足
画像のサイズがwidth: 687px, height: 70pxと、画面幅が1024pxの場合、height: 3.86vw;だとheightは何pxになか計算してみましょう！
条件：
- CSS指定：
height: 3.86vw; - 画面幅（viewport width）：1024px
vw= ビューポート幅の 1%
計算式：
- 3.86vw ＝ 1024px × 0.0386 ＝ 39.5264px
結果：
- 画面幅が1024pxのときに、
height: 3.86vw;は約 39.53px になります。
元の画像との比率：
- 元画像の高さ：70px
- 表示サイズ：39.53px
- 約 56.5% に縮小されて表示されます。
その他の方法
上記CSSコードを、より柔軟にサイズを調整できるようにclamp()関数を用いて書き換えます。clamp()関数は、最小値、推奨値、最大値を指定し、その範囲内で値を自動的に調整します。これにより、メディアクエリを使用せずに、画面サイズに応じた適切なスタイルを適用できます。
変更後のCSSコード：
/* ===== 通常の画面サイズ（PCなど）での設定 ===== */
.tagline {
/* フォントサイズは画面幅に応じて変化し、7pxから18.43pxの範囲で調整 */
font-size: clamp(7px, 3.86vw, 18.43px);
}
.logo-header img {
/* 高さは画面幅に応じて変化し、15pxから50pxの範囲で調整 */
height: clamp(15px, 10vw, 50px);
}変更点とその説明：
.taglineのフォントサイズ調整:font-size: clamp(7px, 3.86vw, 18.43px);- 最小値（7px）: フォントサイズがこれ以上小さくならないように設定。
- 推奨値（3.86vw）: ビューポート幅の3.86%に基づいてフォントサイズを動的に調整。
- 最大値（18.43px）: フォントサイズがこれ以上大きくならないように設定。
.logo-header imgの高さ調整:height: clamp(15px, 10vw, 50px);- 最小値（15px）: 画像の高さがこれ以上小さくならないように設定。
- 推奨値（10vw）: ビューポート幅の10%に基づいて高さを動的に調整。
- 最大値（50px）: 画像の高さがこれ以上大きくならないように設定。
clamp()関数の利点:
- コードの簡潔化: メディアクエリを使用せずに、1行のコードで最小値、推奨値、最大値を指定できるため、コードがシンプルになります。
- 柔軟なレスポンシブデザイン: 画面サイズに応じて要素のサイズが自動的に調整され、ユーザーにとって最適な表示を提供します。
参考資料:
これらの変更により、フォントサイズや画像の高さが画面サイズに応じて適切に調整され、ユーザーエクスペリエンスの向上が期待できます。
まとめ
この方法を使うと、画面のサイズに応じて、フォントや画像が自然に変化し、見やすさを保つことができます！
スマホ対応がうまくいっていないと感じたら、ぜひこの方法を取り入れてみてください。
コメント