【2026年7月最新】HTMLのfontタグ完全ガイド｜文字の色・サイズ・フォント指定とCSS代替・Claude Code活用法

この記事の内容

1. 01HTMLのfontタグとは？基本と非推奨になった理由
2. 02font colorで文字の色を変える方法
3. 03色の指定方法：カラー名・HEX・RGB・HSL
4. 04font sizeで文字のサイズを変える方法
5. 05font faceでフォントの種類を変える方法
6. 06fontタグの注意点：非推奨でCSSに移行すべき理由
7. 07CSSのcolorプロパティで文字色を変える（現代の方法）
8. 08CSSのfont-size/font-familyでサイズ・フォントを変える
9. 09fontタグからCSSへの書き換え方：移行パターン集
10. 10Claude CodeでHTMLのスタイリングを効率化する
11. FAQよくある質問

📚 用語解説

非推奨（deprecated）と廃止（obsolete）の違い：HTMLの文脈で「非推奨（deprecated）」はHTML 4.01時代の表現で「将来的に使えなくなるかもしれないため代替方法を使うことを推奨」という意味だった。HTML5では「廃止（obsolete）」という概念に変わり、fontタグはobsoleteに分類されている。ブラウザは後方互換性のため表示はするが、仕様書では使用を禁止しており、新規コードには絶対に使うべきではない。

<!-- fontタグの基本構文 -->
<font color="red" size="4" face="Arial">この文字は赤色・サイズ4・Arial</font>

<!-- 属性は3種類 -->
<font color="色">文字の色</font>
<font size="数値">文字のサイズ（1〜7）</font>
<font face="フォント名">フォントの種類</font>

<!-- 複数の属性を組み合わせも可能 -->
<font color="#0066cc" size="5" face="Verdana">組み合わせ例</font>

<!-- カラー名で指定 -->
<font color="red">赤い文字</font>
<font color="blue">青い文字</font>
<font color="green">緑の文字</font>

<!-- HEXカラーコードで指定 -->
<font color="#FF0000">赤（HEX）</font>
<font color="#0066CC">青（HEX）</font>
<font color="#333333">ダークグレー（HEX）</font>

<!-- RGB値で指定 -->
<font color="rgb(255, 0, 0)">赤（RGB）</font>
<font color="rgb(0, 102, 204)">青（RGB）</font>

「#FF0000」のHEXカラーはRRGGBBの形式です。FFは16進数で255（赤を最大）、00は0（緑と青は0）を意味します。「#333333」のように同じ値が繰り返す場合は「#333」と3桁に省略できます。デザインツール（Figma・Photoshop等）のカラーピッカーでHEX値をコピーして使うのが一般的です。

📚 用語解説

HEXカラーコード（16進数カラー）：HTMLやCSSで色を指定する「#FF0000」のような6桁の16進数表記。「#」の後にRed（赤）・Green（緑）・Blue（青）各2桁の16進数（00〜FF）が続く。FFは255（最大）、00は0（最小）を意味する。「#000000」が黒（全て最小）、「#FFFFFF」が白（全て最大）、「#FF0000」が赤（赤のみ最大）。デザイナーから渡されるデザインカンプのカラーコードをそのままCSSに転記して使う。

<!-- HTMLでよく使われるカラー名の例 -->
<font color="black">黒: #000000</font>
<font color="white">白: #FFFFFF</font>
<font color="red">赤: #FF0000</font>
<font color="blue">青: #0000FF</font>
<font color="green">緑: #008000</font>
<font color="gray">グレー: #808080</font>
<font color="orange">オレンジ: #FFA500</font>
<font color="purple">紫: #800080</font>
<font color="pink">ピンク: #FFC0CB</font>
<font color="navy">ネイビー: #000080</font>
<font color="gold">ゴールド: #FFD700</font>
<font color="tomato">トマト（赤寄り）: #FF6347</font>

<!-- 絶対サイズで指定（1〜7） -->
<font size="1">サイズ1（最小）</font>
<font size="2">サイズ2</font>
<font size="3">サイズ3（デフォルト）</font>
<font size="4">サイズ4</font>
<font size="5">サイズ5</font>
<font size="6">サイズ6</font>
<font size="7">サイズ7（最大）</font>

<!-- 相対サイズで指定（現在のデフォルト3を基準） -->
<font size="+2">デフォルト+2 = サイズ5</font>
<font size="-1">デフォルト-1 = サイズ2</font>

font size属性の「1〜7」はピクセル数ではなく独自の相対的なサイズ番号です。実際のピクセルサイズはブラウザのデフォルトフォントサイズに依存します。CSSのfont-size: 16pxやfont-size: 1.5emのように、ピクセルやem等で直接サイズを指定できるCSSの方がはるかに柔軟です。

📚 用語解説

emとremの違い（CSSフォントサイズ）：CSSのfont-sizeでよく使われる単位。「em」は親要素のフォントサイズを1とした相対値で、親が16pxなら1em=16px、2em=32pxとなる。「rem」はルート要素（html要素）のフォントサイズを1とした相対値。remは親の影響を受けず、「html { font-size: 16px; }」なら常に1rem=16px。レスポンシブデザインではremを使うのがベストプラクティスとされる。

<!-- face属性でフォントを指定 -->
<font face="Arial">Arial フォント（サンセリフ体）</font>
<font face="Times New Roman">Times New Roman（セリフ体）</font>
<font face="Courier New">Courier New（等幅フォント）</font>
<font face="Verdana">Verdana フォント</font>
<font face="MS ゴシック">MS ゴシック（日本語フォント）</font>

<!-- フォールバックを複数指定（カンマ区切り） -->
<font face="Helvetica, Arial, sans-serif">
  Helveticaがなければ Arial、それもなければ sans-serif
</font>

fontタグのface属性でもCSSのfont-familyでも、複数のフォントをカンマ区切りで並べて「フォールバック」を設定します。「Arial, Helvetica, sans-serif」と書いた場合、Arialがない環境ではHelveticaを、それもない場合は総称ファミリーのsans-serifを使います。最後に必ずsans-serif・serif・monospaceのいずれかの総称ファミリーを指定するのがルールです。

📚 用語解説

HTML/CSSの関心の分離（Separation of Concerns）：Web制作における設計原則の1つ。HTMLはWebページの構造（見出し・段落・リスト等のコンテンツの意味）を定義し、CSSは見た目（色・サイズ・レイアウト等のプレゼンテーション）を担当するという分担。fontタグは1つのHTMLタグで「見た目のスタイル」を定義してしまうため、この原則に反する。同じサイト内の100ページで同じフォント設定を変えたい場合、fontタグだと100ページ全てを修正しなければならないが、CSSなら1つのCSSファイルを変更するだけで全ページに反映される。

HTML5では既存コードの後方互換性のためブラウザはfontタグを表示しますが、新規作成するHTMLにfontタグを書くのは絶対に避けてください。W3CのHTML5仕様では明示的に「使ってはならない（MUST NOT）」と記されています。既存の古いコードのfontタグは見つけ次第CSSに置き換えることを推奨します。

/* 外部CSSファイル（style.css等）に書く方法 */
.text-red { color: red; }
.text-blue { color: #0066CC; }
.text-dark { color: #333333; }

/* RGBA（半透明テキスト）*/
.text-transparent { color: rgba(0, 0, 0, 0.5); }

/* CSS変数を使う（デザインシステム用） */
:root {
  --color-primary: #DC2626;
  --color-text: #1a1a1a;
}
.heading { color: var(--color-primary); }
.body-text { color: var(--color-text); }

<!-- インラインstyle属性（推奨度は低い） -->
<p style="color: red;">赤い文字</p>
<p style="color: #0066CC;">青い文字</p>
<p style="color: rgba(255, 0, 0, 0.5);">半透明の赤</p>

<!-- CSSクラスを使う（推奨） -->
<p class="text-primary">プライマリカラーの文字</p>
<p class="text-secondary">セカンダリカラーの文字</p>

<!-- spanタグでテキストの一部だけに色を適用 -->
<p>通常テキスト、<span style="color: red;">ここだけ赤</span>、また通常テキスト</p>

/* font-size: 文字サイズ指定 */
h1 { font-size: 32px; }    /* ピクセル指定 */
p  { font-size: 1rem; }    /* rem（ルートフォントサイズ基準） */
small { font-size: 0.875rem; } /* 14px相当（16pxベース） */
.large { font-size: 1.25em; } /* 親要素の1.25倍 */

/* レスポンシブ（画面サイズで変える） */
h1 { font-size: 24px; }
@media (min-width: 768px) {
  h1 { font-size: 36px; }
}

/* font-family: フォント種類指定 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
}
code {
  font-family: "Courier New", Consolas, "Lucida Console", monospace;
}

/* Google Fonts（Webフォント）の読み込み */
/* HTMLのheadに: <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> */
body { font-family: "Noto Sans JP", sans-serif; }

📚 用語解説

システムフォントスタック（system-ui）：OSや端末にデフォルトでインストールされているフォントを優先して使う設定。「-apple-system」はAppleデバイスでSan Franciscoを使い、「BlinkMacSystemFont」はmacOS ChromeでSan Franciscoを使い、「Meiryo」はWindowsで游明朝より読みやすいフォントを使う。Webフォント（外部フォントファイル）を使わないため読み込みが速く、ユーザーが慣れ親しんだフォントで表示される。プロのWeb制作でもシステムフォントスタックはfont-familyの一般的な選択肢の1つ。

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？