お問い合わせ
  • HTML

24 font-sizeプロパティ

font-sizeプロパティ

まずは、CSSの中でテキストのデザインに関するプロパティを見ていきたいと思います。最初は、文字の大きさを変えるfont-sizeプロパティです。どんなデザインにおいても必須と言えるでしょう。使い方は簡単で、プロパティの値に文字の大きさを指定するだけです。

font-sizeプロパティ

指定の仕方でよく使われるのは、「px(ピクセル)」、「%(パーセント)」、「em(エム)」の3種類です。

px(ピクセル)での指定

px(ピクセル)とは、ディスプレイで表示出来る「最小の点1つ分」を表す単位です。たとえば、font-size:10pxと指定すると、文字の大きさが10px(点10個分)で表示されます。

%(パーセント)での指定

%(パーセントは)、比率を使ってfont-sizeを指定します。「親要素のfont-size」が比率の基準となります。たとえば、p要素の親要素がbody要素だったとして、body要素のfont-sizeが10pxだったとして、ここでp要素のfont-sizeを50%に指定すると、フォントが5pxでひょうじされます。逆に150%と指定すると、フォントは15pxで表示されます。

em(エム)での指定

em(エム)も比率を表す単位です。比率の基準になるのは%と一緒で、親要素のfont-sizeで、「1em=100%」を表します。つまり、emは日本語に訳すと「倍」という意味になります。1倍=1em=100%、1.5倍=1.5em=150%、0.5倍=0.5em=50%といった感じです。

このページのまとめ

  • font-sizeプロパティは文字の大きさを変えるプロパティで、どんなデザインでも必須。
  • font-sizeプロパティの値の指定には、「px(ピクセル)」、「%(パーセント)」、「em(エム)」の3種類がよく使われる。

Contact Us

Web制作、Webマーケティング、SFA・MA導入支援に関するお悩みがある方は、お気軽にご相談ください。

お問い合わせ・ご相談

ホームページ制作、マーケティングにおける
ご相談はお気軽にご連絡ください。

資料請求

会社案内や制作事例についての資料を
ご希望の方はこちらから。

お電話でのお問い合わせ

お電話でのご相談も受け付けております。

※コールセンターに繋がりますが、営業時間内は即日
担当より折り返しご連絡をさせて頂きます。