フォントサイズ「rem」

公開日: : 最終更新日:2016/03/24 制作基本

rem

今までフォントサイズには「px」「em」「%」などを使うのが一般的でしたが、「rem」という新しい単位が、CSS3から利用できるようになり、非常に便利になりました。
「rem」とは「root」+「em」の意味で、「ルート要素(htmlに指定)の値」を基準にした相対的なフォントサイズを指定します。
従来の「em」や「%」などの相対指定と違って、親要素の値を継承しないので、子要素が全ての親要素を複利的に継承して、どんどん拡大・縮小されてしまうこともなく、細かい計算が不要になります。
常にルート要素に対してのみ相対的なサイズを指定できるので、非常にわかりやすく便利です。

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

とhtml指定すると

1.6rem = 16px
2.6rem = 26px

のように表示できるようになります。
ただしCSS3のみですので、未対応ブラウザに対しては、「px」で最初に指定し、その次に「rem」で指定しておくとよいです。

body {
font-size: 15px;
font-size: 1.5rem;
}

こんな感じ。

【参考】他の値

pt(ポイント):1pt=1/72in
in(インチ):1in=2.54cm
pc(パイカ):1pc=12pt
px(ピクセル):画素に対する倍率
em:フォントサイズを1とする単位。bodyなどでfont-sizeの指定がないとき、または100%なら1em=16px。
ex:アルファベット小文字「x」を1とする単位
%(パーセント):標準フォントサイズの相対割合



関連記事

WEB制作基本

class名・id名

サイトを作るときに適当につけていいclass名やid名。 どんな名前でもいいけど毎回悩んでしまう。 ...

記事を読む

©

著作権表示に関する記述

著作権表示(copyright)とは 著作権表示とは、著作物の著作権者や著作物の発行年などに関する表...

記事を読む

画像をマウスオーバー時に半透明にする

画像の保存を禁止する方法

画像の保存を完全に防ぐことはできません。 スクリーンショットを取って画面ごとコピーしちゃったらそれま...

記事を読む

WEB制作基本

iPhoneで数字にリンクが勝手につくのを防ぐ方法

iPhoneで自動でつくリンクを解除する iPhoneの標準ブラウザのSafariでは、HTML ...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑