「Fluidレイアウト」は「Fluid=流体」のようにスムーズに変化することができるレイアウトです。
「PC・タブレット・スマートフォン」などさまざまな画面サイズに対応した「レスポンシブレイアウト」を実現するための仕組みですが、その前に「メディアクエリ」を利用したこれまでの「レスポンシブレイアウトの作り方」を見ていきたいと思います。
「メディアクエリ」を利用したレスポンシブデザイン
メディアクエリは「画面サイズ」ごとに「CSSの設定」を切り替える仕組みです。
例えば、
.main-content {
margin: 20px;
}
@media screen and (max-width:768px) {
.main-content {
margin: 10px;
}
}と設定すると「768px」以下の画面サイズになるとmarginが20pxから10pxに変化します。
タブレットサイズ・モバイルサイズなど「表示を切り替える画面サイズ」が増えると、「メディアクエリの記述量」もどんどん増えていくことになります。
レイアウトの中で「大きなマージン（余白）」を取ると、その調整のために「メディアクエリでの切り替え回数」も増える傾向にあります。
「calc関数」と「clamp関数」
「fluidレイアウト」の説明を始める前に「fluidレイアウト」で利用されている「２つのCSS関数」についてご説明をしていきたいと思います。
calc関数
calc関数は「プロパティの値」を計算して設定できる機能です。
「加算・減算・乗算・割り算」で計算した値や「他のCSS関数」を利用して計算した値などが設定できます。
例えば、
.main-content {
margin: calc(10px + 10px);
}のように指定することができます。
数値同士以外でも、
.main-content {
margin: calc(10vw - 10px);
}のように「デバイスの横幅」を元に一定の値を減算して「margin」の値に設定することができます。
「width」や「padding」など「数値」を指定する部分では「calc関数」を利用できるところがあるので、ぜひいろいろと試してみてください。
clamp関数
「clamp関数」は、「下限値」と「上限値」を指定して、「下限値と上限値の範囲」で値を設定できる関数です。
例えば、
width: clamp(300px, 100vw , 1200px);と設定すると要素の横幅を300px～1200pxの間で変化させることができます。
「変化する値」は「100vw」が記載されている「2つ目の引数」で指定することができます。
「CSS関数」には他にもさまざまなものがありますが、今回の「fluidレイアウト」では、この2つの関数を利用していきます。
「Fluidタイポグラフィ」について
「Fluidタイポグラフィ」は、「文字のサイズ」を「Fluid(流体)」のようにスムーズに変化させるテクニックです。
「Fluidタイポグラフィ」の設定方法
これから「Fluidタイポグラフィ」の設定方法についてご説明していきたいと思います。
例えば、
font-size: clamp(20px, calc(20px + 0.02679 * (100vw - 320px), 50px));のような形で、先ほどご説明した「calc関数」と「clamp関数」を組み合わせて設定していきます。
といっても一見すると何を設定しているのか全くわからないですね・・・
この設定は下図の設定を行っています。
| 項目 | 設定値 |
|---|---|
| 画面横幅の最小サイズ | 320px |
| フォントの最小サイズ | 20px |
| 画面横幅の最大サイズ | 1440px |
| フォントの最大サイズ | 50px |
この設定は「画面横幅サイズが320pxの時」に「フォントサイズが最小の20px」に設定されます。
もし、画面横幅サイズが320px以下になったとしても「clamp関数」によって「下限値」を「20px」に設定しているため、「フォントサイズ」は「20px」のままになります。
そして、「画面横幅サイズが1440pxの時」に「フォントサイズが最大の50px」に設定されます。
もし、画面横幅サイズが1440px以上になったとしても「clamp関数」によって「上限値」を「50px」に設定しているため、「フォントサイズ」は「50px」のままになります。
この下の文字は「Fluidタイポグラフィ」の設定を行っているため、「ブラウザの横幅」を変化させると「フォントサイズ」が変化します。
PCをご利用の方はブラウザの画面幅を変えてみると、フォントサイズが変化しているのがわかるかと思います。
これはFluid タイポグラフィです。
「CSS」の「設定値」の求め方
先ほどの設定内容を紐解いていきたいと思います。
font-size: clamp(20px, calc(20px + 0.02679 * (100vw - 320px), 50px));の設定の中で、「clamp関数の第１引数」の「20px」は「フォントの最小サイズ」です。
そして、「clamp関数の第３引数」の「50px」は「フォントの最大サイズ」です。
ここまではわかりやすですね。
「clamp関数の第２引数」の「calc関数」の設定内容は少し複雑です。
これらの設定値は「設定値を作成してくれるWEBサイト」で「必要な値」を入力すると、自動で設定値を作ってくれますので、厳密に理解しなくても大丈夫ですがご説明していきたいと思います。
「最小フォントサイズ」と「最大フォントサイズ」の「差」を求める
「最小フォントサイズ」は先ほどの表では「20px」となっていました。
そして、「最大フォントサイズ」は「50px」でした。
この２つのサイズの差は「50px – 20px」なので、「フォントサイズの差」は「30px」になります。
「最小画面横幅サイズ」と「最大画面横幅サイズ」の「差」を求める
「最小画面横幅サイズ」は先ほどの表では「320px」となっていました。
そして、「最大画面横幅サイズ」は「1440px」でした。
この２つのサイズの差は「1440px – 320px」なので、「画面横幅サイズの差」は「1120px」になります。
「フォントサイズの変化率」を求める
先ほど計算した「フォントサイズの差」と「画面サイズの差」から「フォントサイズの変化率」を求めます。
「フォントサイズの差（30px）」を「画面サイズの差（1120px）」で割ると「0.02678571428」になります。
この値は画面の横幅が「1px」変化した時にフォントサイズが「何px変化するのか？」を表しています。
この値は先ほどの「fonst-sizeの指定値」の
font-size: clamp(20px, calc(20px + 0.02679 * (100vw - 320px), 50px));の「calc関数」の「20px」と足されている値の「赤い数値」の部分です。
「フォントサイズ」の変化過程
フォントサイズの変化式を抜き出してみると
calc(20px + 0.02679 * (100vw - 320px)となっていました。
これは、
フォントの最小サイズ + フォントサイズの変化率 * ( 100vw - 画面の最小サイズ ）となっています。
デバイス幅が「320px」の場合
デバイスの画面幅「100vw」が「320px」とすると、
calc( 20px + 0.02679 * ( 320px - 320px ) )
↓
calc( 20px + 0.02679 * 0 )
↓
calc( 20px + 0 )
↓
calc( 20px )となり、フォントサイズは「20px」になります。
デバイス幅が「700px」の場合
デバイスの画面幅「100vw」が「700px」とすると、
calc( 20px + 0.02679 * ( 700px - 320px ) )
↓
calc( 20px + 0.02679 * 380px )
↓
calc( 20px + 10.1802 )
↓
calc( 30.1802px )となり、フォントサイズは「30.1802px」になります。
デバイス幅が「1200px」の場合
デバイスの画面幅「100vw」が「1200px」とすると、
calc( 20px + 0.02679 * ( 1200px - 320px ) )
↓
calc( 20px + 0.02679 * 880px )
↓
calc( 20px + 23.5752 )
↓
calc( 43.5752px )となり、フォントサイズは「43.5752px」になります。
デバイス幅が「1440px」の場合
デバイスの画面幅「100vw」が「1440px」とすると、
calc( 20px + 0.02679 * ( 1440px - 320px ) )
↓
calc( 20px + 0.02679 * 1120px )
↓
calc( 20px + 30.0048 )
↓
calc( 50.0048px )となり、フォントサイズは「50.0048px」になります。
しかし、「clamp関数」により最大値の「50px」を超えているため、「フォントサイズ」は「50px」に設定されます。
「Fluidレイアウト」の作り方
「Fluidレイアウト」はこれまでにご説明してきた「Fluidタイポグラフィ」を「margin/padding」などレイアウトに関する「CSSプロパティ」に応用して「流体的なレイアウト」を作成していくレイアウト手法です。
下のコンテンツは「Fluidレイアウト」で作成していますので、PCをご利用の方は「ゆっくり」とブラウザの画面幅を変化させてみてください。
※急激に「画面幅」を変化させると変化している部分がわかりづらいかもしれません。
「写真下部」のタイトル部分の「オーロラの輝きとその不思議な秘密」の文字の「上下のマージン」が画面幅を狭めると小さくなっていくのがわかるかと思います。
このマージンの設定値は、
margin: clamp(2rem, calc(2rem + 0.090909 * (100vw - 32rem)), 10rem) 0;のように指定しています。
他にもさまざまな「CSSプロパティ」で利用できるので、ぜひいろいろと試してみてください。
「Fluidレイアウト」の「メリット」と「デメリット」について
これまで「Fluidタイポグラフィ」や「Fluidレイアウト」についてお話してきましたが、これらの「メリット」と「デメリット」について見ていきたいと思います。
メリット
「タブレット」や「スマートフォン」に対応したレイアウトを作成するには、「メディアクエリ」が主に利用されてきました。
「表示を切り替えるポイント」が多いと「メディアクエリ」の記述量もどんどん増えていきます。
「Fluidレイアウト」の場合は、「ブラウザの画面幅」の変化に応じて自動で大きさが変化するため、設定は１つで済むケースが大半です。
デメリット
「Fluidレイアウト」のデメリットは、「設定値がわかりづらいこと」ですが、「設定内容」をコメントなどで残しておくと後で見た時に設定内容がわかりやすくなります。
「関数を利用した計算」を軸にした方法のため、「コンピュータへの計算負荷」が高くなるのも「Fluidレイアウト」のデメリットです。
しかし、近年は高性能な「PC・タブレット・スマートフォン」が普及しているため、それほど気にする必要はないかもしれません。
おわりに
「Fluidレイアウト」を採用するかは「2023年現在」ではまだ「過渡期」であると感じています。
まだまだ「メディアクエリ」を利用した「レスポンシブレイアウト」も多いため、今後の変化に対応できるようになるためにも「両方の方法」に慣れておきたいところですね。
WEBの「スキル変化」は激しいため、もしかしたら全く異なる方法が採用されていく可能性もあります。
