今さら聞けないCSSプロパティ「font-size」の指定方法と使い方

やぁ。歯磨きには15分以上かけるユトピ(@yutopi60pa)です。
磨きすぎも良くないんだよね。
 

というわけで今回は前回のcolorプロパティに続いて、文字のデザインに関するプロパティ「font-size」を解説していくよ！
 

基本的には文字の大きさを指定するのに使うものなので、使う頻度も高いのでよくチェックしておこう！
 
 

font-sizeとは？

CSSプロパティのfont-sizeとは、文字の大きさを指定することができるプロパティです。
それだけです。とてもシンプルですね。
 

というわけで指定方法です。
 

• 数値で指定・・・px、em、パーセントの単位を使用します。
• キーワードで指定・・・大きさを表す7段階のキーワードで指定します。
  xx-large
  x-large
  large
  medium
  small
  x-small
  xx-small
   

• 相対サイズでの指定・・・親要素によって文字の大きさが変わります。larger、smallerを使用します。

emとか相対とか小難しい単語が出てきましたが、要するに親要素の大きさによって、文字の大きさも変動していく指定のやり方ですね。補足としてCSSなど文字サイズに何も指定していない状態は16pxとなっています。この16pxが文字のデザインをしていくうえで基準となりますので、しっかりと覚えておきましょう。
 

それでは実際に見ていきましょう！
 
 

font-sizeを数値で指定

このような形でfont-sizeを数値で指定していきます。
 

ピクセルの場合は何もしていない状態の16pxの文字サイズを基準に変更していけば大丈夫ですね。
 

本題はemとパーセントです。
まずemは親要素のfont-sizeを基準に大きさを変えていきます。
例えばデモの親要素のfont-sizeが20pxなら、1em=20pxとなって基準を作ります。
2emを指定したら40pxとなるわけですね。
 

 

他にも親要素がfont-sizeを30pxに変更したら、1em=30pxと基準も変わり、2emは60pxということになります。
 
 

パーセントもemと同じ要領で、親要素のfont-sizeが20px、子要素のfont-sizeを50%にした場合、子要素の文字サイズは10pxで表示されます。
 

 

他にも親要素の文字サイズを40pxに変更したら、子要素の文字サイズは20pxで表示されるこよになります。
 
 

このように親要素の文字サイズの指定によって変化していくことを相対といいます。
emやパーセントでの指定を行う場合は親要素の文字サイズをよく確認してから使っていきましょう。

font-sizeをキーワードで指定

このように文字の大きさを好きなキーワードで指定することができます。
基準となる文字サイズはmediumの16px。
1段階上がるごとに1.2倍されていきます。
 

しかし、この指定方法はサイズの幅が数値で指定するよりも7段階しかないので細かい設定ができません。
そのような観点からあまりキーワードでの指定を行われないのがほとんどですね。
 
基本的には数値で指定した方が楽ですね。
 
 

font-sizeを相対サイズで指定

先ほども数値のemとパーセントのところで見てきた相対サイズですが、ほかにも「smaller」と「larger」がありますので、そちらも見ていきましょう。
 
 

このようにsmaller、largerを指定した場合、親要素のfont-sizeを基準に、1段階上下してい文字サイズを決定します。
もちろん親要素のfont-sizeが変更されれば、smaller、largerを指定した文字も大きさが変わります。
 
 

まとめ

 
いかがでしたか？一概に文字サイズといってもfont-sizeだけでここまでいろいろな指定の仕方があるんですね。
相対的な数値の指定方法は慣れていないと難しいと感じるかもしれないですが、こちらも実際に使っていくうちになれてくるので、どんどん実践していってくださいね！