Home
Menu
Side
Twitter
Top
ホーム / HTML | ブログ | ブログカスタマイズ |

ブログの文字の大きさはこれで決めよう！【 rem 】 を使ってフォントサイズを調整

2019/07/17

HTML ブログ ブログカスタマイズ

こんにちは。HARU（ @HARU ）です。

HTML において文字の大きさを決める場合、「 px 」、「 em 」、「 ％ 」と「 rem 」という単位のどれかを用いることになる。

それぞれ長所と短所はあるが個人的には今後、 rem を使ってブログをデザインしていくことをオススメする。

外部参考サイト

それぞれ単位の長所と短所

px で指定する

px（ピクセル）で文字の大きさを指定した場合、親子要素関係なくクラス指定したフォントサイズになる。

簡単に言えば、どんな画面サイズでも同じ大きさで表示させるということだ。

px 指定は 絶対にその大きさがいい というときに用いる指定方法になる。

  
    html {
      font-size: 10px ;
    }
    body {
      fontsize: 16px ;
    }
    .abc {
      font-size: 20px ;
    }
    .abc2 {
      font-size: 30px ;
    }
  

  
    <html>
    <body>
        <div class="abc">
          <p>（ abc 指定値 ）20px </p>
            <div class="abc2">
              <p>（ abc2 指定値 ）30px </p>
            </div>
        </div>
    </body>
    </html>

ただ今の時代は PC 画面からスマートフォン、タブレットまでいろいろなデバイスでブログを見られる可能性がある。

どのデバイスでも同じ大きさで表示するということは PC では問題なく表示できるデザインを作っても、スマートフォンから見るとデザインが崩れている可能性があるということだ。

px で指定する場合レスポンシブデザインを使わない前提で、PC 画面表示用デザインとスマートフォン用デザインなど、各デバイスに対応したテンプレートを作る必要があるかもしれない。

em で指定する

em で文字の大きさを指定した場合、親要素に対して大きさが変化する。

親要素を変えるだけでデザインの変更が一括で行えたりと便利だ。

使いづらい点は逆に「親要素に対して」変化する点。

親要素に変化を加えた場合、子要素すべてが変化してしまう。

  
    html {
      font-size: 10px ;
    }
    body {
      fontsize: 16px ;
    }
    .abc {
      font-size: 2em ;
    }
    .abc2 {
      font-size: 2em ;
    }
  

  
    <html>
    <body>
        <div class="abc">
          <p>（ 親要素（ body ））16px *（ abc 指定値 ）2em ＝ 32px </p>
            <div class="abc2">
              <p>（ 親要素（ div class="abc" ））32px *（ abc2 指定値 ）2em ＝ 64px </p>
            </div>
        </div>
    </body>
    </html>

上記の場合、親要素（ body ）が 16px 、その子要素（ abc ）に 2em を指定で 32px 。

さらにその子（ abc2 ）は、親（ abc ）に対して 2em を指定で 64px となる。

  • abc のフォントサイズ = 親要素（ body = 16px ）* 子要素（ abc = 2em ）= 32px
  • abc2 のフォントサイズ = 親要素（ abc = 32px ）* 子要素（ abc2 = 2em ）= 64px

もし仮に body のフォントサイズを変化させた場合、すべての子要素に影響があることがわかると思う。

使い勝手がいい em だがデザインの見直しに時間がかかる可能性もある。

％ で指定する

％ で文字の大きさを指定した場合、em と同様に親要素に対して大きさが変化する。

特徴としては em とほとんど変わらないが ％ で指定しているため、思ったサイズと多少の誤差が出るかもしれない。

em 同様、要素が把握しきれていないとデザインの見直しが大変である。

rem で指定する

rem で文字の大きさを指定した場合、html のサイズを基準に大きさが変化する。

em や ％ と違い直接の親要素に対して変化しない。これがどういう意味か例で見てみよう。

  
    html {
      font-size: 10px ;
    }
    body {
      font-size: 1.6rem ;
    }
    .abc {
      font-size: 2rem ;
    }
    .abc2 {
      font-size: 3rem ;
    }
  

  
    <html>
    <body>
        <div class="abc">
          <p>（ html ）10px *（ abc 指定値 ）2rem ＝ 20px </p>
            <div class="abc2">
              <p>（ html ）10px *（ abc2 指定値 ）3rem ＝ 30px </p>
            </div>
        </div>
    </body>
    </html>

上記の例では、 em 指定の例と同様に div で子要素を追加している。

ただし em 指定と違い一番下要素である abc2 のフォントサイズは、親要素である abc のフォントサイズに影響されない。

  • abc のフォントサイズ = （ html = 10px ）* （ abc = 2rem ）= 20px
  • abc2 のフォントサイズ = （ html = 10px ）* （ abc2 = 3rem ）= 30px

div で子要素が追加されても、rem で指定したフォントサイズは html の値を基準に大きさが変化するためだ。

つまり rem 指定は親要素を気にすることがないため、デザインの変更等をやりやすくなる優れモノってこと。

そんな使いやすい rem だが rem に対応しているブラウザは最近のもののみという。

昔のブラウザ（ IE8 程度）に対応したい場合は使うことができない。

ただ時代の流れからすると、今後は rem を使用してフォントサイズを決めてもいいのではないだろうか。（ rem の使えるブラウザ一覧 ）

rem の導入

ここでは rem を用いてのフォントサイズ調整をお伝えする。

html のフォントサイズを ％ で指定する

rem を使うにあたって基準となる html のフォントサイズを決定する。

基準となるフォントサイズが 16px など、中途半端な数値では計算が面倒なので1rem = 10pxとなるように調整する。

  
    html {
      font-size: 62.5%; /* 1rem = 10px */
    }

1rem ＝ 10px になるように html フォントサイズを 62.5% に設定する。

なぜ 62.5％ で 10px となるかというと、現在の多くのブラウザのデフォルト設定が 16px となっている。そのため 16px * 62.5% ＝ 10px という計算で 62.5% となる。

body のフォントサイズを em で指定する

Google Chrome のバグで body に rem 指定をするとうまく反映されないことがあるらしい。そのため body は em で指定する。

なお他の rem 対応ブラウザに関しては body も rem 指定で問題ない模様。

  
    body {
      font-size: 1.6em ; /* 1.6em = 16px */
    }

body のフォントサイズは、ブラウザのデフォルト設定値（ 16px ）になるように1.6emとする。

body のフォントサイズ = html（ 16px * 62.5% ＝ 10px ）* body（ 1.6em ）= 16px

各文字のフォントサイズを rem で指定する

p タグや h タグのフォントサイズを rem で調整する。

今回の例では基準（ html ）が 10px となっている。それを考慮して調整しよう。

  
    h1 {
      font-size: 2.2rem ; /* 2.2rem = 22px */
    }
    p {
      font-size: 1.8rem ; /* 1.8rem = 18px */
    }

h1 のフォントサイズ = html（ 16px * 62.5% ＝ 10px ）* h1（ 2.2rem ）= 22px

p のフォントサイズ = html（ 16px * 62.5% ＝ 10px ）* p（ 1.8rem ）= 18px

rem の応用【 レスポンシブに対応させる 】

ここまでの CSS は以下の通り。

  
    html {
      font-size: 62.5%; /* 1rem = 10px */
    }
    body {
      font-size: 1.6em ; /* 1.6em = 16px */
    }
    h1 {
      font-size: 2.2rem ; /* 2.2rem = 22px */
    }
    p {
      font-size: 1.8rem ; /* 1.8rem = 18px */
    }

この状態だと、画面サイズが変わっても h1 は 22px で表示されるし、 p は 18px で表示される。

そこで画面サイズが変わったときに、全体的に小さくするように CSS に追記する。

  
    @media screen and (max-width: 1000px) {/* 1000px以下*/
    html {
　    font-size: 55.555%; /*本文16px程度になる*/
    }
    }

例として画面サイズが 1000 px 以下になったとき、1rem ＝ 8.88px になるように html フォントサイズを「 55.555% 」にしてみた。

考え方は以下の通りである。

  1. 画面サイズが小さくなったときに、h タグや p タグも小さくしたい。
  2. 画面上最小になる p タグを 18px → 16px 程度にする数値を考え設定する。

※ p タグを 16px 程度にするには 1rem = 8.88px となるとよい。

p のフォントサイズ = html（ 16px * 55.555% ＝ 8.88px ）* p（ 1.8rem ）= 15.99px （ ≒ 16px ）

このように、html の数値を変更するだけでレスポンシブ対応することができる。

まとめ

今の時代、PC画面からスマートフォン、タブレットまでいろいろなデバイスでブログを見られるようになった。

閲覧する画面サイズが変わっても、読みやすいブログを作るべきであると考えている。

レスポンシブデザインに対応したフォントサイズ設定において rem はとても使いやすい。

rem に対応していないブラウザもあるが、これからどんどん対応していくと思うので rem で調整しておくことをオススメする。

QooQ