Stepped Scaling CSS - 効率的なレスポンシブデザインを実現するベースCSS

🎯 このフレームワークの目的

Web制作の現場では、デザインカンプを元にコーディングを行うフローが一般的です。しかし、リキッドレイアウトを実装する際には、以下のような課題が生じます。

ブレイクポイント調整が煩雑
- 画面サイズによって情報が伸縮しすぎたり、狭くなりすぎる問題。
- 適切なブレイクポイントの設定には時間と経験が必要。
デザインカンプにないサイズのレイアウト調整
- 実装者のスキルに依存しがち。
工数削減と一貫性の確保
- よりスムーズなレスポンシブ対応を実現したい。

そこで、この"Stepped Scaling CSS"を設計しました。可変時の画面サイズに応じた適切なスケール調整を簡単に実装できるベースCSS です。

📌 このフレームワークが提供するもの

独自スタイル設計を前提としたベースCSSの提供
Sass, CSS 両方での提供（デザイナーの使用も想定）
画面サイズごとの最適なサイズ調整
メディアクエリの最小化とスムーズなレスポンシブ対応
デザインデータのサイズをremで記述するだけで最適なスケールを適用

🏗 設計の概要

基準となるブレイクポイント設計

Stepped Scaling CSS では、以下のブレイクポイントを設定し、サイズごとに適切なスケールまたはリキッドレイアウトを適用します。

1920px 以上 → 固定スケール
1620px - 1920px → 流動的にスケール（リキッドレイアウト）
1440px - 1620px → 固定スケール
1200px - 1440px → 流動的にスケール（リキッドレイアウト）
767px 以下 → モバイル最適化スケール

主要なCSSコード（Sass）

html {
  /*--基準--1対1でスケール*/
  font-size: calc((100vw - var(--scrollbar))/1440*10/1920*1620);

  @include print {
    font-size: calc((100vw - var(--scrollbar))/1440*10);
  }

  @include mq1920 {
    /*--ブレイクポイント1920px--固定*/
    font-size: calc(62.5%*1.125); //1.125=1620/1440
  }

  @include mq1620 {
    /*--ブレイクポイント1620px--1対1でスケール*/
    font-size: calc((100vw - var(--scrollbar))/1440*10);
  }

  @include mq1440 {
    /*--ブレイクポイント1440px--固定*/
    font-size: 62.5%;
  }

  @include mq1200 {
    /*--ブレイクポイント1200px--1対1でスケール*/
    font-size: calc(100vw/1200*10);
  }

  @include mq767 {
    /*--ブレイクポイント767px--1対1でスケール*/
    font-size: calc(100vw/375*10);
  }
}

このコードでは、ブレイクポイントごとに異なるスケールの適用 を行い、適切なレスポンシブ対応 を実現しています。

🛠 スクロールバーの影響を考慮した調整

スクロールバーの幅を考慮することで、より正確なスケール調整が可能になります。

JavaScript（スクロールバー幅の計算）

// スクロールバーの幅をCSSカスタムプロパティ（--scrollbar）にセット
const setScrollbarWidth = () => {
  let scrollbarWidth = window.innerWidth - document.body.clientWidth;
  document.documentElement.style.setProperty('--scrollbar', `${scrollbarWidth}px`);
};
window.addEventListener('load', setScrollbarWidth);
window.addEventListener('resize', setScrollbarWidth);

これをCSSと組み合わせることで、スクロールバーの影響を最小限に抑えた正確なスケール調整が可能になります。

🎯 使い方

基本ルール

フォントサイズ基準 → rem を使用
ウィンドウサイズ基準 → vw, % を使用

高度な使い分け

// フォントサイズはrem指定
body {
  font-size: 1.6rem;
}

// セクション幅はウィンドウサイズ基準
.section {
  width: 80vw;
}

このように使い分けることで、より柔軟なレスポンシブデザインを実現できます。

⚠️ Stepped Scaling CSS 利用時の注意事項

このCSSフレームワークでは、html 要素の font-size をウィンドウ幅に応じて段階的にスケーリングする「Stepped Scaling」方式を採用しています。
これにより、一貫性のある相対レイアウトが実現できますが、以下の点にご注意ください。

❗ ブラウザのズーム機能（拡大縮小）には非対応です

html { font-size: ... } に vw を利用しているため、ユーザーがブラウザのズーム機能（Ctrl + / -）を使っても、表示が拡大・縮小されません。
これは vw 単位がビューポート幅に依存するためで、ブラウザのズーム設定を無視する仕様となっています。

✅ 推奨される使用方法

標準解像度での閲覧を前提とした、デザイナー・開発者向けの制御重視の設計に最適です。
アクセシビリティやユーザー設定による拡大対応が求められるプロダクトでは、rem によるフォントサイズ指定と media query ベースのスケーリングを併用してください。

💡 補足：この手法が有効な場面

デザインデータと寸分違わぬ再現が求められる案件
コンポーネント単位で rem ベースに設計されているUIフレームワーク
リキッドレイアウトにおけるレスポンシブ設計の補助

🚀 まとめ

✅ Stepped Scaling CSS を使うことで、

ブレイクポイントの調整を最小限にできる
デザインデータとの差異を減らせる
一貫性のあるレスポンシブデザインが可能になる

リキッドレイアウトの煩わしさを軽減し、「ちょうどいいスケール調整」 を自動化するこのフレームワークをぜひ試してみてください！

👉 GitHub: Stepped Scaling CSS

関連記事

プロジェクト立ち上げをさらに効率化したい方へ
➡️ Kickoff Kit for Step-Scalable-CSS を公開しています！

Step-Scalable CSSの基本設計に加えて、すぐに開発に取りかかれるセットアップが整っています。ぜひあわせてご覧ください。