文字はWebサイトの基本的な情報伝達手段。 CSSを使えば、もっと読みやすく、見た目を印象的にできます！ 本記事では、文字周りのCSSプロパティをまとめてやさしく解説します。 font-weightで太さを調整 h1 { font-weight: bold; /* 太字 */ } p.light { font-weight: 300; /* やわらかい印象 */ } letter-spacingで文字間を広げる h2 { letter-spacing: 2px; } text-transformで大文字／小文字を統一 button { text-transform: uppercase; /* 全て大文字 */ } text-shadowで文字に影を追加 p.shadow { text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } 応用例まとめ h1 { font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); } まとめ 文字装飾は、見た目の印象や可読性を大きく変える力があります。 覚えておくと、ヘッダー・ボタンラベル・引用などの演出にすぐ使えます！
