em を使った文字サイズ指定のメリット
CSSで文字サイズを指定する場合、px
とem
のどちらを使うかで柔軟性が変わります。
特にブログ記事やテーマカスタマイズでは、em
を使うことでユーザーに優しい設計が可能です。
1. em の基本
1em
は 親要素のフォントサイズを基準 にした相対単位です。
例えば親要素が16pxなら、1em = 16px
、1.5em = 24px
となります。
2. px と em の違い
px
は固定サイズなので、ユーザーがブラウザの文字サイズを変更しても変わりません。em
を使うと、ブラウザの標準文字サイズやユーザー設定に応じて柔軟に拡大・縮小されます。
3. メリット
- 本文と見出しを相対値で統一できるので、スマホやRSSリーダーでも崩れにくい。
- ユーザーの読みやすさを優先した設計が可能。
- レスポンシブ対応が容易になる(画面サイズごとに調整しやすい)。
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相当 */
}
まとめ
em
を使うことで、ユーザーの環境に柔軟に対応でき、スマホ・PC・RSSリーダーなど、どんなデバイスでも文字が崩れにくくなります。
ブログやテーマカスタマイズでは、できるだけ em
で統一することをおすすめします。