スケール+リキッドレイアウトを段階的に組み合わせたベースCSS

# 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）**
```scss
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（スクロールバー幅の計算）**
```js
// スクロールバーの幅を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と組み合わせることで、スクロールバーの影響を最小限に抑えた正確なスケール調整が可能になります。

---

## 🎯 使い方

### **基本ルール**
1. **フォントサイズ基準** → `rem` を使用
2. **ウィンドウサイズ基準** → `vw`, `%` を使用

### **高度な使い分け**
```scss
// フォントサイズは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](https://github.com/takutas/step-scalable-css)

## 関連記事

プロジェクト立ち上げをさらに効率化したい方へ  
➡️ [Kickoff Kit for Step-Scalable-CSS](https://qiita.com/takutas/items/53577da4a7c5880eeab6) を公開しています！

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