移行中の知識
フルードレイアウト
Fluid Layout
定義
フルードレイアウト（fluid layout）とは、layoutの寸法や配分を固定pixel幅だけで決めず、利用可能な領域に応じて連続的に伸縮させる考え方です。percentage、flexible track、relative unit、min/max constraintなどを使い、breakpointごとの段階的な切替だけに頼らず中間幅にも適応させます。すべてを無制限に広げることとは異なります。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
desktop article page
本文幅をviewportいっぱいに広げない
見るポイント
outer containerはwindow幅へ追従させつつ、本文にはmax-widthを設けてline lengthが過度に長くならないようにする。fluidと無制限拡大を分けて考える。
responsive portfolio grid
card列を利用可能幅へ追従させる
見るポイント
固定したdevice幅ごとにcard幅を手入力するのではなく、最小幅とavailable spaceを基準に列数やcard幅が自然に変化する構成を検討する。component内部の構造変更が必要ならContainer Query等の段階的条件と組み合わせる。
注意
誤解しやすい点
- fluid layoutを「すべてwidth: 100%にすること」と考える。
- wide screenでcontentを制限なく横へ伸ばし、行長や情報密度を悪化させる。
- fluidな連続変化だけで、構造を組み替えるbreakpointが一切不要だと決めつける。
関連
関連する概念
出典