文字サイズ切替
小／標準／大で html の font-size を変える。rem で組んだカードは余白・幅・ボタンごと追従し、px で書いた注記だけ取り残されるのが見える。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 文字サイズは 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>