CSS基本講座3 テキストとフォント

こんにちは！
今回は、CSSで テキストの見た目を整える方法 を紹介します。

• フォントの種類やサイズを変えたい
• テキストを中央に揃えたい
• 長い文章を折り返したい
• 文字に影をつけたい

そんなときに使える、よく使うプロパティを一気に学んでいきましょう！

---

CSS基本講座3 テキストとフォント

フォントを変える font-family

📌 使いどころ
文字の「書体（フォント）」を変えたいときに使います。

📖 書き方

セレクタ {
  font-family: フォント名, 予備フォント;
}

💡 例：メイリオを指定

文字サイズを変える font-size

📌 使いどころ
文字の大きさを調整したいときに使います。

💡 例

テキストを中央にそろえる text-align

📌 使いどころ
文字を中央・右寄せ・左寄せに整えたいときに使います。

💡 例：中央ぞろえ

テキストを折り返す word-break & white-space

📌 使いどころ
長い英単語やURLなどを強制的に折り返したいときに使います。

📖 よく使う組み合わせ

word-break: break-word;
white-space: normal;

💡 例

文字に影をつける text-shadow

📌 使いどころ
文字に影をつけて、立体感や強調効果を出したいときに使います。

📖 書き方

text-shadow: 横ずれ 縦ずれ ぼかしの範囲 色;

💡 例

まとめ

プロパティ	内容	よく使う値の例
font-family	フォントの種類を指定	"メイリオ", sans-serif
font-size	文字サイズを指定	16px, 1.5rem
text-align	文字の配置を指定	left, center, right
word-break	単語の途中で折り返しを許可	break-word
white-space	空白や改行の扱いを指定	normal, nowrap, pre-line
text-shadow	テキストに影をつける	2px 2px 5px gray

CSSでテキストの装飾ができるようになると、文章の見た目をグッと整えることができます！
シンプルなものから、少しずつ試してみてくださいね。