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はカンマ区切りで複数指定でき、最初のフォントがなければ次が使われます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
8 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
太さ・行間・文字間隔
font-weight、line-height、letter-spacingで読みやすさを調整できます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
14 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
テキスト装飾と変換
text-decorationで下線などを、text-transformで大文字・小文字変換ができます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
11 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
自由に試してみよう
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
3 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。