フォントサイズを*「14px」*のようにピクセル指定するのは、ホームページの文化が広まっていった1997年頃からずっと続いてきた伝統のようなものです。しかし、20年前とは違って、Webデザインを行う環境も変わってきたので、HTMLやCSSの中でやみくもに「px」を指定するのは考え直したほうがいいのかもしれません。

実際のところ、フォントサイズやボックスサイズを指定するときに、ピクセル以外の単位で指定することのほうが多くなってきました。それではなぜ、「px」でフォントサイズを指定するのに問題が発生してしまうのでしょうか。

今回は、CSSで知っておきたいフォントサイズ指定の単位について、「px」を使うことで生じる問題についても触れながら解説します。20年前のWebスタンダードを脱し、今日のWebの基準に合わせていくために、正しい知識を確認していきましょう。

CSSでフォントサイズ（font-size）を指定する方法

フォントサイズを指定する方法はいくつかありますが、CSSで以下の記載する方法が一般的です。

font-size:数値＋単位;

同じ数値で指定しても、使われている単位が違えば文字の大きさは変わります。よく使われる代表的な単位としては以下が挙げられます。

  • px
  • em
  • rem
  • %
  • vw
  • vh

フォントサイズ（font-size）の単位はどれにすべきか

上記で紹介した通り、指定できるフォントの単位はたくさんあります。それでは、どの単位で指定するのがベストなのでしょうか？

20年前のフォントサイズの指定方法

screen.png

HTMLが登場した当初のフォントサイズ指定を思い出して見ましょう。
CSSが登場する前、まだHTMLタグを大文字で書くのが一般的だったころには、フォントサイズの大きさや色は*>FONT<タグ*で指定するのが一般的でした。

<FONT SIZE=“3”>フォントサイズ3がデフォルトサイズ</FONT>

このSIZEというプロパティは、1〜7までの整数、または現在のフォントサイズに対して「+」「-」で指定しました。しかし、1996年以降のCSSの登場によって、*>FONT<タグは「非推奨要素」*となってしまいました。

実際、>FONT<タグによる指定と、スタイルシートによる指定を使い比べてみると、スタイルシートによる指定のほうがはるかに自由度が高く、変更も用意なので、スタイルシートは瞬く間に広がっていきました。

1996年といえばWindows95が発売されてまだそれほど月日が経っていない時代ですが、その頃からすでにHTMLではWebページの構造を、CSSではページレイアウトを記述するというHTMLから見た目の要素を分離した方法が定義されていたのです。

1996年に初めに登場した「CSS1」では、フォントサイズについて次のように言及されています。

ディスプレイはほとんど同じサイズなのでフォントは特定のものを使いましょう
(Displays are roughly all the same size so use static fonts.)

しかし、「12:8」の比率のスクリーンばかりでインターネットを閲覧していた20年前とは異なり、現在ではさまざまな大きさのデバイスで、解像度もディスプレイの縦横比も違うために、単純にフォントサイズを1つだけに指定するのには限界があります。

もちろん、CSSは上位互換性(Backwards Compatibility)を備えているので、新しい機能が追加されても、従来のものはこれまで通り使うことができます。しかしながら、デバイスのサイズや解像度にも考慮してホームページをデザインしていくのが、これからのWebデザインのあるべき姿です。

とりあえず「px」は間違い。フォントサイズに関する誤った認識

tablet.jpeg

もしかしたら、Webデザインを学んでいる人々のなかには、フォントサイズに関して誤った認識をしている方がいるかもしれません。というのも、ひとまず「px」という単位で指定しておけば、数値の大小によって見たい大きさのフォントサイズがなんとなく表現できてしまうからです。

しかし、フォントサイズは必ずしもスクリーンのピクセル数と一致しているとは限りません。

例えば、16pxでフォントサイズを指定したときに、あるフォントファミリーでは「A」の文字が24pxの高さである一方で、別のフォントファミリーでは「A」の文字が26pxの高さになることが起こります。また、カーニングやアンチエイリアスの処理はブラウザやOSごとに異なり、さらにはデバイスごとにピクセル比は異なるので、同じフォントサイズを指定しても異なって見えてしまいます。

これをカバーするためにUser Agentを指定しようとしても、結局はデバイスごとに見え方が変わってきてしまうのです。

CSSでのフォント指定でpxを指定するときに発生するさまざまな問題点

notebook.jpeg

CSSで「px」を指定することで発生する問題点には、どんなことがあるのでしょうか。

1. 小数点の問題

「px」も含めて、フォントサイズを指定する時に利用するすべての単位は、モダンブラウザでは小数点を使うことができるようになっています。
(実際には違うのですが)一般的には「1px」はスクリーン上の小さな点であるピクセルと同じ大きさだと想定されているので、ピクセル比が1の場合に小数点を使うのは意味をなしません。
小数点を使う場合、「em」や「rem」といった単位で使って初めて意味をなすと言えます。

2. 1ピクセルの実際の大きさ

CSSにおけるピクセルは、スクリーンサイズのピクセルとは実際には異なっています。
W3Cによるドキュメントによれば、「px」に関して次のような定義がなされています。

px：ピクセルユニット ── 1pxは0.75ptと同値

これによれば*「1px＝0.75pt」*となっており、「px」はピクセルの大きさからくる絶対値ではなく、「pt」の大きさを元に測った相対指定の値であることがわかります。

デバイスのピクセル比もデバイスによって変わるので、iPadで見る時とKindleで見る時とGalaxy Tabで見る時で、文字の大きさも違って見えるのです。

単位はemやremがおすすめ

何かwidthやheightを指定して見せ方を統一したい場合は、*「em」や「rem」*を使うようにしましょう。

「em」という単位を使うと、コンテナは常にフォントサイズに応じて可変になります。
もしテキストコンテナ内のフォントサイズを「em」の単位を使って更新をした場合には、「em」で指定したwidthやheightも同様の比率で変化するので、「px」指定したときに3つの値を修正していたのが、1回の修正で事足りることになります。

「rem」を使う場合は、root要素(html)のフォントサイズを変化すればいいだけのことです。

emとrem、どっちがいい？

font.jpg

昨今のWebデザインを取り巻く環境の中では、*「em」よりも「rem」*の方が好ましいと言われています。

しかし、「em」もMedia Queriesのブレイクポイントとして指定するときには未だによく使うので、適材適所で使い分けるのがよいでしょう。その際、「em」と「rem」の違いをしっかりと理解しておくことが重要です。

em

「em」は、親要素に対しての相対的なサイズのことです。
例えば、bodyのfont-sizeを「100%」とした場合は、ブラウザのデフォルトのフォントサイズ「16px」が基準となり計算されます。

ただし、相対指定は親要素の影響を受けてしまう、いわゆる「複利」の計算になってしまうので、入れ子された要素のときには注意が必要です。

rem

「em」は親要素に対しての相対計算を行いますが、「rem」はroot(html)のフォントサイズを元に計算します。
常にrootが基準となるので、非常にわかりやすくスッキリとデザインを行うことができます。

もちろん、何もrootのフォントサイズを指定していない場合は*「1rem＝16px」*という計算方法になるので、初めのうちはpxを扱っているときのように試行錯誤しながら適切なフォントサイズを探すことになりますしかし、フォントサイズを調整する際にはrootのフォントサイズを変えるだけでいいので、メンテナンスを行いやすいというメリットがあります。

適切なフォントサイズの単位を選ぼう

CSSで最もよく使われているフレームワークであるBootstrapもバージョン4から「px」ではなく「rem」を採用するなど、Web制作の現場では「px」を使うことがだんだん少なくなってきました。

しかし、Media Queriesでは「rem」よりも「em」が推奨されるなど、単位ごとに特性を押さえて使用することが大切です。

参考：
CSSMedia Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要 | コリス

CSSについてもっと学ぶ

非エンジニアも知っておきたい！HTMLとCSSの基礎知識

非エンジニアも知っておきたい！HTMLとCSSの基礎知識

WebやITを取り扱う仕事の中でたびたび耳にする「HTML」と「CSS」という言葉。聞いたことはあるけど、いまいちよくわからない人も多いでしょう。 エンジニアでなけれWebサイトの制作や運営はCMS（コンテンツ管理システム）に任せることができますが、それでもHTMLとCSSの仕組みを知っているといろいろな面で便利ですし、Webサイト運用にも自信を持てるようになります。 今回は非エンジニアでも覚えておきたい、HTMLとCSSの基礎について解説します。
scss・sass徹底入門。使い方や導入方法を説明【CSS】

scss・sass徹底入門。使い方や導入方法を説明【CSS】

SCSSとSASSは、CSSを使用する人にとって、耳にする機会が多い言語ではないでしょうか。効率的なコーディングを行う上で、便利であるという評価を知っているものの、まだ触れたことがないという人もいることでしょう。使いはじめるとすっかりその便利さにはまってしまうと思いますので、ぜひ触れておきたいところです。今回はSCSSとSASSにスポットをあてて、2つの違いや書き方、導入方法など必要となる基本的な知識をまとめました。コーディングに対する認識が大きく変わるかもしれません。これから入門を検討されている皆様のお役に立てていただければ何よりです。