ワードプレスの新しいテーマである Twenty Twelveの style.cssをよく見れば remと言う(のは)単位が使われたことを分かる. 1 テーマもっぱら前部の説明を見れば下のような説明を接することができる. 英語でちょっと長いがそのまますべて引用する. ざっと見て越しなさい. remが 14を意味して line-heightが 24を意味すると出ていること位は理解することができるんで, スタイルをピクセル単位でまず宣言した後 rem 単位で被るのを分かることができるでしょう.

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.42857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---------- Further reading

http://snook.ca/archives/html_and_css/font-size-with-rem


http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

ヨトンガンに, このようなのを見れば原理を理解しようと努力をしなければならない. 親切にもワードプレステーマチームが ‘もっと読み物’のリンクを提供してくれたからそれを翻訳して見る事にした. 二つのリンクの中での上にあるリンクを翻訳したことだ. 原文はFONT SIZING WITH REM である. 今から翻訳手始め.

remで字大きさ指定すること

このごろまでも, 字大きさ測定単位を何で決めるかは熱い主題になることができる. 不幸にも, 多様な長短所があって, それでちょっと欠陷がある多様な方法たちがあるのだ.ちょっと欠陷があることの中に何を使うのが一番望ましい事してから問題であるだけだ.

人々は主に次二つの方法を使う.

  1. pxでサイズ指定
  2. emでサイズ指定

私が魔法みたいな三番目方法を紹介するはずだが, その前に上の二つの接近法をよく見よう.

pxでサイズ指定すること

ウェブ初期には字大きいのを指定するためにピクセルを使った. ピクセルは堅固で一様だ. 不幸にも, [ピクセルを使ってデザインする場合] インターネットエクスプローラ(IE) サヨングザヌンシムジオ IE9 でもブラウザー機能を利用して字大きさを調節することができない. 2 これはサイト使用性をかなり犠牲するのだ. IEの最近バージョンは他の主要ブラウザーたちのようにページ全体の大きさを拡大縮小することができる機能がある. それでどの位問題は緩和された.

私は, 個人的に, ピクセル基盤レイアウトをもっと好んだ. ピクセル基盤レイアウトは一貫性を提供するからだ. 接近性問題を乗り越えることができるツールも十分で言葉だ. しかし私は立場を変えた. 残りを調べよう.

emでサイズ指定すること

IEで字大きさをまともに調節することができない点はずっと不満だった. それのため, 私たちは em 単位を使うことができる. リチャードルターの文, emを使って字大きさを指定する方法銀 3 多分この接近法に関して初めて読んだ文であるでしょう. かなり長く前の 2004年に言葉だ. (ワウ, 7年も経った.)

この方法ではパーセントを利用して bodyの基本字大きさを直す. このようにすれば元々は 16pxである1emが 10pxになる. 字大きさを 14pxにするためには 1.4emで設定をすればよい.

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

emを基盤で字大きさを決める場合問題は字大きさが複雑になるというのだ. [上のようにスタイルを指定すれば] リストの中のリストは 14pxではなく 20pxになる. リストが一段階もっと深くなれば字大きさは 27pxになる! この問題を校正しようとすれば子要素の字大きさを 1emで宣言して校正することができる.

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

em 基盤で字大きさを指定する時こんな複雑性は不満であることができる. それではまた何ができるか?

remでサイズ指定すること

CSS3は何種類新しい単位を紹介した. その中には “room em”を意味する remという単位もある. まだ眠くなかったら, remがどんなに作動するのかよく見よう.

em 単位は親要素の字大きさに相対的な大きさだ. それで複雑な問題が起こることだ. rem 単位は最上位要素あるいは html要素に相対的な大きさだ. これが意味するのは, html 要素に字大きさを一度指定して, 残りではその割合によって字大きさを指定すれば良いというのだ.

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

私は基盤になる字大きさを 62.5%と指定した. このようにすれば pxと似ているように単位を使うことができるからだ.
しかしさんたんな水準のブラウザー支援を心配しなければならないじゃないか?

ブラウザー支援がかなり大丈夫なの分かれば驚くはずだ. サファリ5, クロム, ファイアフォックス 3.6 以上, そして甚だしくはインターネットエクスプローラ 9度である支援する. remを使えば IE9が字大きさ調節を支援するということも良い消息だ. (ああ, 可哀相なオペラは (最小限 11.10までは) rem 単位をまだ具現しなかった.)

rem 単位を支援しないブラウザーのために何をしなければならないか? 私たちは代替制で pxを使うことができる. 旧バージョンのエクスプローラで字大きさ調整がならないことを気を使わなかったら言葉だ. (うーん, 相変らず IE7と IE8でページ拡大はなる.) そうするため, 私たちは字大きさを先に pxと指定して, その次の remを使って指定をする.

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

ワウ! もう私たちはすべてのブラウザーで一貫されて予測可能な大きさ指定ができる. そしてすべての主要ブラウザーの最新バージョンで字大きさ調整ができる.

Notes:

  1. これ蛇足なのに Twenty Twelveはそのまま 2012だ. ↩
  2. 訳者註 – 語だと? 本当に? ↩
  3. How to size text using ems ↩

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。