文字のプロパティ

文字の大きさを指定する

プロパティ	値	備考
font-size	[例] 16px	数値＋単位
	xx-large / x-large / large / medium / small / x-small / xx-small	キーワードによる指定

font-sizeプロパティでは、文字の大きさを指定します。数値＋単位で指定するほか、７段階のキーワードによる指定もできます。

タグを入れ子にした箇所で文字サイズがおかしくなる場合は、単位「rem」を使ってみましょう。

See the Pen
2-8_1 by Koji Seto (@yseseto)
on CodePen.

フォントの種類を指定する

プロパティ	値	備考
font-family	[例] ‘游ゴシック’, ‘Yu Gothic’, ‘游ゴシック体’, ‘YuGothic’	WindowsとMacでフォント名が異なるので注意
	serif sans-serif cursive fantasy monospace	明朝系 ゴシック系 筆記体系 装飾系 等幅

See the Pen
2-8_2 by Koji Seto (@yseseto)
on CodePen.

文字の太さを指定する

プロパティ	値	備考
font-weight	bold	太字にする
	normal	標準に戻す
	100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900	数値が大きいほど太い

See the Pen
2-8_3 by Koji Seto (@yseseto)
on CodePen.

斜体を指定する

プロパティ	値	備考
font-style	italic	斜体にする
	oblique	斜めに傾ける
	normal	標準に戻す

See the Pen
2-8_4 by Koji Seto (@yseseto)
on CodePen.

行の高さを指定する

プロパティ	値	備考
line-height	[例] 24px	数値＋単位
	[例] 150%	パーセント指定
	[例] 1.5	倍数指定

See the Pen
2-8_5 by Koji Seto (@yseseto)
on CodePen.

文字間隔を指定

プロパティ	値	備考
letter-spacing	[例] 1em	数値＋単位

See the Pen
2-8_6 by Koji Seto (@yseseto)
on CodePen.

行揃えを指定

プロパティ	値	備考
text-align	left center right justify	左揃え 中央揃え 右揃え 両端揃え

See the Pen
2-8_7 by Koji Seto (@yseseto)
on CodePen.

文字装飾を指定

プロパティ	値	備考
text-decoration	none underline overline line-through	線なし 下線 上線 取消線

See the Pen
2-8_8 by Koji Seto (@yseseto)
on CodePen.

字下げ（インデント）を指定

プロパティ	値	備考
text-indent	[例] 1em	数値＋単位

See the Pen
2-8_9 by Koji Seto (@yseseto)
on CodePen.