CSS レッスン4
テキスト・フォント
font-family、font-size、font-weight、line-heightなどでテキストの見た目を自在に操ろう
フォント関連プロパティ
CSSにはテキストの見た目を制御する多くのプロパティがあります。主要なものを覚えましょう:
font-family- フォントの種類を指定(複数指定でフォールバック)font-size- 文字の大きさ(px, em, rem など)font-weight- 文字の太さ(normal, bold, 100〜900)line-height- 行間の高さletter-spacing- 文字間のスペースtext-decoration- 下線・取り消し線などの装飾text-transform- 大文字・小文字の変換
フォントの種類とサイズ
font-familyはカンマ区切りで複数指定でき、最初のフォントがなければ次が使われます。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview太さ・行間・文字間隔
font-weight、line-height、letter-spacingで読みやすさを調整できます。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Previewテキスト装飾と変換
text-decorationで下線などを、text-transformで大文字・小文字変換ができます。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview自由に試してみよう
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview