em % pt px vw vh フォントサイズの指定の仕方は色々ありますが、最近話題の？「rem」 ルートemの略で、CSS3から追加された単位で、文書の一番ベース設定となっているフォントサイズに対する相対表示なのだとか・・・ しかし、やってみたら、何も変わらない・・・何故だ？！ あ、Google Chrome で観たら変わってた。Firefox 非対応かよっ？！ こちらを見ると、Firefoxも対応してるはずなんだけどなぁ・・・ まぁいいか、今までremの記述使ったことないし、今後もしばらくは様子見ってことで。。。
さて、フォントのサイズ指定の単位は 「px」「pt]は絶対値 「％」と「em」は、親要素のサイズに対する相対値 「rem」はルートサイズに対する相対値、「vw」「vh」はビューポートサイズ(幅/高さ)に対する相対値 ということになります。 （※相対値は親要素のフォントの高さに対する相対値） デフォルト(無指定)では、100% = 1em = 1rem = 16px = 12ptと言う事になるらしいですね。 例えば、フォントサイズを指定した<div>要素の中で相対値を使うと、親要素の指定サイズに対する相対値になるわけですね。 例：下の枠内はフォントサイズを30pxに指定
フォントサイズ：無指定 = 30px フォントサイズ：21px = 70％ = 0.7em フォントサイズ：15px = 50％ = 0.5em フォントサイズ：1rem
1remは絶対値表示なので親要素の大きさに関係なく一定のサイズですね
さて、ここからが本題(笑) フォントサイズの指定の仕方には、単位を指定しない方法もありますね。 「xx-large」「x-large」「large」「medium」「small」「x-small」「xx-small」 これは、実は大きさの決まっている絶対値なんだとか。 デフォルト(無指定)だと… xx-large x-large large medium small x-small xx-small 先程と同じ、フォントサイズ＝30pxに指定した要素の中に入れると・・・？
xx-large
x-large
large
medium
small
x-small
xx-small
おお、おんなじだ！ ※ちなみにルートのフォントサイズを変えてみても、大きさは変わらなかったので、本当に絶対値固定のようです。 ※ルートフォントのサイズ変更はスタイルシートで
html{font-size:80px;}
のように指定してやる。 ※ところで、なんかx-smallとxx-smallの違いがよく分からないので、長い文字列で比較してみると・・・ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ デフォルトではFirefoxとGoogle Chrome では同じ大きさ？(・_・;) IE11とedgeでは違いが現れました。 ※環境によって見え方が異なります。
では、それぞれがどれくらいの大きさなのかというと、これは、ブラウザの仕様によって変わるのだとか・・・ 絶対じゃないんかいorz 古いブラウザでは1.5倍ずつ大きさが変化していったのが、最近のブラウザでは1.2倍ずつになっているとか。 古いブラウザではsmallが標準サイズだったのが、最近のブラウザはmediumが標準サイズになっているとか。 これからは、largeなどの指定方法は使わないほうが良さそうだなぁ・・・
コメント