いろいろなことをちゃんとしたいブログ

ちゃんとしたブログ

CSS

font-sizeをremで指定するまとめ

投稿日:

FONT SIZING WITH REM

”emや%の相対指定の場合、親要素の影響を受け、子要素は複利計算されてしまいます。
しかしremはroot要素(html要素)のフォントサイズを継承するので階層が深くなってもフォントサイズが大きくなっていくことはありません。”
HTML5 – CSS3 mag

”「em」は親のfont-sizeに相対的で、複利計算され問題を起こすことがあります。「rem」では常にルート(またはhtml要素)に相対的となります。
これは、html要素にフォントのサイズを一つ定義し、すべての子要素を「rem」で定義することができます。”
coliss

”「em」や「%」などの従来の相対指定と違って、親要素を継承しないという特徴があり、
入れ子にするとどんどん拡大、縮小されてしまったり、指定に細かな計算が必要だったりすることもありません。
常にroot要素に対して「何倍」という使い方ができるので、指定の仕方が非常にわかりやすく、便利です。”
Tips Note

”remは、ルート要素(典型的にはhtml要素)に対して相対的なフォントサイズ指定となるので、要素の出現位置に依らず、一定のフォントサイズが期待できます。
そしてこちらによれば、remはIE9を含むモダンブラウザの全てで利用できるので、実はすでに広く使えるテクニックです。”
IT-Walker on hatena

”IE では「em」を利用すると文字サイズを大きくしたり小さくしたり出来なくなるデメリットがあります。そんな時に便利なのが「rem」です。”
allWebクリエイター塾

”「ルート要素の文字サイズ」を基準にできる、CSS3の新単位「rem」で解決”
allabout

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

”emって最強なんじゃねって思いませんか?新しいし、入れ子オッケーだし!
でも、web屋クライアントってそんな甘くないんですよね。。。。w”
entacl Lab

”CSS3で新しく追加された単位「rem」は、ルート要素の文字サイズを基準にして、文字サイズを指定できる単位です。「ルート要素」とは、ソースの最も上位(基底)の要素のことで、HTMLでは「html要素」が該当します。右図のように、p要素を基準にして考えると、div要素が「親要素」で、html要素が「ルート要素」です。”
allabout

"とくにレスポンシブなデザインをする際は、rootの要素のフォントサイズを調整すればいいだけなのでとても便利。"
69log

”CSS3で新登場した「rem」という単位はこれまでのデメリットをカバーする単位です。”
Web&Peace

”%指定とは違い、親要素のフォントサイズの継承を気にせず使用することができます。”
株式会社ゼノフィ

-CSS
-, ,

Copyright© ちゃんとしたブログ , 2019 All Rights Reserved.