Blogger CSS フォント

フォントサイズは「rem」で相対的に指定する

当ブログは、Bloggerを採用し、テンプレートは Vaster2|レスポンシブ対応済みのblogger日本語テンプレート をベースにカスタマイズをしている。数日かかって様々なカスタマイズを実施してきたが、今回はフォントに関しての話題を少し。

ブラウザには標準フォントのサイズを設定する機能がある。例えば、Chromeであれば「設定」画面に以下のような表示がある。


ブラウザでは、サイトのスタイルシートにフォントサイズの指定がなければ、ここで指定したサイズで表示することになる。

しかしながら、「テーマ Vaster2」では、CSSで「p    {font-size: 18px;}」とか直接サイズを指定しているので、ブラウザの標準フォントサイズを変更しても、当然ながら「18px」から変わることはない。

これはこれで問題はないのであるが、ここではブラウザの設定したフォントサイズに対して相対的なサイズで表示されるようにCSSを記述する。

body {
    font-size: 100%; /* 基準サイズ */
}

h1 {
    font-size: 1.5rem; 
}

「body」で基準サイズを指定する。ここでは、「100%」なので、ブラウザで設定したサイズ「16px」が基準となる。「h1」では「1.5rem」とあるが、この「rem」が相対サイズを意味する。つまり、「h1」は「16 x 1.5 = 24」で「24px」となる。

これでブラウザのサイズ設定と連動することができる。なお、連動させたくない場合でも「body」部分の基準サイズを「14px」とかにすれば、それがサイズの基準となるので便利である。

一般的には、Windowsのメイリオだけ？を考慮してフォントサイズを直接指定することが多い。ただ、これはあまり好ましくないワケである。何故なら、プラットフォームによって使用されるフォント書体は様々であり、そのサイズも様々だからである。

ユーザーがブラウザの標準フォントのサイズを変更したら、それに連動するのがベターではなかろうか。当ブログでは、すべてのフォントサイズを「rem」に変更してあるので、ブラウザの標準フォントのサイズに連動するはずである。

最終更新日:
コメントは受け付けておりません。