みかおば
📘 CSS初心者のみかおばです！
今回は 文字の種類（フォント）を変える方法 を紹介します😊
使うプロパティは font-family です。
🎨 フォントを指定してみよう（font-family）
文字のフォント（書体）は font-family プロパティで指定します。
p {
font-family: Arial;
}
👉 この場合、段落（p要素）の文字が「Arial」というフォントで表示されます。
🔖 フォントの指定方法
フォントには大きく分けて2種類あります。
- 英字フォント（Arial, Times New Roman, Verdana など）
- 日本語フォント（游ゴシック, メイリオ, ヒラギノ角ゴシックなど）
💡 日本語フォントを指定するときは '游ゴシック' のように クォーテーションで囲む のが安心です。
🖊 フォントスタックって？
パソコンやスマホによって「入っているフォント」が違うので、1つだけ書くと表示されないこともあります。
そこで「第一希望 → なければ次 → 最後は一般カテゴリ」という風に並べるのがフォントスタックです。
p {
font-family: "游ゴシック", "メイリオ", sans-serif;
}
👉 「游ゴシック」があればそれを使う、なければ「メイリオ」、どちらもなければ「sans-serif（ゴシック体系）」を使う、という意味になります。
💻 実際のコード例（本文と見出し）
HTML部分
<h1 class="title">サイトのタイトル</h1>
<h2 class="subtitle">サブタイトル見出し</h2>
<p class="gothic">ゴシック体の本文テキスト</p>
<p class="serif">明朝体の本文テキスト</p>
CSS部分
/* 見出し（太めのゴシック体） */
.title {
font-family: "游ゴシック", "メイリオ", sans-serif;
}
/* 見出し（明朝体で上品に） */
.subtitle {
font-family: "游明朝", "ヒラギノ明朝 ProN", serif;
}
/* 本文（ゴシック体） */
.gothic {
font-family: "游ゴシック", "メイリオ", sans-serif;
}
/* 本文（明朝体） */
.serif {
font-family: "游明朝", "ヒラギノ明朝 ProN", serif;
}
👀 実際の表示結果
サイトのタイトル
サブタイトル見出し
ゴシック体の本文テキスト
明朝体の本文テキスト
- h1 → ゴシック体で太めに表示
- h2 → 明朝体で表示
- p.gothic → ゴシック体で表示
- p.serif → 明朝体で表示
🌐 Google Fonts を使ってみよう
Webフォントサービスを使うと、パソコンに入っていないフォントでも表示できます。
有名なのは Google Fonts。
例：Roboto（ロボト）フォントを使う場合
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
p {
font-family: 'Roboto', sans-serif;
}
👉 このコードを <head> に入れれば、ブラウザがGoogleからフォントを読み込んで表示してくれます。
✅ ポイントまとめ
- フォントは
font-familyで指定する - 日本語フォントはクォーテーションで囲むのが安心
- フォントスタックを使って「なければ次」を指定するのが基本
- 見出し（h1, h2）と本文（p）を分けて指定するとサイト全体が整う
- Webフォント（Google Fonts）を使えば、端末に依存せず表示できる
HTMLやデザインに興味がある方に、おすすめリンクです👇
📌 次回予告
【第4回】文字の装飾をしてみよう
→ font-weight や font-style を使って 太字・斜体 に。text-decoration で 下線や取り消し線 をつけて、文章にアクセントを加えていきます😊
🔖 この回で出てきたプロパティ
コメント