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

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  2. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  3. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

  4. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  5. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  6. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

コメント

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

  1. 2021年 2月 18日

最近の記事

  1. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  2. ライオン システマ 超コンパクト ふつう
  3. タリーズ ハムチーズ&サラダサンド
  4. クリニカのY字タイプのフロス
  5. 日和山公園の桜

アーカイブ

PAGE TOP