Webサイトのレスポンシブレイアウト(gap・min・max・clamp)

できるだけ画面サイズにあったレイアウトで、CSSが煩雑にならないようにするにはどうしたらいいのだろう?
可変にするのがいいのいいのかなぁ〜

目次
  1. デモサイトについて
  2. min・max・clamp
  3. clampのつかいどころ
  4. サポートされていないブラウザのフォールバック

デモサイトについて

可変レイアウトを視覚で確認できればと、おおざっぱなものですがレイアウトのシュミレーターもどきを作ってみました^^;

コンテナ
コンテナは画面内のコンテンツの収まる範囲です

1つ目は、コンテナの最大幅を決めるレイアウトです

.container{
  margin: 0 auto;
  max-width: 1000px;
  width: 95%;
}
/*minでまとめると*/
.container{
  margin: 0 auto;
  width: min(95%, 1000px);
}

2つ目は、コンテナは画面の大きさで収縮するレイアウトです

.container{
  padding: 0 max(10px, 5vw);
}
/*最小値は設定しない*/
.container{
  padding: 0 5vw;
}

ちなみに「スマフォのコンテナ」は100%かそれにに近い幅がほとんどなので、あえて最小値は設定しなくてよいかもw
*vwはスマフォだと極小サイズです

サイドバー

「スマホ」や「タブレットの縦」の画面は狭いので、サイドバーはメインコンテンツのあとに配置して、1カラムで表示する場合がほとんどです
ブレイクポイントで切り替えます
「ブレイクポイント」は、画面幅に合わせてCSSを切り替える時の切り替えポイントのことです

ブレイクポイントをどうするか?が悩みどころです

主なデバイスのサイズ
縦幅はランドスケープモード(90度傾けたとき)の参考に
*個人的には、コンテンツの内容にもよりますが、サイドバーのブレイクポイントは1024pxがいいように思います

機種横幅縦幅
iPhoneSE320 568
iPhone6・7・8375 667
X・XS・11 Pro375812
iPhone6・7・8 Plus414736
XR・11
XS・11 Pro( Max)
414 896
12・13 Pro( Max)428926
iPad mini7681024
iPad(7・8・9)810 1080
Pro10241366
WXGA1280800
WXGA Wide1366768
HD+1600900
FHD19201080
WQHD25601440

1つ目のサイドバーは、サイドバーを固定幅にしてメインコンテンツは画面幅で収縮します

2つ目のサイドバーは、サイドバーも画面(コンテナの幅)にあわせて収縮します
そのため最小幅を決めておきます

.content {
    display: flex;
}
/*ビューポート基準なら30vwで*/ 
aside {
  width: max(30%, 200px);
} 
main {
  flex-grow: 1;
}

「flex-basis」で幅を指定するときは、必ず指定サイズになるわけではなく、他の指定との兼ね合いでフレックスコンテナ内におさまるように自動調整されます

「サイドバーとメインコンテンツの間の余白」は、コンテナの幅にあわせて収縮させます
*ほとんどのケースで余白は固定幅でいいかと思いますが・・・w

「gap」プロパティを使いました
「gap」プロパティは行や列の間のすき間を定義するので、サイドバーの位置(右か左)で変更する必要がありません(サイドバーではなく、親のコンテナに設定します)
*margin使用時と違い「:first-childなど擬似クラス」や「ネガティブマージン」を使う必要がありません
ただし、IE非対応(Safari 14.1未満も非対応 😭 )で適切なフォールバックは必要

gaprow-gapcolumn-gapの一括指定です
column-gapが省略されたときはrow-gapと同じ値が設定されます

.content {
    display: flex;
    gap: max(3%, 16px);
}

min・max・clamp

使っていなかったmin()max()clamp()ですが、別途IE用のフォールバックを書くとしても、便利なので使っていきたい所存です😊

  • min()は、1つ以上のコンマ区切りの計算が含まれ、それらの最小値を表します
    最大値を設定するときに使用します
  • max()は、1つ以上のコンマ区切りの計算が含まれ、それらの最大値を表します
    最小値を設定するときに使用します
  • clamp()は、3つのパラメーター(最小値、推奨値、最大値)を使用します
    推奨値は、結果が最小値と最大値の間で使用される値の式です

min()max()は3つ以上の引数を与えることができます

min()max()を式の値として入れ子にできます
calc()を使わずに直接計算できます

よく利用する単位

  • 1rem ルート要素のフォントの大きさ
  • 1em その要素のフォントの大きさ
  • 1vw ビューポートの幅の1%
  • 1vh ビューポートの高さの1%
  • 1vmin ビューポートの小さい側の1%
  • 1vmax ビューポートの大きい側の1%

vminはビューポートの短辺、vmaxはビューポートの長辺に対する割合でサイズ指定するので、スマホやタブレット端末でランドスケープモードで表示サイズは変わりません

clampのつかいどころ

キャッチフレーズなどのフォントサイズでつかう

    

1.75rem, (1rem + 3vw), 2.25rem

2.25rem, 4vw, 2.75rem

3.25rem, 8vw, 6.25rem

font-size: clamp(1.75rem, (1rem + 3vw), 2.25rem)(1rem + 3vw)にしているのは、3vwだけの場合は拡大縮小ができないためです

clamp()の記述を簡単に生成できるツールです

サポートされていないブラウザのフォールバック

  • CSSの比較関数の前にプロパティを追加します
    サポートしているブラウザは、後に書いた値で上書きします
  • @suppotsを使用します
    比較関数をサポートしているブラウザは@supportsをサポートしているはずです
@supports (width: clamp(20px, 10vw, 50px)) {
// 適用するスタイルを記述
}

gapは、Safariでサポートされているけど、Safari14.1未満のバージョンでは非対応です
Safari14.1未満に対応するためのハック

@media not all and (min-resolution:.001dpcm) {
  @supports (not (translate: none)) {
   /* Safari14.1未満に適用されるCSS */
  }
}