このページの中身

見やすさ

文字を2倍にしても、画面を4倍にしても、壊れない。高さを固定せず、幅を rem で書けば、ほとんどはそれで通ります。

文字を拡大したときに要素が壊れる例と壊れない例、およびターゲットサイズの比較図
図を大きく見る
図の中身を文字で読む
  • 文字を200%にしても壊れないか
  • 100%　お問い合わせ
  • 200%（高さ固定）
  • お問い合わせ　切れる
  • 200%（min-height と padding）
  • お問い合わせ　内容に応じて広がる
  • 押せる大きさ　20px　基準以下　24px　WCAG 2.2 の最小　44px　実務の目安
  • 拡大400%（幅320px相当）でも横スクロールなしに読めること。固定幅の要素と 100vw が主な原因。

ひと目で#

文字サイズ変更
200%まで大きくしても、内容と機能が失われないこと
リフロー
幅320px相当（1280pxで400%拡大）で、横スクロールなしに読めること
ターゲットサイズ
押せる範囲。WCAG 2.2 で最小 24×24、実務では44px前後
モーション低減
動きを減らす設定を読み取り、それに従うこと

使い分け#

こういうときやること
文字サイズを可変にしたいrem で指定する。px は追従しない
見出しを画面幅で変えたいclamp() の中に rem を含める
ボタンの高さを決めたいheight ではなく min-height と padding
表が幅に収まらない表だけ横に送る。例外として扱う
動きを使いたいprefers-reduced-motion で減らす分岐を書く

間違えやすいところ#

押せる大きさは、絵の大きさではない#

16px のアイコンを 24px に描き直す必要はありません。基準が見ているのは、押したときに反応する範囲です。

小さいアイコンボタンを、押せる範囲を広げる方法と間隔で逃がす方法で基準に届かせる比較、および高さを固定した要素が拡大で切れる例
図を大きく見る
図の中身を文字で読む
  • 押せる範囲 24×24 に届かせる、2つの道
  • 見えている絵を大きくしなくても、基準は満たせる
  • ✕ 16px の絵のまま
  • 隣とも近く、狙いが外れると別の操作が起きる
  • ○ 当たり判定を広げる
  • 絵は 16px のまま、padding を足す
  • 見た目を変えずに 24×24 にできる
  • ○ 間隔で逃がす
  • 24×24 の円が重ならない距離を空ける
  • 表の行内など、詰めたい場所の逃げ道
  • 高さを固定すると、文字を大きくしたときに切れる
  • 送信する　height: 44px ／ 等倍では収まっている　送信す　200% にすると下と右が切れる
  • min-block-size と padding で組めば、文字が増えたぶんだけ伸びて収まる。
  • 確かめ方は、ブラウザの文字サイズを 200% にして、切れる箇所と重なる箇所を目で追う。

padding で当たり判定を広げるか、隣との間隔を空けるか。表の行の中のように詰めたい場所では、後者が逃げ道になります。

二重リングを作る#

単色のリングは、暗い地や写真の上で消えます。内側と外側の2色を決めて、3種類の地に置いた実物のボタンで確かめてください。Tab を押しても試せます。

白い地

濃い地

写真の上

    写真の上は地の色が一定ではないため、数値では判定できません。2色のどちらかが浮いて見えるかを目で確かめます。

    :focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #000000;  /* 4px = 内側2px + 外側2px */
}

    この道具は JavaScript で動きます。迷ったら、内側 #ffffff 2px、外側 #000000 2px の二重リングを使ってください。

    実装#

    このコードで動いている見本です

    文字を200%、画面を400%にしたときの実画面
    図を大きく見る

    壊れる実装と壊れない実装は、等倍では見分けがつきません。差が出るのは拡大したあとです。

    確かめ方#

    ブラウザの幅を1280pxにして400%に拡大するか、幅320pxで表示します。ブラウザの既定の文字サイズを大きくして、要素が切れないかを見ます。

    直す例#

    架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

    料金表のページを幅320px相当で開くと、横スクロールバーが出ます。原因は3つありました。ヒーローに残っていた width: 1140px、ボタンの height: 44px、そして料金表そのものです。

    固定幅は外して max-inline-size: 100% に替えます。ボタンは高さの指定をやめ、min-block-size と padding で組み直します。文字が大きくなったぶんだけ、ボタンが下へ伸びる形にします。

    表は事情が違います。5列の料金表を1列幅に畳むと、比較という目的が消えます。表は例外として、その要素だけ横に送ります。 ページ全体が横に動くのと、表の中だけが動くのは別ものです。

    拡大の確認は2つに分けます。ブラウザの文字サイズを200%にして、切れる箇所と重なる箇所を探します。それとは別に、幅1280pxで400%に拡大するか、幅320pxで開いて、横スクロールが出ないかを見ます。前者は文字の設定、後者は画面の幅で、壊れ方も直し方も違います。

    確認する#

    使えるパターン#

    この話が要る場面#

    このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

    文字を大きくすると要素が壊れる

    高さを固定している。height をやめて min-height と padding にする。

    このコードで動いている見本です

    400%拡大の確認はどうやるか

    幅1280pxで400%にするか、幅320pxで開く。横スクロールが出なければよい。

    /* 幅1280pxで400%拡大、または幅320pxで開く */
document.documentElement.scrollWidth <= window.innerWidth

    動きを減らす設定にどう対応するか

    prefers-reduced-motion で大きな移動と視差を止める。色と不透明度の変化は残す。全部止めない。

    このコードで動いている見本です

    この場面のほかの困り事と、そのまま貼れる部品は誰でも使えるようにするにまとめてある。逆引きには全188件。

    出典#

    関連#

    この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。