過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>フォント関連プロパティ</strong>は文字の見た目を制御する CSS の中核。種別 / サイズ / 太さ / 斜体などを指定</li><li>主要 5 プロパティ: <code>font-family</code> / <code>font-size</code> / <code>font-weight</code> / <code>font-style</code> / <code>line-height</code></li><li>一括指定: <code>font: italic bold 16px/1.5 "Noto Sans JP", sans-serif;</code> &mdash; 順序とサイズ必須</li><li>Web フォント: <code>@font-face</code> で独自フォント、Google Fonts なら <code><link></code> 1 行で導入</li><li>パフォーマンス: <code>font-display: swap</code> で<strong>フォント読み込み待ちの白画面</strong>を防ぐ</li></ul></td></tr></table>
<h2>CSS フォント関連プロパティ概観</h2>

<p>CSS でフォントを指定するプロパティは複数あり、それぞれが文字の<strong>種別・サイズ・太さ・スタイル・行間</strong>を担当します。本記事では主要なプロパティの使い分けと、Web フォントの導入方法までを整理します。</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>プロパティ</th><th>用途</th><th>例</th></tr></thead>
<tbody>
<tr><td><code>font-family</code></td><td>書体の種類</td><td><code>"Noto Sans JP", sans-serif</code></td></tr>
<tr><td><code>font-size</code></td><td>文字サイズ</td><td><code>16px</code> / <code>1.2rem</code> / <code>110%</code></td></tr>
<tr><td><code>font-weight</code></td><td>文字の太さ</td><td><code>normal</code> / <code>bold</code> / <code>700</code></td></tr>
<tr><td><code>font-style</code></td><td>斜体 / 通常</td><td><code>italic</code> / <code>normal</code></td></tr>
<tr><td><code>font-variant</code></td><td>スモールキャップス等</td><td><code>small-caps</code></td></tr>
<tr><td><code>line-height</code></td><td>行の高さ</td><td><code>1.5</code> / <code>24px</code></td></tr>
<tr><td><code>font</code></td><td>上記の一括指定</td><td><code>bold 16px/1.5 sans-serif</code></td></tr>
<tr><td><code>letter-spacing</code></td><td>字間</td><td><code>0.05em</code></td></tr>
<tr><td><code>word-spacing</code></td><td>単語間</td><td><code>0.2em</code></td></tr>
<tr><td><code>text-transform</code></td><td>大文字小文字</td><td><code>uppercase</code></td></tr>
</tbody>
</table>

<h2>font-family &mdash; 書体の指定</h2>

<p>カンマ区切りで<strong>複数指定</strong>すると、左から順にユーザー環境にインストール済みのフォントを探します。最後に<strong>総称ファミリ</strong> (sans-serif / serif / monospace) を必ず指定。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* 日本語サイトの定番 */
body {
    font-family:
        "Hiragino Sans",          /* Mac */
        "Yu Gothic",              /* Windows */
        "Noto Sans JP",           /* Web フォント */
        sans-serif;               /* 最終フォールバック */
}

/* 等幅フォント (コード表示) */
code {
    font-family:
        "Source Code Pro",
        "Consolas",
        "Menlo",
        monospace;
}</code></pre>
<p>フォント名に<strong>スペースが含まれる場合</strong>はクォートで囲みます。</p>

<h2>font-size &mdash; 文字サイズ</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>単位</th><th>意味</th><th>使いどころ</th></tr></thead>
<tbody>
<tr><td><code>px</code></td><td>絶対サイズ</td><td>固定したい部分</td></tr>
<tr><td><code>em</code></td><td>親要素のフォントサイズ基準</td><td>相対調整</td></tr>
<tr><td><code>rem</code></td><td>ルート (html) のサイズ基準</td><td><strong>推奨</strong>。ユーザー設定が効く</td></tr>
<tr><td><code>%</code></td><td>親要素基準</td><td>em と同じ</td></tr>
<tr><td><code>vw</code></td><td>ビューポート幅基準</td><td>レスポンシブな見出し</td></tr>
<tr><td>clamp()</td><td>最小〜推奨〜最大</td><td>流動タイポグラフィ</td></tr>
</tbody>
</table>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">html { font-size: 16px; }       /* 1rem = 16px */

h1 { font-size: 2rem; }         /* 32px */
p  { font-size: 1rem; }         /* 16px */

/* レスポンシブな見出し (320px〜1200px で 24px〜48px) */
h1.fluid {
    font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}</code></pre>
<h2>font-weight &mdash; 太さ</h2>

<p>キーワードと数値の両方で指定できます。数値は<strong>100〜900 の 100 刻み</strong>。</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>数値</th><th>キーワード</th><th>呼び名</th></tr></thead>
<tbody>
<tr><td>100</td><td>-</td><td>Thin</td></tr>
<tr><td>300</td><td>-</td><td>Light</td></tr>
<tr><td>400</td><td><code>normal</code></td><td>Regular</td></tr>
<tr><td>500</td><td>-</td><td>Medium</td></tr>
<tr><td>700</td><td><code>bold</code></td><td>Bold</td></tr>
<tr><td>900</td><td>-</td><td>Black</td></tr>
</tbody>
</table>

<p>フォントが該当ウェイトを持たない場合、ブラウザが最も近いウェイトで代用するため、<strong>細い指定が太く見える</strong>ことがあります。</p>

<h2>font 一括指定</h2>

<p><code>font</code> ショートハンドは複数プロパティを 1 行で指定できますが、<strong>順序とサイズが必須</strong>。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* 構文: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family */
body {
    font: italic bold 16px/1.5 "Noto Sans JP", sans-serif;
}

/* シンプル版 */
p {
    font: 14px sans-serif;       /* size と family は必須 */
}</code></pre>
<p><strong>注意</strong>: 一括指定は<strong>指定していないプロパティを初期値にリセット</strong>するため、既存の <code>font-weight</code> 等を残したい場合は個別指定の方が安全です。</p>

<h2>Web フォントの導入</h2>

<h3>方法1: Google Fonts (簡単)</h3>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head></code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">body {
    font-family: "Noto Sans JP", sans-serif;
}</code></pre>
<h3>方法2: @font-face で自前ホスト</h3>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">@font-face {
    font-family: "MyFont";
    src: url("/fonts/MyFont.woff2") format("woff2"),
         url("/fonts/MyFont.woff")  format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;            /* 重要 */
}

body { font-family: "MyFont", sans-serif; }</code></pre>
<p><code>font-display: swap</code> をつけると、フォント読み込み中は<strong>システムフォントで表示</strong>し、後で差し替わります。これで FOIT (Flash of Invisible Text = 白画面) を防げます。</p>

<h2>FAQ</h2>

<p><strong>Q: 日本語 Web フォントは重い</strong><br />
A: 平均 5〜10MB ある。サブセット化（使う文字だけ抽出）か、Adobe Fonts / Google Fonts の動的サブセット (woff2) を使う。</p>

<p><strong>Q: <code>!important</code> が効かないことがある</strong><br />
A: ブラウザの最小フォントサイズ設定が優先される。Chrome は設定 > 外観 > カスタマイズで変更可。</p>

<p><strong>Q: ベンダーフォント名を間違えるとどうなる</strong><br />
A: そのフォントを無視して次の候補へ。<strong>必ず総称ファミリ</strong> (<code>sans-serif</code> など) で終わらせれば安全。</p>