CSS

CSS3でフォントサイズを指定する単位は「rem」がとても便利

CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利だったので使い方をメモしときます。なにが便利なのかというと、一般的によく使われるemや%では親要素のフォントサイズが基準となって、階層が深くなったりすると何かと不都合が生じる場合があります。その点remではroot要素に指定されたフォントサイズが基準になるので、深い階層になっても複雑な計算をしなくて済みます。

[ads_center]

使い方

例えば、以下のHTMLの場合、親要素にemや%でフォントサイズを指定すると階層が深くなるにつれてフォントサイズが小さくなったり大きくなったりしていきます。

HTML

<ul>
    <li>サンプル</li>
    <li>
        <ul>
            <li>サンプル</li>
            <li>
                <ul>
                    <li>サンプル</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

ul {
    font-size: 0.9em;
    list-style: none;
}

実際にブラウザで確認してみるとこんな感じになります。

一般的なemや%

階層が深くなってもフォントサイズが変わらないようにするには子要素にもフォントサイズを指定していかなくてはならないので、こういった場合には少し面倒。

なので、こういった時にはremで指定していくのがとても便利です。ちなみにremとは「root em」の意味だそうです。使い方は、まず、基準となるroot要素にフォントサイズを記述していきます。

html {
    font-size: 62.5%;
}

62.5%にすることで、例えば、18pxにしたい場合は1.8remと分かりやすく指定することができます。また、remが対応されていないブラウザのために、px指定も記述しておくといいですね。

ul {
    font-size: 18px;
    font-size: 1.8rem;
    list-style: none;
}

これで、先程のHTMLを再度ブラウザで確認してみると、以下のようになります。

remで指定

root要素(html)に記述したフォントサイズを基準としているので、階層が変わってもフォントサイズが再計算される心配がありません。

ということで、なかなか便利な単位だなーという印象を受けました。CSS3をメインで活用してくためには覚えておいて損はない指定方法ですね。

関連記事

  1. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  2. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  3. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  4. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

  5. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  6. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. KPS-88
  2. Happy Plugs AIR1
  3. cheero Stream 10000mAh
  4. BOSE HOME SPEAKER 300
  5. RP-PC112

アーカイブ

PAGE TOP