【2026年7月最新】HTMLのfontタグとは？size/color/face属性の使い方とCSS移行・非エンジニア向け活用ガイド
aikanri-admin
この記事の内容
「HTMLのfontタグって、今でも使えるの？」「CSSって何が違うの？」——Webサイトを運営している経営者や、社内でHP更新を担当している方から、こういった質問をよく受けます。
HTMLのfontタグは、Webページ上の文字の種類・大きさ・色を指定するためのタグとして1990年代のインターネット黎明期から使われてきました。しかし現在のWebの標準規格（HTML5）では非推奨（廃止予定）扱いとなっており、現代のWeb制作では代わりにCSS（スタイルシート）を使うことが求められています。
「でも古いサイトのコードを見るとfontタグがたくさん残っている」「リニューアルしたいが何から手をつければいいか分からない」——そんな悩みを持つ方のために、この記事ではfontタグの基礎から始めて、CSS移行の具体的なステップ、そして最終的にClaude CodeというAIツールでHTML作業を自動化する方法まで、一気通貫で解説します。
代表菅澤
AI鬼管理山崎
この記事を読むと、次のことが分かります。
01 FONT TAG BASICS HTMLのfontタグとは何か――基礎から丁寧に解説 Webの文字を装飾する古典的なタグの仕組みと歴史
HTMLの<font>タグは、Webページ上に表示するテキストの「見た目」を直接指定するためのタグです。具体的には「文字を大きくする」「文字を赤くする」「フォントをゴシック体にする」といった見た目の変更を、HTMLタグの中に直接書き込むことができます。
1990年代から2000年代初頭にかけてのWebサイトは、CSSという仕組みが普及する前の時代でした。このころのWeb開発者は、HTMLの中に見た目の指定をすべて書き込んでおり、その中でも文字のスタイルを変えるfontタグは非常に頻繁に使われていました。インターネット上に今でも残っている古いHTMLファイルを開くと、fontタグが大量に使われているコードを見かけることがあるのは、そういった歴史的背景があるためです。
📚 用語解説
HTMLタグ：Webページの構造や意味を定義するための記号のこと。「<」と「>」で囲まれた文字列で表現されます。例えば <p> は「ここから段落が始まる」を意味し、<h1> は「ここが最大見出し」を示します。タグは通常「開始タグ」と「終了タグ」のペアで使います（<p>本文</p>）。
1-1. fontタグの基本構文
fontタグの基本的な書き方（構文）は以下のとおりです。開始タグ<font>と終了タグ</font>の間に、スタイルを変えたいテキストを挟みます。
このテキストのフォントが変わります
</font>
上記の例では、size="3"でフォントサイズを3番（中サイズ）に、color="red"で文字色を赤に、face="Arial"でフォントをArialに指定しています。このようにfontタグは1つのタグで複数のスタイルを同時に指定できるため、当時のWeb開発者にとって非常に便利なツールでした。
📚 用語解説
属性（attribute）：HTMLタグの中に書き込む追加情報のこと。タグの動作や見た目を詳しく指定するために使います。例えば <font color="red"> の「color="red"」の部分が属性です。属性は「属性名="値"」の形式で書き、複数の属性をスペースで区切って並べることができます。
1-2. fontタグはどんな場面で使われてきたか
fontタグが広く使われていた1990年代後半〜2000年代前半には、多くの企業サイトや個人のホームページ（当時はまだ「Webサイト」という言葉も一般的でありませんでした）にfontタグが組み込まれていました。当時のホームページ作成ツール（ホームページビルダーなど）も、内部的にfontタグを大量に生成していたため、その時代に作られたサイトをリニューアルしようとすると、コードの中にfontタグが大量に埋まっていることがよくあります。
現在でも以下のような状況でfontタグを目にすることがあります。
既存サイトのHTMLにfontタグが含まれていても、すぐにブラウザ表示が壊れるわけではありません（現時点では主要ブラウザがまだ対応しているため）。ただし将来的にブラウザのサポートが打ち切られるリスクがあるため、サイトリニューアルや大規模な改修のタイミングでCSSへ移行しておくことを強く推奨します。
代表菅澤
02 FONT ATTRIBUTES fontタグの3つの属性（size/color/face）を完全解説 各属性の値の指定方法と実際の表示効果をまとめて理解する
fontタグで指定できる属性は主に3つあります。size（サイズ）・color（色）・face（書体）です。それぞれの使い方と注意点を詳しく解説します。
2-1. size属性：文字の大きさを指定する
size属性は、文字の大きさを1〜7の整数で指定します。数字が大きいほど文字が大きくなり、デフォルトは3です。また「+2」「-1」のように現在のサイズからの相対値で指定することもできます。
| size値 | 対応するHTMLの見た目のサイズ | 備考 |
|---|---|---|
| 1 | 最小（約8px相当） | 読みにくいほど小さい |
| 2 | 小（約10px相当） | キャプション程度 |
| 3 | 標準（約12px相当） | デフォルト値 |
| 4 | やや大きめ（約14px相当） | 見出し的な用途 |
| 5 | 大（約18px相当） | 強調に使うことが多い |
| 6 | 特大（約24px相当） | タイトル程度 |
| 7 | 最大（約36px相当） | 大バナー等での使用 |
ただし注意点として、fontタグのsize属性で指定できるのは相対的なサイズであり、ピクセル（px）での細かい指定はできません。そのため、現代のWebデザインで求められる精密なサイズ制御にはまったく対応できないのが実態です。レスポンシブデザイン（スマートフォン対応）が当たり前になった今、fontタグのサイズ指定は制御精度が著しく低いという欠点が際立ちます。
size属性に1〜7以外の値（例: size="10"）を指定しても、ブラウザは7相当として処理するか、無視します。また相対指定（+1など）の場合も、基準サイズ(3)との合計が7を超える場合は7として扱われます。予想と異なる表示になることがあるため、CSSでpxやremを使う方が安全で確実です。
2-2. color属性：文字の色を指定する
color属性では、テキストの色を指定します。色の指定方法は2種類あります。ひとつは色の名前（カラーネーム）、もうひとつは16進数カラーコードです。
| 指定方法 | 例 | 特徴 |
|---|---|---|
| カラーネーム | color="red" | 英語の色名で直感的に分かりやすい。対応色数は約140種類 |
| 16進数カラーコード | color="#FF0000" | より精密な色指定が可能。約1677万色を表現できる |
📚 用語解説
16進数カラーコード：色をRGB（赤・緑・青）の3成分で表した6桁の文字列。「#」の後に赤(RR)・緑(GG)・青(BB)の順で16進数（0〜FF）を並べて表現します。例：#FF0000（純粋な赤）、#0000FF（純粋な青）、#000000（黒）、#FFFFFF（白）。Webデザインでは必須の知識です。
カラーネームは直感的で覚えやすいですが、指定できる色数が限られています。Webデザインで使われる微妙な色合い（薄いグレー、特定のブランドカラーなど）を正確に再現するには、16進数カラーコードの方が適しています。ただし、どちらの方法であっても、fontタグのcolor属性での色指定はCSSのcolorプロパティに置き換えることが推奨されます。
AI鬼管理山崎
2-3. face属性：フォント（書体）を指定する
face属性は、テキストに使うフォント（書体・タイプフェイス）を指定します。フォント名は英語でカンマ区切りで複数指定でき、最初に指定したフォントがインストールされていない場合、次のフォントが適用される仕組みです。
このテキストはArialで表示されます
</font>
上の例では、まずArialを探し、なければHelvetica、それもなければブラウザのデフォルトのsans-serif（ゴシック体系の汎用フォント）を使う、という優先順位を指定しています。この「フォールバック指定」は、見る人の環境（Windows・Mac・スマートフォン等）によってインストールされているフォントが異なるため、表示崩れを防ぐための工夫です。
📚 用語解説
フォントファミリー（font-family）：Webページで使用するフォント（書体）の名称や種類のこと。Windowsには游ゴシックや游明朝、MacにはHiraginoシリーズが標準搭載されています。CSSのfont-familyプロパティでは複数のフォントをカンマ区切りで指定でき、最初から順番に探して見つかったフォントを使う「フォールバック」の仕組みになっています。
2-4. 複数属性を組み合わせた実例
実際の使用例として、size・color・faceの3つを組み合わせた書き方を見てみましょう。属性の順序は問いませんが、慣習的にsize → color → faceの順が多いです。
<font size="5" color="#dc2626" face="Arial, sans-serif">
強調したい重要なテキスト
</font>
/* 入れ子（ネスト）にして適用範囲を変える */
<p><font color="#dc2626">赤くしたい部分だけ囲む</font></p>
<font size="5"
color="#dc2626">
スタイルを変えたい
テキスト本文
</font>
タグを忘れずに
指定した見た目で
レンダリング
fontタグは開いたら必ず閉じる必要があります。</font> を忘れると、それ以降のページ全体のテキストが指定したスタイルで表示されてしまう場合があります。HTML5では閉じタグを省略できるものもありますが、fontタグはHTML4以前の仕様のため、必ず対応する</font>を書くようにしましょう。
代表菅澤
03 DEPRECATION REASON fontタグが非推奨になった理由とHTML5の考え方 なぜ現代のWebでfontタグを使ってはいけないのか、設計思想から理解する
fontタグはなぜ使ってはいけないのでしょうか。「古いから」というだけでは本質的な理由を理解したことになりません。HTML5でfontタグが非推奨とされた背景には、Webの設計思想の根本的な変化があります。
3-1. 「コンテンツ」と「デザイン」を分離するという原則
現代のWebの設計原則は、「コンテンツ（内容）」と「プレゼンテーション（見た目）」を分離するというものです。HTMLは文書の意味・構造を定義するものであり、見た目のスタイルはCSSが担当するという役割分担が明確になりました。
fontタグは「見た目の指定をHTMLに直接書き込む」という古い考え方に基づいています。例えば100ページあるWebサイトで、全ページの本文フォントをArial から游ゴシックに変更しようとしたとき、fontタグで書かれたサイトでは100ページ全ページのfontタグを1つずつ書き換えなければなりません。しかしCSSで管理されていれば、CSSファイルの1行を変更するだけで全ページに反映できます。
📚 用語解説
CSS（Cascading Style Sheets）：Webページの見た目（フォント・色・レイアウト・余白など）を定義するための言語。HTMLが「ここは見出し」「ここは本文」という文書の構造を定義するのに対し、CSSは「見出しは赤文字で24px」「本文は游ゴシックで14px」という見た目の情報を管理します。HTMLとCSSを分けることで、デザインの一括変更や管理が大幅に容易になります。
3-2. セマンティックHTMLという考え方
HTML5が導入した重要な概念がセマンティックHTMLです。「semantic（セマンティック）」は「意味のある」という意味で、HTMLタグはそれぞれ文書上の「意味」を持つべきだという考え方です。
例えば<h1>は「最重要の見出し」という意味を持ちます。<nav>は「ナビゲーション」、<article>は「独立したコンテンツ」を意味します。これらのタグを正しく使うことで、Googleなどの検索エンジンや音声読み上げソフトが文書の構造を正確に把握できます。
一方でfontタグは「文字を赤くする」という視覚的な指示しか持っていません。「この文章が重要だから強調したいのか」「ブランドカラーで統一したいのか」という意味は機械には分かりません。セマンティックHTMLの観点から、fontタグは「意味のないスタイル指定タグ」として非推奨になったわけです。
📚 用語解説
セマンティックHTML：HTMLタグをその見た目ではなく「意味」に基づいて使うこと。例えば文字を太字にしたいだけなら <b> タグより <strong> タグ（強調という意味を持つ）を使うべきです。セマンティックなHTMLはSEO（検索エンジン最適化）やアクセシビリティ（障害を持つ方への配慮）の観点から重要視されています。
3-3. アクセシビリティとモバイル対応の問題
fontタグが廃止される方向になったもうひとつの大きな理由は、アクセシビリティ（Accessibility）への対応です。アクセシビリティとは、障害を持つ方も含めたすべての人がWebサービスを使えるようにすることを指します。
視覚障害を持つユーザーが使うスクリーンリーダー（音声読み上げソフト）は、fontタグの指定を「スタイル情報」として無視することが多いです。そのためfontタグで赤くして「重要」と示しても、スクリーンリーダーのユーザーには伝わりません。CSSと組み合わせた<strong>タグや<em>タグなら、「強調」という意味も同時に機械に伝えることができます。
さらに、スマートフォン・タブレットが普及した現在、画面サイズが様々な端末に対応するレスポンシブデザインが必須となっています。fontタグの固定的なサイズ指定では、スマートフォンの小さな画面でテキストが適切に表示されない問題が起きやすく、ここでもCSS（特にメディアクエリ）の方が圧倒的に柔軟です。
現時点（2026年7月）では主要ブラウザ（Chrome・Firefox・Safari・Edge）はまだfontタグを解釈して表示できます。しかし各ブラウザはW3C（Web標準化機関）の方針に従い、将来的にfontタグのサポートを打ち切る可能性があります。大きなビジネスリスクにつながる前に、CSSへの移行を計画的に進めることを推奨します。
AI鬼管理山崎
04 CSS FONT STYLING CSSでフォントを正しく指定する方法 fontタグからCSSへの移行ステップと具体的なコード例
では実際に、fontタグで指定していた内容をCSSに書き直すにはどうすればよいでしょうか。fontタグの3属性（size・color・face）それぞれに対応するCSSプロパティがあります。対応関係を整理して、具体的な書き換え方を解説します。
| fontタグ属性 | 例 | 対応するCSSプロパティ | CSSの例 |
|---|---|---|---|
| size | size="5" | font-size | font-size: 18px; |
| color | color="#dc2626" | color | color: #dc2626; |
| face | face="Arial, sans-serif" | font-family | font-family: Arial, sans-serif; |
4-1. font-sizeプロパティ：文字サイズをピクセルで精密指定
CSSのfont-sizeプロパティを使えば、fontタグのsize属性では不可能だったピクセル（px）単位での精密な文字サイズ指定ができます。また、相対単位のemやremを使えば、親要素や基準サイズからの相対指定も可能です。
<p style="font-size: 18px;">大きめのテキスト</p>
/* ② CSSファイルにクラスで定義する方法（推奨） */
/* CSSファイル側 */
.large-text { font-size: 18px; }
/* HTMLファイル側 */
<p class="large-text">大きめのテキスト</p>
📚 用語解説
px（ピクセル）：Webデザインで使われる長さの単位。1pxは画面の最小表示単位1ドットに相当します。CSSでは他にも「em（親要素のフォントサイズを基準とした相対値）」「rem（ルート要素のフォントサイズを基準とした相対値）」「%（パーセンテージ）」などの単位も使えます。スマートフォン対応では相対単位（em・rem）の方が柔軟に対応できます。
4-2. colorプロパティ：より豊かな色表現
CSSのcolorプロパティはfontタグのcolor属性と同じように16進数カラーコードやカラーネームで色を指定できます。さらにCSSではrgba（透明度付きRGB）やhsl（色相・彩度・明度）などの表記も使え、より柔軟な色管理が可能です。
.red-text { color: #dc2626; }
/* rgba（透明度付き）で指定 */
.semi-transparent { color: rgba(220, 38, 38, 0.7); }
/* カラーネームで指定 */
.blue-text { color: royalblue; }
4-3. font-familyプロパティ：フォントのフォールバックを適切に設定
CSSのfont-familyプロパティは、fontタグのface属性と同様にフォント名をカンマ区切りで複数指定できます。違いは、CSSなら1つの定義でページ全体・特定のセクション・特定のクラスに適用できる点です。fontタグのようにテキストを囲む手間が不要です。
body {
font-family: '游ゴシック', 'Yu Gothic', 'Hiragino Sans', sans-serif;
font-size: 16px;
color: #333333;
}
/* 見出しだけ別フォントにする */
h1, h2, h3 {
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
font-weight: 700;
}
上記のように、bodyセレクタにfont-familyを指定すれば、ページ全体のフォントを1箇所で一括管理できます。以後フォントを変更したくなっても、このCSSの1行を変えるだけでOKです。fontタグでは数百〜数千のタグを書き換える必要があった作業が、わずか1行で済むのです。
font-familyを定義
body { font-family: ... }
自動適用
fontタグなしでOK
CSSを1行変えれば
全ページ即反映
最適表示
スマホ・PCで
自動調整
①まずCSSファイルにbodyのfont-family/font-size/colorを定義する。②HTMLファイル内のfontタグをすべて除去し、テキストをそのまま残す。③スタイルをページごとに変えたい場合はクラス（class属性）を使って指定する。この3ステップで、ほとんどのfontタグはCSSに置き換えられます。
代表菅澤
05 WEB FONTS GUIDE Webフォント完全活用ガイド――Google Fontsの使い方 端末に依存しないフォント表示を実現する現代のベストプラクティス
fontタグのface属性やCSSのfont-familyでフォントを指定しても、ユーザーの端末にそのフォントがインストールされていなければ代替フォントで表示されてしまいます。「Webデザイナーが意図したフォントが見える人と見えない人がいる」という問題を解決するのがWebフォントです。
📚 用語解説
Webフォント：ユーザーの端末にフォントがインストールされていなくても、インターネット経由でフォントデータをダウンロードして表示させる仕組み。Google FontsやAdobe Fontsなどのサービスを利用すれば、誰がどの端末でアクセスしても同じフォントで表示されます。
5-1. Google Fontsとは何か
Google Fontsは、Googleが無料で提供しているWebフォントサービスです。1,500種類以上のフォント（日本語フォントも数十種類以上）を、ライセンス料なしで使用できます。導入は非常にシンプルで、HTMLに数行のコードを追加するだけです。
<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">
/* CSSに追加 */
body { font-family: 'Noto Sans JP', sans-serif; }
上記のコードを追加するだけで、ユーザーの端末にNoto Sans JPがなくても、GoogleのサーバーからフォントデータをダウンロードしてNoto Sans JPで表示してくれます。fontタグで端末依存のフォントを指定していた古い方法と比べると、表示の一貫性が格段に向上します。
5-2. 日本語Webフォントの選び方
日本語フォントはひらがな・カタカナ・漢字・英数字を含むため、英語フォントに比べてデータ量が大きくなります。Webサイトの読み込み速度（ページ速度）はSEOにも影響するため、フォント選択は表示のおしゃれさだけでなくパフォーマンスも考慮して選ぶ必要があります。
| フォント名 | 特徴 | 使いどころ | ファイルサイズ |
|---|---|---|---|
| Noto Sans JP | Googleが開発した可読性の高いゴシック体。7ウェイト。 | 本文・UI全般、迷ったらこれ | 中（最適化済み） |
| Noto Serif JP | 同じく読みやすい明朝体。上品な印象。 | 記事・コンテンツ系サイト、和の雰囲気 | 中 |
| Zen Kaku Gothic New | モダンなゴシック体。可読性が高くスタイリッシュ。 | コーポレートサイト | 中 |
| BIZ UDPGothic | ユニバーサルデザインフォント。太めで読みやすい。 | アクセシビリティ重視のサイト | 小 |
| M PLUS 1p | 丸みのある親しみやすいゴシック体。 | サービス・アプリ系、カジュアル系 | 中 |
Webサイトで使用するフォントは最大2〜3種類に抑えましょう。フォントを増やすほどダウンロードするデータ量が増えてページ読み込みが遅くなります。基本は本文用1種類（ゴシック体）、アクセント用1種類（明朝体や欧文フォント）の組み合わせが定番です。
5-3. @font-faceで自社フォントを使う方法
Googleフォント以外の商用フォント（例：モリサワフォント、フォントワークスフォントなど）をWebサイトで使いたい場合は、@font-faceという仕組みを使います。フォントファイルをサーバーに設置し、CSSで読み込ませる方法です。
📚 用語解説
@font-face：CSSの機能の一つ。Webフォントサービスを使わずに、独自のフォントファイル（.woff2/.woff形式）をサーバーに置いてWebフォントとして使う仕組み。ライセンスを確認した上で使用する必要があります。大企業のブランドサイトでよく使われます。
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/my-font.woff2') format('woff2'),
url('/fonts/my-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body { font-family: 'MyCustomFont', sans-serif; }
商用フォントをWebサイトに埋め込む場合、フォントのライセンスによっては「Webフォントとしての使用」が別途ライセンス契約を必要とする場合があります。購入済みのフォントでも、デスクトップ用ライセンスとWebフォント用ライセンスは異なることが多いため、利用規約を必ず確認してください。
AI鬼管理山崎
06 NON-ENGINEER GUIDE 非エンジニア経営者のためのHTML/CSS理解ガイド Webの「見た目」を理解することが経営判断の質を上げる理由
「HTMLやCSSは技術者に任せればいい」と考える経営者も多いでしょう。確かにコードを自分で書く必要はありませんが、Webの基礎的な仕組みを理解している経営者と理解していない経営者では、制作会社への指示の質・判断のスピード・コスト交渉力に明確な差が生まれます。
6-1. HTML/CSSを理解すると経営判断がどう変わるか
具体的なシナリオで考えてみましょう。サイトリニューアルを制作会社に依頼したとき、「フォントを変えたい」という要件があったとします。CSSの知識があれば「CSSのfont-familyを変えるだけの作業ですよね？」と確認でき、工数・費用の妥当性を自分で判断できます。知識がなければ「font修正：5万円」という見積りの妥当性が判断できず、言い値を払うしかありません。
6-2. 経営者が最低限押さえるべきHTML/CSS用語
HTMLタグ・CSS・セレクタ・クラス・id・レスポンシブ……Web制作の現場では日常的に使われる用語があります。すべてを覚える必要はありませんが、以下の基本概念を押さえておくだけで、制作会社やエンジニアとの会話の質が上がります。
| 用語 | 意味 | 経営者が知ると役に立つ場面 |
|---|---|---|
| HTML | Webページの構造を定義する言語 | コンテンツの追加・修正の難易度を判断するとき |
| CSS | Webページの見た目を定義する言語 | デザイン変更にかかるコスト感を判断するとき |
| レスポンシブ | PC・スマホ等の画面サイズに対応した設計 | スマホ対応の重要性・コストを判断するとき |
| SEO | 検索エンジン最適化 | コンテンツ投資の優先順位を決めるとき |
| ページ速度 | Webページの読み込み速度 | 広告ランディングページのCVR（成約率）を改善するとき |
| アクセシビリティ | 障害者を含む全ユーザーが使えるか | コーポレートガバナンス・ESGの観点で重要 |
代表菅澤
6-3. フォント選択がブランドに与える影響
フォントは「見た目の問題」に見えて、実はブランドイメージと信頼性に直結するビジネス要素です。Webサイトに訪れたユーザーは、文章を読む前にまずフォントを「感じ取っています」。明朝体と游ゴシックでは、同じ文章でも読み手が受け取る印象がまったく変わります。
| フォント系統 | 与える印象 | 向いている業種・ブランド |
|---|---|---|
| ゴシック体（游ゴシック・Noto Sans） | 現代的・クリーン・信頼感 | IT企業・サービス業・スタートアップ・医療 |
| 明朝体（游明朝・Noto Serif） | 上品・伝統・落ち着き | 法律事務所・高級ブランド・老舗・旅館 |
| 丸ゴシック体（M PLUS Rounded） | 親しみやすい・やわらか | 子ども向けサービス・福祉・カフェ・手作り系 |
| 欧文セリフ（Playfair Display等） | 高級感・インターナショナル | ラグジュアリーブランド・コーポレートサイト |
「とりあえずデフォルトフォントでいい」という判断が、ブランディングの機会損失になっていることがあります。競合サイトと比べて「なんとなく安っぽく見える」「信頼感が薄い」と感じるなら、フォント変更だけで改善できるケースが案外多いものです。
AI鬼管理山崎
07 CLAUDE CODE FOR HTML Claude CodeでHTML/CSS作業を自動化する実践方法 fontタグのCSS置き換えからWebフォント設定まで、AIに任せる時代の到来
ここまでfontタグの基礎からCSS移行、Webフォントまでを解説してきました。最後のセクションでは、これらのHTML/CSS作業をClaude Codeというエージェント型AIツールで自動化する実践方法をご紹介します。
弊社（株式会社GENAI）では、WebサイトのHTML更新・CSS調整・フォント変更・レスポンシブ対応といった作業を、Claude Codeを使って大幅に効率化しています。「コードが読めない経営者でも、Claude Codeに日本語で指示するだけでHTML修正ができる」という体験を、多くの経営者・担当者に伝えてきました。
📚 用語解説
Claude Code：Anthropic社が提供するAIコーディングエージェント。ターミナルやデスクトップアプリ上で動き、日本語の指示に従ってHTMLファイルの修正・CSSの追加・ファイル操作などを自律的に実行します。プログラミングの知識がなくても「このページのフォントをNoto Sans JPに変えて」と話しかけるだけで、対応するコードを自動で書き換えてくれます。
7-1. fontタグをCSSに一括変換する実例
たとえば、100ページのWebサイトにfontタグが大量に残っている場合、手作業での修正は数日〜数週間かかる作業です。Claude Codeなら、以下のような日本語の指示を出すだけで自動的に処理できます。
対応するCSSクラスに置き換えてください。
size="5"はfont-size:18px、color属性はそのままcolorプロパティに、
face属性はfont-familyプロパティに変換し、
共通のCSSファイル（style.css）にクラスとして書き出してください。
このような指示を出すと、Claude Codeはフォルダ内のHTMLファイルを自動で走査し、fontタグを検出して対応するCSSクラスに書き換え、style.cssにスタイル定義を追記するところまで一気に実行します。数百ページ分の作業が数分〜数十分で完了することも珍しくありません。
7-2. Google FontsをHTMLに設置する作業も自動化できる
WebフォントをHTMLに導入する作業も、Claude Codeなら以下の指示だけで対応できます。
エンジニアに依頼すれば1〜2時間かかる作業も、Claude Codeへの指示と確認で30分以内に完了するケースがほとんどです。弊社の実運用では、Web制作の工数を1作業あたり平均70%以上削減できた事例が多数あります。
指示する
「fontタグをCSSに
変換して」
ファイルを解析
HTMLを全ページ
自動スキャン
自動修正
fontタグ除去＋
CSS追記
確認・承認
差分を確認して
OKなら適用
動作確認
ブラウザで表示
チェック
7-3. 非エンジニア経営者がClaude Codeを始めるステップ
「自分はエンジニアじゃないからAIコーディングツールは無理」と思っているかもしれませんが、Claude Codeのデスクトップ版はターミナル操作不要でチャットUIから使えます。以下のステップで今日からでも始められます。
| ステップ | 内容 | 所要時間（目安） |
|---|---|---|
| Step 1 | Claude.aiにアクセスしてProプラン（月$20）に登録 | 10分 |
| Step 2 | Claude Codeのデスクトップ版をダウンロードしてインストール | 15分 |
| Step 3 | 自社サイトのHTMLファイルをフォルダにまとめておく | 30分 |
| Step 4 | Claude Codeに「このフォルダのHTMLのfontタグをCSSに変換して」と日本語で指示 | 5分（指示のみ） |
| Step 5 | 変更されたコードを確認・ブラウザでチェック・サーバーに反映 | 30〜60分 |
特にHTMLの修正のような「パターンが決まっている繰り返し作業」は、Claude Codeが最も得意とする領域です。弊社が支援している中小企業の経営者でも、Claude Codeを使い始めてから2〜3ヶ月でサイト管理の大部分を内製化できたケースが増えています。
最初からサイト全体をAIに任せるのは不安かもしれません。まずは1ページだけのHTMLファイルをClaude Codeに渡して「fontタグをCSSに変換して」と試してみてください。変更されたコードを自分の目で確認して、問題なければ徐々に他のページにも適用する流れが安全で確実です。
代表菅澤
AI鬼管理山崎
08 CONCLUSION まとめ――fontタグからCSS、そしてAI活用へ HTML/CSSの基礎理解が、これからの経営者の必須教養になる
この記事では、HTMLのfontタグについて基礎から解説し、CSS移行の具体的な方法、Webフォントの活用法、そしてClaude Codeを使ったHTML作業の自動化まで、幅広くカバーしました。最後にポイントをまとめます。
HTMLの進化は「機械が理解できる意味のある文書」を目指す方向に進んでいます。fontタグのような視覚的指定をHTMLから排除し、CSSで管理することは、SEO・アクセシビリティ・保守性のすべてを改善します。また、Claude Codeのようなエージェント型AIを活用すれば、こうした技術的な作業をエンジニアに依頼せずとも自社で対応できる時代になっています。
まずは自社サイトのHTMLを確認してfontタグが残っているかチェックし、残っている場合はCSS移行を検討するところから始めてみてください。その際にClaude Codeを使えば、作業コストを大幅に削減できます。
Webサイトのfontタグ移行・HTML最適化をAI鬼管理が支援します
古いfontタグが残っているサイトのCSS化、Google Fontsの導入、レスポンシブ対応——これらをClaude Codeを活用して効率的に実施する方法を個別にご相談いただけます。
AI鬼管理山崎
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
AI活用を自社で回せるようになりたい方へ
AI鬼管理
Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。
よくある質問
Q. HTMLのfontタグは今でも使えますか？
A. 現在（2026年7月時点）でもChrome・Firefox・Safari・Edgeなどのブラウザはfontタグを解釈して表示できます。しかしHTML5の標準規格で非推奨（廃止予定）とされており、将来的にブラウザのサポートが打ち切られるリスクがあります。新規サイトでfontタグを使うことは推奨されず、既存サイトのfontタグも早めにCSSへ移行することを強く推奨します。
Q. fontタグとCSSを同時に使うとどうなりますか？
A. 同時に指定した場合、一般的にはCSSの指定がfontタグの指定より優先されます（CSSの「カスケード」の仕組みによります）。ただし優先度の計算は「詳細度（specificity）」によって変わるため、予期しない表示になることがあります。混在させると管理が複雑になるため、fontタグは除去してCSSに一本化することを推奨します。
Q. fontタグのsize属性で指定した数値はpxに換算するとどのくらいですか？
A. 完全に一致するわけではありませんが、目安としてsize="1"→約8px、size="2"→約10px、size="3"（デフォルト）→約12px、size="4"→約14px、size="5"→約18px、size="6"→約24px、size="7"→約36pxとされています。ブラウザやOSによって若干異なる場合があるため、CSSでピクセル値を直接指定した方が正確な表示を保証できます。
Q. Google Fontsを使うとサイトの読み込み速度に影響しますか？
A. Google Fontsはデータ量が大きいため、設定を誤るとページ読み込みが遅くなることがあります。対策として、①preconnectタグを追加してDNS解決を事前に行う、②display=swapパラメータを使ってフォント読み込み前もテキストを表示する、③使うウェイト（太さ）を必要最小限に絞る、などが効果的です。適切に設定すれば速度への影響を最小限に抑えられます。
Q. Claude Codeは非エンジニアでもHTMLのfontタグ変換に使えますか？
A. 使えます。Claude Codeのデスクトップ版（2026年提供）はターミナル操作なしでチャットUIから利用できます。「このフォルダのHTMLのfontタグをCSSに変換して」と日本語で指示するだけで、Claude Codeがファイルを走査して自動修正します。変更前後の差分も確認できるため、コードが読めない方でも安心して使えます。
Q. 自社サイトのHTMLにfontタグが何個あるか確認する方法はありますか？
A. テキストエディタ（VS CodeやSublime Text）の「フォルダ内全文検索」機能で「 A. WordPressの場合、古い投稿記事の本文にfontタグが含まれているケースがあります。一括置換にはプラグイン（Search Regex等）またはWP-CLIコマンドを使う方法がありますが、データベースを直接操作するため必ずバックアップを取ってから実施してください。Claude Codeに「WordPress DBのdump.sqlファイルのfontタグをCSSインラインスタイルに変換して」と指示する方法も有効です。 経営者向けの伴走型パーソナルトレーニング 受講者本人の業務を題材に、「使いこなせる」状態になるまで伴走する研修プログラム。1対1特化型・ハンズオン・法人講座の3コースを展開中。業務特化・実装まで踏み込むタイプのClaude Code研修です。 この記事を読んで気になった方へ。Q. WordPressでfontタグが含まれている場合はどう対処すればいいですか？
Claude Codeで業務自動化を90日で叩き込む
Claude Code を業務に落とし込む
専門研修コース一覧AI鬼管理へのお問い合わせ
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
