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