PCインストラクターの川上です。
アメブロカスタマイズをしていくと、いろんな文字の大きさの単位に遭遇しますよね。
ワードやエクセルを使っているときの文字の単位は「pt(ポイント)」なのですが
![川上雄大のワンポイントレッスン](https://stat.ameba.jp/user_images/20131105/12/sumitak1329/34/7d/j/o0239025512739500301.jpg?caw=800)
Webページの文字サイズは、「px(ピクセル)」を使ったり、「em(エム)」を使ったりします。
では、この「px(ピクセル)」と「em(エム)」の違いは何なのでしょうか?
大雑把に言うと、
「px(ピクセル)」は絶対サイズで、「em(エム)」は相対サイズです。
「px(ピクセル)」で文字サイズを指定すると、ユーザーの方で見やすくするために大きさを変更することができなくなります。
それに対して、「em(エム)」は親要素の文字サイズに対する割合で文字の大きさを指定するので、[表示]-[文字サイズ](IEだと)で変更することができます。
この「em(エム)」の名称の由来は、そう・・・、大文字の「M」なのです。
![M](https://stat.ameba.jp/user_images/20131105/12/sumitak1329/16/d7/j/o0208021512739500300.jpg?caw=800)
この「M」の文字が縦横いっぱいの空間を占めることから、文字の大きさの基準とされるようになっています。
そして、
Webページでは標準の文字サイズは16px(ピクセル)なので、
1em(エム) = 16px(ピクセル)
となります。
ですので、1.25emとすると、
16px(ピクセル)×1.25=20px(ピクセル)
となるのです。
しかし、ここで問題が・・・
さきほど、「Webページでは標準の文字サイズは16px(ピクセル)」とお伝えしましたが、このアメブロでの標準は違っているのです、ハイ。
アメブロでは、もともと設定してあるCSSを見てみると、
html {
line-height: 1.4;
font-size: 75%;
}
となっていて、
1em=16px(ピクセル)×75%=12px(ピクセル)
そう、12px(ピクセル)がアメブロの標準文字サイズになっているのです。
それでは、この12pxというのが大きいのか小さいのか普通のサイズなのか・・・
ちょっと計算してみましょう!
まず、ワードやエクセルで使っている「pt(ポイント)」をmm(ミリメートル)に直してみます。
1pt(ポイント)は0.3514mmと決まっていますので(JISで制定)
(1ptは1/72インチ)
8pt = 8 × 0.3514 = 2.8112mm
9pt = 9 × 0.3514 = 3.1626mm
10pt = 10 × 0.3514 = 3.514mm
10.5pt = 10.5 × 0.3514 = 3.6897mm(ワードで標準)
12pt = 12 × 0.3514 = 4.2168mm
と覚えておいてください。
ワードでの標準の文字サイズは10.5ptです。
それでは、今度は「px(ピクセル)」をmm(ミリメートル)に直してみます。
実は、pxをmmに直す場合は、使用している画面の大きさと解像度によってサイズが異なりますので(注意!)、
ここでは画面の幅411mmの20インチの画面で解像度1600px×1200px(推奨)で計算することにします。
まず、1px(ピクセル)の大きさを求めます。
411mm ÷ 1600px = 0.256875mm
1pxが0.256875mmとわかりましたので、12pxを求めてみます。
12px=12 × 0.256875 = 3.0825mm
でました!
12pxは3.0825mmですから、さきほどのポイントのところに戻ると、9pt(ポイント)=3.1626mmよりも小さいことがわかります。
これでは、文字が小さくて読みづらいですね^^;
ですので、
14px = 14 × 0.256875 = 3.59625mm
のほぼワード標準の10.5pt(ポイント)=3.6897mmと同じ大きさに変更するとよいのです。
ですから、指定の仕方は、
14px ÷ 12px(親文字) = 1.1667
1.1667emを指定してあげればよいですね。
/* 記事本文の文字サイズ */
.articleText {
font-size:1.1667em;
}
と。
(ここでは、記事本文「.articleText」だけ大きくする指定になります。)
そう・・・、アメブロの場合は、
1em(エム)って、12px(ピクセル)のことなのです(現在は)。
最後まで読んでいただいた方・・・
今回は算数の内容になってしまいましたが(笑)
こんがらがらなかったでしょうか^^?
ここまで読んでいただいて、感謝いたします!
以上、パソコンワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大