サイト内検索:

Webページ内のフォントサイズの指定にはCSS3の「rem」を使うといいんじゃない、という話

Webページ内のテキストサイズをCSSを使って指定する場合はpxやemを使う場合が多いわけですが、CSS3から使えるようになったremという単位を使うのがきっといいと思うよ、というお話が書かれていました。

Font sizing with rem - Snook.ca

フォントサイズのpxを使った場合、例えばfont-size:12pxなんて指定をするとフォントの大きさが12pxに固定できてWebデザイン製作者はちょっと嬉しかったりする場合があるのですが、この指定方法を使うとIEなどで文字のサイズを大きくまたは小さくしようとしてもその機能が効かなくなってしまいます。

一方、emを使った指定の場合は親要素のフォントサイズの何倍、という指定の仕方をするので文字の拡大・縮小に対応できるものの、親要素の数値によって文字サイズが変わるのがちょっとやだな、というのがあります。

また、私は経験したことありませんが、リンク先記事によると

The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px!

ということで、1.4emでサイズ指定したフォントもli要素の中では20px相当の大きさになったり、階層が深くなると27pxという大きさにもなるようです。

そこでremの登場です。

remというのは「root em」のことで、ドキュメントのルートに設定されているフォントサイズに対して「何倍」という使い方ができるため、親要素の影響を受けなくなります。

例えば、

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

という感じでルートのフォントサイズを62.5%で指定しておけば1.4remは14pxに、2.4remは24pxとなるみたいです。

CSS3に対応していないブラウザ用には、仕方ないので、

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

みたいな感じで書いておくしかないかな、という感じです。

詳細はリンク先ページをご確認ください。

blog comments powered by Disqus

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.1.2

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このブログ記事について

このページは、nagasawaが2011年5月 2日 17:59に書いたブログ記事です。

ひとつ前のブログ記事は「「魔法の杖」の形の学習リモコン。振って回してTVを操作」です。

次のブログ記事は「Google Keywordを使ったドメイン名レコメンドサイト「Domain Suggestion」」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。