CSSで文字のフォントサイズを指定する方法

文字のフォントサイズを調整する場面は、cssを記述していると必ず出てくるので、しっかりと覚えておきたいですよね。

そんなフォントサイズの指定方法を今回はご紹介します。

font-sizeの使用方法

フォントサイズを変更するには、(font-size)プロパティを利用します。値には3つ種類があるので1つづつ見ていきましょう。

単位で値を指定する

px/em/exなどの単位を使った数値を値に入れる方法です。

font-sizeでは数値は利用できますが、−の値は利用できません。ピクセルは、1ピクセルを1の基準にしているので、ユーザーの閲覧環境の解像度によって大きさが変化します。

%で値を指定する

%でも値を指定することができます。

まず、ブラウザのデフォルトの値を確認しておきましょう。ブラウザのデフォルトのフォントサイズでは100%は16pxになっています。つまり100%と値に入力すると、16pxのフォントサイズが反映されます。

キーワードで値を指定する

数値や、%の他にも決められたキーワードを値に入れることで、フォントサイズを指定することもできます。フォントサイズの値に利用できるキーワードは7種類で、下記の7段階のフォントサイズになっています。

・xx-small
・x-small
・small
・medium
・large
・x-large
・xx-large

一番上が小さく、下に行くほどサイズを大きく設定するキーワードです。mediumは標準のサイズに設定されます。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて