リキッドレイアウトとは？

リキッドレイアウトとは、画面幅に合わせて要素の幅、余白、文字サイズなどを柔軟に変化させるレイアウト手法です。固定幅だけで作るのではなく、%、vw、rem、clamp()などを組み合わせて、スマホからPCまで自然に見えるように調整します。

固定幅レイアウトとの違い

固定幅レイアウトは、要素の幅を960pxや1200pxのように決めて作る方法です。幅が固定されるため管理しやすい一方で、画面幅が変わると余白が極端に広くなったり、狭い画面で横にはみ出したりすることがあります。

リキッドレイアウトでは、たとえばwidth: 80%;のように親要素や画面幅に対して相対的にサイズを決めます。そのため、画面幅が変わっても要素が自然に伸び縮みします。

リキッドレイアウトで重要になるCSS単位

リキッドレイアウトでは、すべてをpxで固定するのではなく、基準に応じて変化する単位を使います。ここでは、特に使用頻度の高い%、vw、remの考え方を整理します。

%は親要素を基準にする

%は、基本的に親要素のサイズを基準にします。たとえば親要素が1000pxで、子要素にwidth: 80%;を指定すると、子要素の幅は800pxになります。

.container {
  width: min(100%, 1080px);
  margin-inline: auto;
}

.card {
  width: 80%;
}

%は横幅の調整に向いています。ただし、親要素の幅が変わると子要素も変わるため、どの要素を基準にしているかを意識することが大切です。

vwは画面幅を基準にする

vwはviewport widthの略で、画面幅を基準にした単位です。1vwは画面幅の1%を表します。画面幅が1000pxなら1vwは10pxです。

.hero-title {
  font-size: 5vw;
}

vwは画面幅に応じてなめらかに変化しますが、画面が小さいと文字が小さくなりすぎたり、画面が大きいと文字が大きくなりすぎたりします。そのため、実務ではclamp()と組み合わせることが多いです。

remはhtmlのfont-sizeを基準にする

remは、ルート要素であるhtmlのfont-sizeを基準にする単位です。ブラウザの標準設定では多くの場合htmlの文字サイズが16pxなので、1remは16pxになります。

remを使うと、文字サイズや余白を同じ基準で管理しやすくなります。リキッドレイアウトでは、この基準自体をclamp()で可変にする方法もよく使われます。

clamp()とremで基準サイズを作る

リキッドレイアウトで特に重要なのが、clamp()を使って最小値・可変値・最大値を決める考え方です。画面幅に応じて変化させながら、極端なサイズにならないように制御できます。

1remの考え方

通常ブラウザの標準フォントサイズは16pxです。この状態でhtml { font-size: 16px; }と考えると、1remは16pxになります。

html {
  font-size: 16px;
}

.text {
  font-size: 1rem; /* 16px */
}

.title {
  font-size: 1.5rem; /* 24px */
}

ここで大切なのは、remは指定した要素自身ではなく、htmlのfont-sizeを基準にするという点です。基準が変われば、remで指定したサイズもまとめて変化します。

現在のWeb制作では、基本的に rem が主流です。

htmlに62.5%を指定する方法

制作現場では、計算しやすくするためにhtmlへfont-size: 62.5%;を指定することがあります。ブラウザ標準が16pxの場合、16px × 62.5%で10pxになり、1rem = 10pxとして扱いやすくなります。

html {
  font-size: 62.5%;
}

.text {
  font-size: 1.6rem; /* 16px */
}

.title {
  font-size: 2.4rem; /* 24px */
}

ただし、すべての案件で必須ではありません。チームのルールや既存CSSに合わせて採用するか決めるのが安全です。

clamp()で最小値と最大値を決める

clamp()は、clamp(最小値, 可変値, 最大値)の順で指定します。リキッドレイアウトでは、htmlの基準フォントサイズに使うことで、ページ全体のサイズ感を画面幅に合わせて調整できます。

html {
  font-size: clamp(10px, 0.625vw, 16px);
}

.text {
  font-size: 1.6rem; /* 16px相当を基準に可変 */
}

.title {
  font-size: 2.4rem; /* 24px相当を基準に可変 */
}

リキッドレイアウトの実装例

ここでは、リキッドレイアウトの考え方を使った簡単な実装例を見ていきます。文字サイズだけでなく、コンテナ幅や余白も画面幅に応じて変化するように指定します。

基本のCSS例

次のCSSでは、全体の基準フォントサイズ、コンテンツ幅、見出し、カード余白を可変にしています。コードを読むときは、どの値に最小値・最大値があるかを見ると理解しやすいです。

html {
  font-size: clamp(10px, 0.625vw, 16px);
}

.liquid-container {
  width: min(92%, 1080px);
  margin-inline: auto;
}

.liquid-title {
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  line-height: 1.4;
}

.liquid-card {
  padding: clamp(2rem, 4vw, 5rem);
  border-radius: 1.2rem;
}

width: min(92%, 1080px);は、基本は親幅の92%で表示しながら、最大幅を1080pxに抑える指定です。大きなモニターでもコンテンツが横に広がりすぎないようにできます。

ブラウザで表示を確認する

次のHTMLは、WordPressのブロックエディター上でそのまま貼り付けて、画面幅による変化を確認できる最小構成です。ブラウザ幅を変えると、見出しサイズ、余白、カード幅が自然に変わります。

<div class="liquid-demo">
  <div class="liquid-demo__inner">
    <h3 class="liquid-demo__title">Liquid Layout</h3>
    <p class="liquid-demo__text">
      画面幅に合わせて、文字サイズ・余白・横幅が自然に変化します。
    </p>
  </div>
</div>

<style>
.liquid-demo {
  font-size: clamp(10px, 0.625vw, 16px);
  width: min(92%, 960px);
  margin: 32px auto;
}

.liquid-demo__inner {
  padding: clamp(24px, 6vw, 72px);
  background: linear-gradient(135deg, #eef3ff, #ffffff);
  border: 2px solid #496CFF;
  border-radius: 16px;
}

.liquid-demo__title {
  margin: 0 0 16px;
  color: #192653;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1.2;
}

.liquid-demo__text {
  margin: 0;
  color: #333;
  font-size: 1.6rem;
  line-height: 1.8;
}
</style>

見るべきポイントは、親の.liquid-demoで基準フォントサイズを作り、内側の余白や見出しサイズをclamp()で調整している点です。これにより、単に横幅だけが変わるのではなく、全体の密度も画面幅に合わせて変化します。

余白や幅も可変にする

リキッドレイアウトでは、文字サイズだけでなく余白も可変にすると自然な見た目になります。スマホでは余白を控えめにし、PCではゆとりを持たせることで、画面サイズごとの窮屈さや間延びを抑えられます。

.section {
  padding-block: clamp(48px, 8vw, 120px);
}

.section__inner {
  width: min(90%, 1120px);
  margin-inline: auto;
}

padding-blockは上下方向の余白をまとめて指定するプロパティです。clamp()を使うことで、スマホでは48px、PCでは最大120pxまで自然に変化します。

リキッドレイアウトのメリット

リキッドレイアウトの大きなメリットは、画面幅に合わせてデザインを自然に調整できることです。固定値だけで作るよりも、さまざまな端末で見た目を整えやすくなります。

画面幅に合わせて自然に調整できる

• スマホ、タブレット、PCに柔軟に対応しやすい
• 大型モニターでもデザインが極端に間延びしにくい
• 文字サイズや余白が画面幅に応じてなめらかに変化する
• パーツごとの最大幅を決めれば、読みやすさを保ちやすい

メディアクエリを減らせる場合がある

clamp()やmin()、max()を使うと、細かいブレイクポイントを増やさなくても自然に調整できる場合があります。もちろんメディアクエリが不要になるわけではありませんが、文字サイズや余白の細かい調整はCSS関数で整理しやすくなります。

リキッドレイアウトのデメリットと注意点

リキッドレイアウトは便利ですが、すべてを可変にすればよいわけではありません。サイズが変化するからこそ、最小値、最大値、固定したい部分を決めておくことが重要です。

デザインカンプと完全一致しにくい

画面幅に応じてサイズが変わるため、特定の画面幅以外ではデザインカンプと完全に一致しないことがあります。実案件では、基準幅ではデザインに合わせつつ、前後の画面幅では自然に見えるように調整する考え方が必要です。

可変にする範囲を決める

見出し、本文、余白、画像、カード幅など、すべてを同じように可変にすると管理しづらくなります。どこを画面幅に合わせて変化させるのか、どこは固定または最大幅で止めるのかを決めておきましょう。

小さくなりすぎない下限を持たせる

vwだけで文字サイズを指定すると、スマホで小さくなりすぎることがあります。反対に、大きな画面では文字が巨大になりすぎることもあります。そのため、最小値と最大値を持たせられるclamp()を使うと安全です。

よくある疑問

最後に、リキッドレイアウトを学ぶときにつまずきやすい疑問を整理します。アコーディオン形式で要点を確認できるようにしています。

リキッドレイアウトとレスポンシブの違い

レスポンシブWebデザインは、画面幅や端末に応じて見た目を調整する考え方全体を指します。リキッドレイアウトは、その中で要素の幅や余白、文字サイズを可変にする実装方法のひとつです。

いつリキッド対応を使うべきか

スマホからPCまで自然な見た目にしたい場合、画面幅の中間サイズでも崩れにくくしたい場合、メディアクエリを細かく増やしすぎたくない場合に向いています。