フレキシブルデザイン（フレキシブルレイアウト）

このページはフレキシブル方式で実装したサンプルです。ブラウザの幅を実際に変えながら挙動を確認してください。画面を広げるとコンテンツは1000pxで頭打ちになり（この数値は任意で指定できます）、左右に余白が生まれますが、狭めるとコンテンツ自体が縮むため横スクロールは発生しません。背景は画面幅いっぱいに広がります。ソリッドとの違いは、狭めたときに「縮む（可変）」か「横スクロール」になるかです。

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

コンテンツ

最大1000pxまで伸縮します

背景は画面幅に合わせて伸びますが、中のコンテンツは最大1000pxで止まります。狭めるとコンテンツも一緒に縮みます。

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

フレキシブルデザインとは

フレキシブルデザインとは、コンテンツ領域に最大幅を設定し、その範囲内で画面幅に合わせて流動的に伸縮させるレイアウト手法です。大画面では最大幅で止まるため間延びせず、狭い画面では縮んで収まるため横スクロールも発生しません。ソリッドの安定感とリキッドの柔軟性を両立できるのが強みで、PCからタブレットまで幅広い環境に対応しやすくなります。現在のWeb制作で最も採用例の多い、標準的な方式といえます。

フレキシブルデザインの特徴

01 300 × 300

最大幅まで流動的

width:100%とmax-widthの組み合わせで実装します。このページのブラウザ幅を広げたり狭めたりしてみてください。1000pxを境に挙動が切り替わる様子を確認できます。
02 300 × 300

背景はフル幅のためデザイン性が高い

セクション背景だけを画面幅いっぱいに広げるため、大型モニターでも左右が寂しくなりません。この帯状の背景セクションのように、色面で区切るデザインをそのまま活かせます。
03 300 × 300

画面幅を縮めても可変

ソリッドではコンテンツ幅が固定のため横スクロールになりますが、フレキシブルでは縮んで収まります。ソリッドのサンプルと同じ幅で並べて比較すると、挙動の違いが一目で分かります。
DEMERIT

中間幅では調整が必要

画面幅に応じて伸縮するぶん、特定幅でのピクセルパーフェクトな再現はソリッドに劣ります。タブレットなどの中間の画面幅で余白や改行のバランスが崩れやすく、確認・微調整に手間がかかる場合があります。