本文へ移動

§13-04Personalization

フォント / 文字サイズ調整

本文の文字サイズを利用者が調整できる。

視力や端末に合わせて読みやすい大きさを選べる。長文を読むサイトや高齢の利用者が多いサービスで必要になる。

実装のポイント

本文を rem で組み、ルートの font-size か CSS 変数を変えて全体を比例拡大する。px 固定の要素があると崩れるので、上限下限と既定値に戻すボタンを用意する。

同じデモを使うパターン:文字サイズ調整 (A− A+)

特徴
  • 状態管理
  • アクセシビリティ
デモで使っているもの
  • lucide-react