部屋とワイシャツと私。の体ではじめてみた。少し疲れているのかも知れない。
時間ができたらviewportについて詳しく書きたいと思っていて、でもその前に単位emについて理解していない人はきっと読んでもわからなくなると気づいて、それでは人に説明できるのかと我が身を振り返ったときに、知りたくなるのです。本義が。
個人的に略語が嫌いで嫌いで嫌いで。
たまにファイル・トランスファー・プロトコルッ！ などと少年ジャンプの剣士の技か？技名か？ とツッコミたくなる声で叫んでいたりします。
ハイパーテキスト・リファレンスッ！ という技名もあります。弱そうですが、誰とでも繋がれます。一方的に訪ねて行くのが好きなやつです。
略語が大事なのは重々わかっているのです。嫌いなどというのは偏狭です。
木村拓哉氏を「キムタク・キムタク・キムタク・・・」と口にしたら、なんだかとてもキムタクを好きそうです。
「木村拓哉、木村拓哉、木村拓哉ッ」とフルネーム連呼すると、なんだか逆恨みで事件起こしそうな人物の呟きに変化する。怖い。やはり技名だ。
親しくつき合っていくには、略語は大変便利なのですが、略語だけで関わっていくと稀に本質を見失う。いや、しばしば由来を、系統を、本質を忘れる。だからたまに叫ぶのは趣味ということで許してもらおう。（家族に）
で、調べた。と言うほどもなくWikipediaがいちばん端的・的確だったので転記する。
emは、出版において使用される長さの単位である。文字の大きさを表す。名称の由来は大文字M。Mの活字が縦横いっぱいの空間を占めることから、文字の大きさの基準となったとされる。現代では文字の高さと同じ幅と定義され、和文組版では全角幅に等しい。
わかったようで、eはどんな意味なんだ。elementくらいしか思いつかないが・・・ここは少ししつこくググってみた。
アルファベットの起源に遡って図解も含めてめちゃくちゃわかりやすかった記事の中で、
Mを基準とするが・・・
ではなぜmではなく、emなんでしょうか？きっと多くの人はeがなにかの略語なんだと思ったはずです。
まさに自分が今ココだった。
結論としてはラテン文字ではmという文字の名称がem、だからMを基準にした単位の名称もem。読んで納得。いつまでも（eはなんの略なんだよぉ・・・教えておくれよぉ）と考え続けなくてすんで助かりました。
さて本題。CSSのemは親要素を基準に倍率計算するので、
<section class="pixel10">
<p class="2em">
親であるsectionが font-size:10px; で
子要素のパラグラフに font-size:2em; を指定した場合
親を基準に2倍計算で 10x2=20px
これはマイナスの場合も同じで、ブロック要素のマージンなどなら
margin-top: -2em; という整数指定もできるが
font-size: の場合は 0.8em; など小数で指定する
</p>
</section>remは、CSS3から採用された Root em で直接の親要素ではなく、ドキュメントRootとしてのhtml { } で指定されているサイズからの倍率になる。
htmlエレメントで指定する「サイズ」といったらフォントくらいしかないので、emもremもfont-size: で説明されることが多いのだけど「可変」に対応したい用途はviewportがいちばん需要でしょう。
ということで、いずれまたviewportのメディアクエリーについて書くときに。