アクセシビリティの基本【emタグ】

CSSで文字サイズを指定する場合、pxとemのどちらを使うかで柔軟性が変わります。
特にブログ記事やテーマカスタマイズでは、emを使うことでユーザーに優しい設計が可能です。

1 em の基本

1em は 親要素のフォントサイズを基準 にした相対単位です。
例えば親要素が16pxなら、1em = 16px、1.5em = 24px となります。

2 px と em の違い

• px は固定サイズなので、ユーザーがブラウザの文字サイズを変更しても変わりません。
• em を使うと、ブラウザの標準文字サイズやユーザー設定に応じて柔軟に拡大・縮小されます。

3 メリット

• 本文と見出しを相対値で統一できるので、スマホやRSSリーダーでも崩れにくい。
• ユーザーの読みやすさを優先した設計が可能。特に視力の弱い方や拡大表示を使う方にも対応できます。
• アクセシビリティ（a11y）の観点で、文字サイズをブラウザやOS設定に連動させられるので、読みやすさを向上できます。
• レスポンシブ対応が容易になる（画面サイズごとに調整しやすい）。

「a11y」・・・アクセシビリティ（accessibility）」 の略語です。英語の accessibility の頭文字「a」と末尾の「y」の間の 11 文字を数字で表して「a11y」と書きます。

4 4. 例：emで指定したCSS

.entry-body,
.entry-content {
    font-size: 1em;       /* 親要素基準で16px相当 */
    line-height: 1.8em;   /* 行間も相対値 */
}

.entry-content h2 {
    font-size: 1.375em;   /* 約22px相当 */
}

.entry-content h3 {
    font-size: 1.125em;   /* 約18px相当 */
}
  

5 まとめ

em を使うことで、ユーザーの環境に柔軟に対応でき、スマホ・PC・RSSリーダーなど、どんなデバイスでも文字が崩れにくくなります。
また、視力の弱い方や拡大表示を利用する方にも優しい設計になり、アクセシビリティの向上にもつながります。
ブログやテーマカスタマイズでは、できるだけ em で統一することをおすすめします。