リキッドレイアウトとは？ CSSでrem・vw・clamp()を使って実装する方法

はじめに

概要

この記事では、WebCantaのstyle.cssで実際に使っているコードをもとに、リキッドレイアウトの作り方を解説します。ルートの文字サイズ、共通コンテナ、記事内の余白と見出し、本文とサイドバーの切り替えを順番に確認し、rem・vw・clamp()をどこへ使うのか具体的に整理します。

※本記事の情報は執筆時点のものです。ブラウザや制作環境によって表示が異なる場合があります。

読者

リキッドレイアウトって、レスポンシブ対応と何が違うんですか？

木村

レスポンシブ対応は「画面サイズごとにレイアウトを切り替える」考え方です。
一方、リキッドレイアウトは、画面幅に合わせて要素の幅・余白・文字サイズを“なめらかに変化”させる考え方になります。

読者

なるほど…！
じゃあ、ブレイクポイントを増やさなくても自然な見た目にしやすいんですか？

木村

文字サイズや余白はclamp()でなめらかに変えられます。ただし、WebCantaでは本文とサイドバーのように構造が変わる部分にはメディアクエリも使っています。

読者

でも、計算とか難しそうで少し不安です…。

木村

最初にhtmlの基準サイズを決め、次にコンテナ、余白、見出しの順で確認すると整理しやすくなります。この記事ではWebCantaの実際の数値を使って説明します。

リキッドレイアウトって、レスポンシブ対応と何が違うんですか？

レスポンシブ対応は「画面サイズごとにレイアウトを切り替える」考え方です。
一方、リキッドレイアウトは、画面幅に合わせて要素の幅・余白・文字サイズを“なめらかに変化”させる考え方になります。

なるほど…！
じゃあ、ブレイクポイントを増やさなくても自然な見た目にしやすいんですか？

文字サイズや余白はclamp()でなめらかに変えられます。ただし、WebCantaでは本文とサイドバーのように構造が変わる部分にはメディアクエリも使っています。

でも、計算とか難しそうで少し不安です…。

最初にhtmlの基準サイズを決め、次にコンテナ、余白、見出しの順で確認すると整理しやすくなります。この記事ではWebCantaの実際の数値を使って説明します。

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

リキッドレイアウトとは、画面幅に合わせて要素の幅、余白、文字サイズなどを柔軟に変化させるレイアウト手法です。固定幅だけで作るのではなく、%、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()で可変にする方法もよく使われます。

remとemの使い分け

WebCantaでは、サイト全体の文字サイズ、余白、角丸、コンテナ幅などに主にremを使っています。ルート要素の値を変えると、多くのパーツを同じ比率で調整できるためです。emは、特定の部品の文字サイズを基準にしたい場合へ限定して使います。

サイト全体の基準にはremを使う

• 本文や見出しの文字サイズ
• セクションやカードの余白
• コンテナの最大幅
• 角丸や要素間の余白

たとえばルートの文字サイズが10pxなら、本文の1.6remは16px、最大幅の118remは1180px相当になります。ルートが画面幅に応じて変わると、これらも連動して変化します。

部品内の相対調整にはemを使う

emは親またはその要素の文字サイズを基準にします。ボタン内のアイコン、見出しに対する装飾、文字数を基準にした横幅など、部品の文字サイズと一緒に変化してほしい箇所に向いています。サイト全体の基準はrem、部品内で完結する比率はemと分けると管理しやすくなります。

WebCantaで使っているルートサイズの設計

WebCantaではhtmlへ一律に62.5%を指定せず、画面幅に合わせた計算式を設定しています。スマートフォン、768px以上、1440px以上の3段階に分け、各範囲の中では基準サイズが連続的に変わる構成です。

330px〜767pxは375px幅を基準にする

最初に、スマートフォン向けの基準を設定します。WebCantaでは375px幅のときに1rem = 10pxとなり、330pxまで狭くなると1rem = 8.8pxで止まります。

html {
  min-width: 330px;
  font-size: clamp(
    8.8px,
    calc(10 / 375 * 100vw),
    10px
  );
  scroll-behavior: smooth;
}

calc(10 / 375 * 100vw)は「画面幅375pxのとき10px」という意味です。最小値と最大値をclamp()で決めるため、想定外に小さくなったり大きくなったりしません。

768px〜1439pxは1200px幅を基準にする

768px以上ではPC用の基準へ切り替えます。1200px幅で1rem = 10pxになり、狭いPC・タブレット幅では8pxを下限にします。

@media (min-width: 768px) {
  html {
    font-size: clamp(
      8px,
      calc(10 / 1200 * 100vw),
      10px
    );
  }
}

この式では、768px〜959pxは下限の8px、960px〜1200pxは画面幅に応じて8pxから10pxへ変化し、1200px〜1439pxは10pxになります。

1440px以上は画面幅に合わせて拡大する

大型モニターでは最大値を外し、1440pxを基準にサイト全体を拡大します。1440pxで1rem = 10px、1920pxでは約13.33pxです。

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

この基準値はサイト固有の設計です。そのまま別サイトへ貼り付けるのではなく、デザインカンプの基準幅と、本文が読みやすい最小・最大サイズを確認して数値を決めてください。

WebCantaの記事ページをリキッド化する方法

ルートサイズを決めたら、共通コンテナ、記事内の余白と文字、カラム構造の順に設定します。WebCantaのstyle.cssでは、可変値だけでなく最大幅とブレイクポイントを組み合わせ、読みやすさを保っています。

共通コンテナに最大幅と左右余白を設定する

まずサイト全体の最大幅をカスタムプロパティにまとめます。コンテンツは画面いっぱいに広げず、スマートフォンでは左右合計2.8rem、768px以上では4remの余白を確保します。

:root {
  --container: 118rem;
}

.container {
  width: min(
    calc(100% - 2.8rem),
    var(--container)
  );
  margin-inline: auto;
}

@media (min-width: 768px) {
  .container {
    width: min(
      calc(100% - 4rem),
      var(--container)
    );
  }
}

min()は、利用できる横幅と118remの小さい方を採用します。これにより狭い画面では余白を残して縮み、広い画面では本文が横へ伸びすぎません。

記事の余白と見出しへ上下限を設定する

記事カードの内側余白と見出しは、画面幅に応じて変化させつつ、clamp()で下限と上限を設けます。WebCantaでは次のように設定しています。

.article {
  padding: 2.6rem 2rem;
}

.article__header h1 {
  font-size: clamp(2.5rem, 6vw, 2.9rem);
}

.entry-content h2,
.entry-content .page-ttl_main {
  font-size: clamp(2.3rem, 3vw, 3rem);
}

@media (min-width: 768px) {
  .article {
    padding: clamp(2.6rem, 5vw, 5.4rem);
  }

  .article__header h1 {
    font-size: clamp(2.9rem, 3vw, 3.8rem);
  }
}

ルートのfont-sizeも変化するため、rem部分とvw部分の両方が画面幅へ反応します。ブラウザーで確認するときは、最小幅、375px、768px前後、1200px、1440px以上を重点的に確認します。

カラム構造はメディアクエリで切り替える

本文とサイドバーの並びは、なめらかに縮め続けるのではなく、768pxを境に切り替えます。スマートフォンでは1カラムにして本文の横幅を確保し、768px以上で本文と30remのサイドバーを横並びにします。

.content-layout {
  display: flex;
  flex-direction: column;
  gap: 4.2rem;
}

.sidebar {
  width: 100%;
}

.sidebar .article-toc {
  display: none;
}

@media (min-width: 768px) {
  .content-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .content-layout > .article {
    flex: 1;
    min-width: 0;
  }

  .sidebar {
    flex: 0 0 30rem;
    width: 30rem;
  }

  .sidebar .article-toc {
    display: block;
  }
}

ここでは、文字や余白はリキッドに変化させ、読み順やカラム数はブレイクポイントで明確に切り替えています。連続的なサイズ調整と構造変更を分担させることが、WebCantaの記事ページを安定させる考え方です。

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

WebCantaでは、ルートサイズ、コンテナ、記事余白、見出しが連動するため、個別の値を何度も上書きせずに画面全体の密度を調整できます。一方、サイドバーなど構造が変わる部分にはメディアクエリを残しています。

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

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

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

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

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

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

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

WebCantaでは375px、1200px、1440pxを計算の基準にしています。基準幅ではデザインへ合わせやすくなりますが、その間の幅では値が連続的に変わります。特定の幅だけで確認せず、768pxの切り替え前後や大型モニターも確認してください。

可変にする範囲を決める

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

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

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

よくある疑問

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

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

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

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

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