フルリキッドデザイン（フルリキッドレイアウト）

このページはフルリキッド方式で実装したサンプルです。ブラウザの幅を実際に変えながら挙動を確認してください。幅1280pxではソリッド・フレキシブルと同じ見た目ですが、そこから広げると文字を含むページ全体が拡大し、狭めると全体が縮小します（他の2方式は1280px以上でコンテンツが1000pxで頭打ち）。背景は画面幅いっぱいに広がります。「コンテンツだけでなく文字サイズや余白まで一緒に変化するか」が他の2方式との見分けポイントになります。

背景：画面幅いっぱい（width 100%）

コンテンツ

画面幅に比例して拡大縮小します

背景も中のコンテンツも、画面幅に比例して拡大縮小します。止まる幅がないのが他の2方式との違いです。

この帯のように、背景を画面幅いっぱいに広げるのが一般的です。方式によって変わるのは中央の「コンテンツ幅」の挙動です。

フルリキッドデザインとは

フルリキッドデザインとは、背景・コンテンツ幅・文字サイズ・余白のすべてをvw（ビューポート幅基準）で指定し、ページ全体を画面幅に比例して拡大・縮小させるレイアウト手法です。どの画面幅でも表示領域を無駄なく使い切れるため、デザインカンプの見た目の比率を崩さずに再現できます。ビジュアル重視のLPやブランドサイトとの相性が良い一方、画面幅によって文字サイズが変わる特性上、実務ではmax-widthを併用して可読性を保つのが一般的です。

フルリキッドデザインの特徴

01 300 × 300

ページ全体が拡大・縮小

幅・余白・文字サイズをすべてvwで指定するため、ページ全体がズームのように変化します。このページのブラウザ幅を1280pxから広げたり狭めたりしてみてください。文字までが一緒に拡大縮小する様子を確認できます。
02 300 × 300

SP／PCで最適化

768pxを境にレイアウトを切り替え、SPでは1カラム、PCでは3カラムで表示します。それぞれのレイアウト内で全体がvw基準で伸縮するため、どの端末でもカンプの比率を保った表示が可能です。
03 300 × 300

可読性が弱点

画面幅に比例して文字サイズが変わるため、極端に広い画面では文字が過大に、狭い画面では過小になります。テキスト量の多いサイトには不向きで、採用する場合はmax-widthの併用など可読性への対策が必要です。