フォントサイズを指定する単位「px」と「rem」について
Web制作でフォントサイズを指定する際には、いくつかの単位がありますが、今回はpxとremについて初心者向けに分かりやすく説明します。
私自身、以前はすべてpxで統一してフォントサイズを指定していました。しかし、あるときremの便利さを知り、「これを使えば簡単に管理できるじゃん！」と感動した経験があります。この記事では、pxとremの特徴や使い方の違いをまとめましたので、ぜひ参考にしてください！
pxを使うメリットとデメリット
メリット
- レイアウトが崩れる心配が少ない。
- サイズが固定されるため、デザインが安定する。
デメリット
- ユーザーがブラウザ設定で文字を大きくしても変化しないため、アクセシビリティの観点で課題がある。
- PC用のフォントサイズをモバイル対応にする際、一つ一つ調整する必要があり手間がかかる。
remを使うメリットとデメリット
メリット
- 基準値を変えるだけで全体のサイズを一括調整できるため、レスポンシブ対応が簡単。
- ユーザーがブラウザで文字サイズを変更した場合にも適応できるため、アクセシビリティに優れる。
デメリット
- 基準値に依存するため、管理方法を理解する必要がある。
- 基準値が変わることでレイアウト崩れが発生する場合がある。
remの具体的な使い方
基準値の設定
何も記載がない場合、1rem = 16pxが基準になります。
例えば、以下のように指定すれば、サイズが基準に応じて変化します。
html { font-size: 16px; /* デフォルト */ }
h1 { font-size: 2rem; /* 16px * 2 = 32px */ }
p { font-size: 1rem; /* 16pxそのまま */ }
レスポンシブ対応でremを活用する
remを使うと、メディアクエリでhtmlの基準値を変更するだけで、全体のサイズを簡単に調整できます。
/* デスクトップ */
html { font-size: 16px; /* 1rem = 16px */ }
/* モバイル対応 */
@media screen and (max-width: 550px){
html {
font-size: 13px; /* 1rem = 13px */
}
}
この設定により、PCでは1rem = 16px、モバイルでは1rem = 13pxとなり、フォントサイズが全体的に小さくなります。
注意点
- アイコンやボタンの文字など、サイズが変化するとレイアウトが崩れる要素については、pxで指定する方が安定します。
- 基準値を変更する際は、デザイン全体に影響が出るため、慎重に調整しましょう。
remって実際どのくらいの大きさになるのかここで面倒くさいななんておもってpxの方が簡単じゃないかとか思ってしまったりしまわなかったりなのですが
html{
font-size: 62.5%;
}
この記述をすれば1rem=10pxになるので1.8remが18pxになるよって事でわかりやすくなります。 ですが、使っているサイトも多いとおもいますがこのやり方は非推奨のようです。
まとめ
pxとremにはそれぞれメリット・デメリットがありますが、レスポンシブデザインやアクセシビリティを意識する場合はremが便利です。一方、アイコンや固定レイアウトが重要な部分ではpxを使うなど、場面によって使い分けるのがおすすめです。
この記事がフォントサイズの指定に迷ったときの参考になれば幸いです！