「%,em」から「rem」に変更して文字の相対サイズを分かりやすくする

当ブログでは、フォントサイズの指定に、相対指定”%” (”em”も同様) を使用していたが、サイズの指定が入れ子になると、実際のサイズがよくわからなくなってしまい困惑していた。そこで、CSS3からサポートされた”rem”と云う単位を使用することにした。

”%”や”em”の相対指定の場合、親要素のサイズ指定の影響を受ける。一方、”rem”の相対指定の場合は、root要素のサイズだけを継承して計算されるので、階層が深くなっても途中の要素の影響は受けない。 (root em = rem)

以下の例で説明すると・・・
↓ ”rem”を使用しない場合。

<body>
    <div class="aaa">
        <p>文字サイズ</p>
    </div>
</body>
body { font-size: 100%; }
.aaa { font-size: 150%; }
p { font-size: 1.5em; }

ベースフォントサイズが16pxとすれば、”文字サイズ”は、「16x1.5x1.5=36px」となる。

↓ ”rem”を使用した場合。

<body>
    <div class="aaa">
        <p>文字サイズ</p>
    </div>
</body>
body { font-size: 100%; }
.aaa { font-size: 150%; }
p { font-size: 1.5rem; } /* rem で指定 */

ベースフォントサイズが16pxとすれば、”文字サイズ”は、「16x1.5=24px」となる。

つまり、相対サイズを感覚的に指定できることを意味するワケであり、多くの場合”rem”指定のほうが分かりやすいと云うことになる。当ブログ (パソコンレイアウトのみ) でも、すべて”rem”指定に変更した。

admin
カテゴリ:ブログサービス
タグ:CSS フォント
2015/10/13 07:28 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ