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をメインで活用してくためには覚えておいて損はない指定方法ですね。

bodum TRAVEL PRESSフレンチプレス式コーヒーがうまい!bodum TRAVEL PRESS(BK K11067-01)0.35Lを購入してみた前のページ

Googleの英語版でWeb検索して検索結果を表示させるやり方次のページGoogle英語版でWeb検索

関連記事

  1. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

  2. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

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

    CSS

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

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

  4. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

  5. Three Dots

    CSS

    シンプルで可愛いCSSローディングアニメーション「Three Dots」

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

  6. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

コメント

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

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

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP