いうわけで指定方法です。数値で指定・・・px、em、パーセントの単位を使用します。キーワードで指定・・・大きさを表す7段階のキーワードで指定します。xx-largex-largelargemediumsmallx-smallxx-small相対サイズでの指定・・・親要素によって文字の大きさが変わります。larger、smallerを使用します。emとか相対とか小難しい単語が出てきましたが、要するに親要素の大きさによって、文字の大きさも変動していく指定のやり方ですね。補足としてCSSなど文字サイズに何も指定していない状態は16pxとなっています。この16pxが文字のデザインをしていくうえで基準となりますので、しっかりと覚えておきましょう。文字サイズは50%(10px)だよ!文字サイズは50%(10px)だよ!文字サイズは50%(10px)だよ!文字サイズは50%(10px)だよ!文字サイズは50%(10px)だよ!このような形で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やパーセントでの指定を行う場合は親要素の文字サイズをよく確認してから使っていきましょう。文字サイズはxx-smallだよ!文字サイズはxx-smallだよ!文字サイズはx-smallだよ!文字サイズはx-smallだよ!文字サイズはsmallだよ!文字サイズはsmallだよ!文字サイズはmediumだよ!文字サイズはmediumだよ!文字サイズはlargeだよ!文字サイズはlargeだよ!文字サイズはx-largeだよ!文字サイズはx-largeだよ!文字サイズはxx-largeだよ!文字サイズはxx-largeだよ!このように文字の大きさを好きなキーワードで指定することができます。基準となる文字サイズはmediumの16px。1段階上がるごとに1.2倍されていきます。この指定方法はサイズの幅が数値で指定するよりも7段階しかないので細かい設定ができません。そのような観点からあまりキーワードでの指定を行われないのがほとんどですね。基本的には数値で指定した方が楽ですね。先ほども数値のemとパーセントのところで見てきた相対サイズですが、ほかにも「smaller」と「larger」がありますので、そちらも見ていきましょう。文字サイズにlargerを指定したよ!文字サイズにlargerを指定したよ!文字サイズにlargerを指定したよ!このようにsmaller、largerを指定した場合、親要素のfont-sizeを基準に、1段階上下してい文字サイズを決定します。親要素のfont-sizeが変更されれば、smaller、largerを指定した文字も大きさが変わります。まとめいかがでしたか?一概に文字サイズといってもfont-sizeだけでここまでいろいろな指定の仕方があるんですね。コメントをキャンセルメールアドレスが公開されることはありません。