2019.01.27こんにちは、ゆんつです。ホームページをデザインするときに絶対に欠かせないのがフォントサイズ(文字の大きさ)の指定。このフォントサイズを指定するための単位には様々なものがあります。プログラミング初心者の僕は何でもpxで指定していたのですが、最近の学習ではフォントサイズを指定することが出来る別の単位がいくつか登場し少し頭が混乱しています。そこで今日は自分の頭の整理も兼ねて、フォントサイズの指定に良く使われる単位についてまとめておこうと思います。他にもまだまだある相対単位と絶対単位フォントサイズを指定する単位は相対単位と絶対単位に大別されます。相対単位は「何かを基準にして相対的に大きさを決める単位」です。親子がいて、子供の身長を表すのに親の身長を基準にして「子供の身長はお父さんの半分」みたいな感じの指定方法です。絶対単位は「他からの影響を受けずに指定したものがそのまま大きさに直結する単位」のことです。先ほどの例で言えば、親の身長とは関係なく「子供の身長は120cm」というように、単位がそのままそのものの大きさを表します。主要な単位を一覧にするとこんな感じです。cmin実際に使ってみよう絶対単位を使うケースにはまだ出くわしてないので、相対単位だけに絞って実際に実験してみます。px(ピクセル)今までのところ僕が本やオンライン講座などで一番目にした単位です。pxは相対単位で、基準となるのはユーザーのディスプレイの解像度です。同じ数値を指定してもディスプレイの解像度によって、表示されるサイズが異なりますとはいってもあまり解像度を気にする必要はないみたいで、絶対単位みたいな使い方でも良いみたいです。実際pxを絶対単位として分類している本やサイトなどもありました。}16px32px48px%(パーセント)親要素のフォントサイズを基準にします。100%なら親要素と同じ大きさですし、50%なら半分です。}親要素のフォントサイズの100%なので16px親要素のフォントサイズの200%なので32px親要素のフォントサイズの50%なので8px複利問題%でサイズを指定する場合には複利問題に気を付けなければなりません。要素が入れ子となっている場合には複利計算が行われるのです。}親要素は20px子要素は20px*120%=24px孫要素は20px*120%*120=28.8px上記のように複利計算が行われ、入れ子が深くなるほど雪だるま式にフォントサイズが大きくなっていくのが分かります。常に親要素のフォントサイズを念頭に置いて使う必要がありますね。em(エム)親要素のフォントサイズを基準にします。1emなら親要素と同じ大きさですし、0.5emなら半分です。要するに親要素のフォントの大きさにemの手前の数字をかけたものがフォントサイズとなります。emも%同様に複利計算を行いますので留意する必要があります。}親要素のフォントサイズの1emなので16px親要素のフォントサイズの2emなので32px親要素のフォントサイズの0.5emなので8pxrem(レム)remはホームページの基礎となるhtmlのフォントサイズを基準にします。htmlは全ての要素の元締めで、木でいえば根っこに相当する部分です。大元のhtmlのフォントサイズを基準とすることによって、%やemであったような直前の親要素のフォントサイズをいちいち気にする必要はなく、大元のhtmlのフォントサイズだけ把握しておけば良くなりますし、入れ子にした時の複利計算の問題も起こりません。ちなみにデフォルト状態でのhtmlのフォントサイズは16pxです。大きさの計算はemと同じ考え方で、1remならhtml要素のフォントサイズと同じ大きさですし、0.5remなら半分です。単位によるサイズ指定の他にキーワードによるサイズ指定の方法もあります。キーワードによるサイズ指定にも絶対サイズ指定と相対サイズ指定の2種類があります。絶対サイズ指定はブラウザ標準のフォントサイズである16pxをmediumとしてxx-largeからxx-smallまで7段階の調節ができる指定方法です。相対的サイズ指定は親要素のフォントサイズに対して1段階大きくしたり、小さくしたりする指定方法です。一覧にするとこんな感じです。smallerlargemediumsmallx-smallxx-small実際に使ってみる実際に使ってどのように大きさが変化するか見てみましょう。絶対サイズ指定mediumのフォントサイズはデフォルトで16px。mediumのフォントサイズを基準にlarge側のキーワードを使えばフォントサイズは段階的に大きくなりますし、small側のキーワードを使えば段階的にフォントサイズが小さくなります。親要素のフォントサイズよりも1回り大きくしたり、1回り小さくしたりできます。}親要素のフォントサイズは16pxlargerは19.2pxsmallerは13.33....px他にもまだまだある一通りまとめてみて文字の大きさを指定するだけでも様々な単位やキーワードがあることが良く分かりました。上記以外にも最近ではvhやvwなど、フォントサイズの指定に使う単位はまだまだあります。僕はそれらには遭遇していないので、実際に本やレッスンで遭遇したときに勉強し、それらは追記していこうと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。プロフィールこっそりゆんつ山口県在住です。Reserved.メニューHOMEプロフィールお問い合わせホーム検索トップサイドバープロフィールこっそりゆんつ山口県在住です。(17)エックスサーバーで。