HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

フォント サイズ

font-sizeプロパティ

フォントのサイズを指定するプロパティです。

  • 初期値

    medium

  • 継承

    継承あり

  • 適用できる要素

    全要素

次のような値を設定することができます。

  • xx-small – x-smallより小さいサイズ。
  • x-small – smallより小さいサイズ。
  • small – mediumより小さいサイズ。
  • medium – ブラウザの標準サイズ。
  • large – mediumより大きいサイズ。
  • x-large – mediumより大きいサイズ。
  • xx-large – x-largeより大きいサイズ。
  • smaller – 引き継いだサイズよりも1段階小さいサイズ。
  • larger – 引き継いだサイズよりも1段階大きいサイズ。
  • 値 + 単位 – 数値と人気の単位を組み合わせた指定方法です。単位は「px」「pt」「em」などで指定します。
  • 値 + % – 引き継いだサイズに対して、%値で指定したサイズで表示します。

パターン1

数値以外の「xx-small」〜「xx-large」の範囲でサイズ指定した例です。絶対指定となるため、親要素のフォントサイズに影響されません。

CSSコード例

.sample_css1 .text1 {
	font-size: xx-small;
}
.sample_css1 .text2 {
	font-size: x-small;
}
.sample_css1 .text3 {
	font-size: small;
}
.sample_css1 .text4 {
	font-size: medium;
}
.sample_css1 .text5 {
	font-size: large;
}
.sample_css1 .text6 {
	font-size: x-large;
}
.sample_css1 .text7 {
	font-size: xx-large;
}

表示例:

xx-smallを指定

x-smallを指定

smallを指定

mediumを指定

largeを指定

x-largeを指定

xx-largeを指定


パターン2

px」で指定した例です。絶対指定となるため、親要素のフォントサイズに影響されません。

CSSコード例

.sample_css2 .text1 {
	font-weight: 10px;
}
.sample_css2 .text2 {
	font-weight: 14px;
}
.sample_css2 .text3 {
	font-weight: 20px;
}

表示例:

10pxを指定

14pxを指定

20pxを指定


パターン3

%」で指定した例です。%は親要素の値を基準にするので注意してください。
ここでは、「medium」でブラウザ標準サイズにリセットしています。

CSSコード例

.sample_css3 .text1 {
	font-size: 80%;
}
.sample_css3 .text2 {
	font-size: 100%;
}
.sample_css3 .text3 {
	font-size: 140%;
}

表示例:

80%を指定

100%を指定

140%を指定

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。