文字サイズ切替
小／標準／大で html の font-size を変える。rem で組んだカードは余白・幅・ボタンごと追従し、px で書いた注記だけ取り残されるのが見える。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- サイト内で文字サイズを 3 段階に変える設定
- rem で組んだ部品が追従するかの確認
- px 固定の取り残しを可視化したい場面
- 避ける場面
- 要素ごとに JS で拡大する
- 余白や幅を px 固定のままにする
- html 以外に font-size を当てる
- 構成要素
- 小／標準／大ボタン
- rem 設計のカード
- px 固定の注記
- html の値の帯
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で小／標準／大へ、Enter／Space で適用。押した段が aria-pressed=true になる
- 支援技術
role=group＋aria-label「文字サイズ」、選択は aria-pressed。html の font-size を変え、rem の部品が余白・幅ごと追従する（WCAG 1.4.4）
- 動き
なし
デザインの要点
- 文字サイズは html の font-size を変えるだけにし、部品は rem で書く。要素ごとに JS で拡大すると必ず漏れる
- 余白・角丸・ボタンの高さも rem にする。文字だけ大きくなって箱が固定だと、行が詰まって読みにくくなる
- 幅は max-width を rem で持ち、width:100% で画面に収める。大にしたとき横あふれしないかを 320px で確かめる
- px で書いてよいのは罫線の太さくらい。小さな注記ほど px で固定されがちで、拡大したい人が一番読めない
コード（コピーして使えます）
<div class="ts-wrap">
<div class="ts-ctl" role="group" aria-label="文字サイズ">
<span class="ts-lbl">文字サイズ</span>
<button type="button" class="ts-btn" data-size="87.5" aria-pressed="false">小</button>
<button type="button" class="ts-btn" data-size="100" aria-pressed="true">標準</button>
<button type="button" class="ts-btn" data-size="118.75" aria-pressed="false">大</button>
</div>
<article class="ts-card">
<h2>配送について</h2>
<p>ご注文から 2 営業日以内に発送します。北海道・沖縄は追加で 1〜2 日かかります。</p>
<a href="#ts-address" class="ts-link">配送先を変更</a>
<p class="ts-px">※ px で書いた注記は追従しません（12px 固定）</p>
</article>
<div class="ts-band"><span class="ts-tag">html</span><span id="ts-msg">font-size: 100% → 1rem = 16px</span></div>
</div>