【備忘録】簡単にフルリキッドレイアウトをHTMLコーディングする方法

こんにちは
MaromaroのTakaです。

今回は悩ましいフルリキッドレイアウトのHTMLコーディングについて簡単な方法を見つけたので紹介します。
フルリキッドレイアウトとは、画面のサイズに合わせてコンテンツの幅やフォントサイズが変動するデザイン手法です。

HTMLコーディングするにあたり、画面リサイズ時の内容物の挙動は何パターンかあるかと思います。
主にPCサイズ時に悩ましい部分ではあるかと思います。

・画面サイズに応じたサイズ変更は行わない。（横並びの要素などは段落ちさせる）
・特定サイズからは幅固定にする。（横スクロール）
・サイズごとにmediaクエリで細分化する。
などなど

簡単に挙げれば上記対応かとは思いますが、
一番悩まず簡単なのは特定サイズで幅固定にすることかと思います。
これが一番デザインを崩さず表現できるからです。

サイズごとにmediaクエリの細分化は書き方などにもよるかと思いますが、
Classごとに対応したり、CSSファイルを分けるなどが必要になることがあるので、おおむね管理が大変な傾向にあるかと思います。

この中で、やはり形として綺麗なのはサイズごとにmediaクエリなどで細分化するのが良いのかなとおもいます。
もちろんコーディングの全体的な方針にもよるとはおもいますが、Classの下にmediaで別のサイズを書いたり、
別ファイルにまとめて書くなどは結局のところ同じClassに対して複数のサイズを書くことになり、やや冗長的かなと思います。

私自身良い方法が見つからずサイズ指定をするときにclampなどを使用していました。
clamp関数は、最小値、推奨値、最大値を指定して、画面サイズに応じたリキッドな挙動を実現するものです。しかし、見た目には複雑に感じることがあります。例えば、以下のように複数の値を指定しますが、可読性が低いため、他の方法を使った方が管理しやすいことがあります。

padding: clamp(0.75px, 0.05vw + 0.33px, 1px) clamp(18px, 1.3vw + 7.9px, 24px) clamp(3px, 0.21vw + 1.33px, 4px) clamp(0.75px, 0.05vw + 0.33px, 1px);

前置きが長くなりましたが、個人的に実装しやすく、フルリキッドレイアウトに対応した書き方は以下になります。

html {
 
font-size: 10px;

}

@media screen and (max-width: 1000px) {
 
 html {
  
  font-size: calc((10 / 1000) * 100vw );
 
 }

}

上記はremを使用しフルリキッドレイアウトを実装する方法となります。
この方法は非常にシンプルで、管理もしやすくなります。画面サイズが小さくなると、比率を保ったままリキッドになります。

remの特性として、htmlタグに設定したfont-sizeを基準としてサイズを決定する決まりがあるので、
使いやすいように1rem=10pxと決めることで、全てのスタイルに応用が効くようになります。

そして、リキッドさせたいコンテンツ幅が決まっていたら上記の様に、
決まったデザイン幅以上はpx固定とし、それ以下はリキッドとなるようにします。
このcalc((10 / デザイン幅) * 100vw )の計算式を適用し、mediaクエリのサイズも合わせることでデザイン幅以下になったときに比率を維持したまま拡縮することが出来ます。
これで、指定したデザイン幅を下回ったときに表面上の形を維持したままリキッドすることが可能となります。
※1000となっている部分を適宜任意のサイズに変更してください。

スマホサイズを考慮した場合は375pxがデザインの基準とし、レスポンシブの切り替えポイントを768pxとした場合は、
以下を追加するとスマホ時もremでフルリキッドレイアウトの対応が可能となります。

@media(max-width:768px){
 
 html{
  
  font-size: calc((10 / 375) * 100vw );
 
 }

}

これにより、全ての要素をremで記載することが出来るようになりますので、管理が楽になります。
また、全体のサイズ感を引き上げたいときはhtmlタグのfont-sizeを上げることで、一律変更することも可能となります。（その逆もしかり）

フルリキッドレイアウトの実装方法には、いくつかの方法があります。どの方法を選ぶかは、プロジェクトの規模や、メンテナンス性を重視するかによります。個人的には、remとcalc()とmediaクエリを組み合わせる方法が簡単で、柔軟性もありおすすめです。

以上、Takaでした。