- HTML
24 font-sizeプロパティ
font-sizeプロパティ
まずは、CSSの中でテキストのデザインに関するプロパティを見ていきたいと思います。最初は、文字の大きさを変える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導入支援に関するお悩みがある方は、お気軽にご相談ください。