「大きさ」の設定
大きさの単位指定をどうするか
単位「rem」
html要素で設定された基準フォントサイズの高さ(font-sizeプロパティの値)を1。
CSS3で定義された比較的新しい規格。
あ
あ
<div style="font-size:2rem;width:5rem;margin-bottom:1rem;> あ <div style="font-size:2rem;width:5rem;margin-bottom:1rem;> あ </div> </div>
単位「px」
画素の最小単位が1px。FHDの画面の幅は1920px。
ブラウザの文字の大きさ設定が反映されない(文字が拡大・縮小されない)ケースがある。
あ
あ
<div style="font-size:32px;width:80px;margin-bottom:32px;> あ <div style="font-size:32px;width:80px;margin-bottom:32px;> あ </div> </div>
単位「em」
今の時点での基準フォントサイズの高さ(font-sizeプロパティの値)を1。
大きさが"複利計算"される。
あ
あ
<div style="font-size:2em;width:5em;margin-bottom:1em;> あ <div style="font-size:2em;width:5em;margin-bottom:1em;> あ </div> </div>
単位「%」
文字の大きさで指定したときはemと同じ(1em=100%)。ボックスの大きさで指定したときは基準となるボックスの大きさが100%。
大きさが"複利計算"される。
あ
あ
<div style="font-size:200%;width:70%;margin-bottom:7%;> あ <div style="font-size:200%;width:70%;margin-bottom:7%;> あ </div> </div>
ブラウザのウィンドウ幅を変えて見よ。
FirefoxやChromeでブラウザのフォントの大きさを変えて見よ。