【2026年7月最新】HTMLとCSSのフォントサイズ指定完全ガイド｜px・em・rem・vwの違いとClaude Code活用法
aikanri-admin
この記事の内容
「HTMLでフォントのサイズを変えたい」——Webサイトの制作や修正をしていると必ず直面する作業です。しかし調べると「fontタグ」「CSS font-size」「px」「em」「rem」と複数の方法が出てきて、どれが正解なのか混乱してしまうことがあります。
この記事では、HTMLとCSSでフォントサイズを指定するすべての方法を網羅的に解説します。さらに2026年の最新視点として、Claude Codeを使ってフォントサイズ設計を自動化する方法も紹介します。
Webの文字サイズ指定に関わる全知識を、この1記事で完結させます。
AI鬼管理山崎
この記事で分かること：
01 FONT SIZE BASICS HTMLのフォントサイズとは？全体像を整理 なぜフォントサイズの指定方法が複数あるのかを理解する
Webページで表示されるテキストのサイズを変更するには、大きく分けて2つのアプローチがあります。①HTMLタグで直接指定する方法と②CSSで指定する方法です。
これらが混在して説明されている理由は、Webの歴史にあります。1990年代のHTML初期は「スタイル（見た目）もHTMLタグで指定する」のが主流でした。その代表例がfontタグです。しかしその後、「構造（HTML）とデザイン（CSS）を分離すべき」という設計思想が広まり、現代ではフォントサイズはCSSで指定するのが唯一の正解になっています。
| 方法 | 使用するもの | 現状 | 使うべきか？ |
|---|---|---|---|
| fontタグ + size属性 | fontタグのsize属性 | HTML5で廃止（非推奨） | ❌ 使ってはいけない |
| CSS font-size（インライン） | style="font-size:20px;" | 使用可能だが保守性低い | △ 小規模修正のみ |
| CSS font-size（外部/内部スタイル） | .text { font-size: 16px; } | 現代のベストプラクティス | ✅ これが正解 |
代表菅澤
フォントサイズの指定に関わる主な方法を整理すると、fontタグ（廃止）→CSS インライン指定（非推奨）→CSS 外部スタイルシート（推奨）という進化の流れが見えます。この記事では各段階を詳しく解説します。
02 FONT TAG LEGACY fontタグとfont size（非推奨・廃止） HTML5で廃止されたfontタグ——なぜ存在したか、なぜ使えないのか
まず歴史的な経緯として、廃止されたfontタグについて説明します。現在は使うべきではありませんが、古いコードのメンテナンスや廃止理由を理解するために知っておく価値があります。
2-1. fontタグの基本的な書き方
fontタグは font タグ の形式で使い、size属性でフォントサイズを指定します。sizeは1〜7の数値で指定し、デフォルト（標準）は3です。また「+2」「-1」のように基準からの相対値で指定することもできます。
📚 用語解説
fontタグ：HTML4以前に使われていたテキストの見た目（フォント、サイズ、色）を指定するためのHTMLタグ。size属性で1〜7の数値によるフォントサイズ指定、color属性で色指定が可能だった。HTML5で廃止（deprecated）となり、現在はCSSで代替するのが正しいアプローチ。古いWebサイトではまだ見かけることがある。
| fontタグのsize値 | 対応するCSS font-size（目安） | 使用場面のイメージ |
|---|---|---|
| 1 | 約10px | 注釈・著作権表記などの極小テキスト |
| 2 | 約13px | フッターや補足テキスト |
| 3（デフォルト） | 約16px | 本文テキストの標準サイズ |
| 4 | 約18px | 強調された本文テキスト |
| 5 | 約24px | サブ見出し（H3相当） |
| 6 | 約32px | セクション見出し（H2相当） |
| 7 | 約48px | ページタイトル（H1相当） |
2-2. fontタグがなぜ非推奨になったか
fontタグが廃止された理由は主に3つです。第一に保守性が低いこと。同じフォントサイズを変更したい場合、すべてのfontタグを手作業で修正する必要があります。CSSなら1箇所の変更で全ページに反映できます。
第二に構造とデザインの混在という問題。HTMLは「文書の構造」を表すべきで、見た目（デザイン）はCSSに分離するのが設計原則です。第三にアクセシビリティとSEOへの悪影響。fontタグによるサイズ指定は、スクリーンリーダーや検索エンジンが文書の階層構造を理解しにくくなります。
fontタグはHTML5で正式に廃止されています。現時点でもChromeやSafariの多くのバージョンで「なんとなく動く」状態ですが、将来のブラウザバージョンアップで突然表示が崩れるリスクがあります。また、Google検索のクロールにおいても、古いHTMLタグを多用するページは評価が下がる場合があります。
AI鬼管理山崎
03 CSS FONT-SIZE CSSのfont-sizeプロパティ（現代の正解） インライン・内部・外部スタイルシートでの書き方を完全解説
現代のWebサイトでフォントサイズを指定する正しい方法は、CSSのfont-sizeプロパティを使うことです。CSSでの指定方法には3種類あります。
3-1. インラインスタイル（style属性）
HTMLタグに直接style属性を書く方法です。特定の要素1つだけに素早くスタイルを適用したい場合に使います。例えば p style="font-size: 20px;" と書くと20pxのテキストになります。ただし多用すると保守性が下がるため、本格的なサイト制作では多用を避けます。
3-2. 内部スタイルシート（HTMLファイル内のstyleタグ）
HTMLファイルのhead内にstyleタグを書いて、そのページ全体のスタイルを定義する方法です。例えば style タグの中に h1 { font-size: 36px; } のように記述します。1ページだけのシンプルなサイトやランディングページに適しています。
3-3. 外部スタイルシート（.cssファイル）——最も推奨
最も推奨される方法です。別ファイル（例：style.css）にCSSをまとめて、HTMLからlinkタグで読み込みます。複数のページで同じスタイルを共有でき、変更が1箇所で済む保守性の高い設計です。
📚 用語解説
CSSプロパティ（font-size）：Webページのテキストサイズを指定するCSSの命令。font-size: 値; の形式で書き、値には様々な単位（px・em・rem・%・vwなど）が使える。CSSセレクタ（.class名、要素名、#id名など）と組み合わせて「どの要素のフォントサイズを変えるか」を指定する。
| 指定方法 | コード形式 | メリット | デメリット | 推奨度 |
|---|---|---|---|---|
| インラインスタイル | style="font-size:16px" | 即座に適用・HTMLに直書き | 変更コスト高・重複が多い | △ |
| 内部スタイル | head内にstyleタグ | 1ページでまとまる | 複数ページで共有不可 | △ |
| 外部スタイル | .cssファイル分離 | 一括管理・全ページ共有 | 追加ファイルが必要 | ✅ 推奨 |
代表菅澤
04 UNIT COMPARISON 単位の比較：px・em・rem・%・vw それぞれの単位の意味と、いつ何を使うべきかを整理する
CSSのfont-sizeには様々な単位が使えます。それぞれの単位には特徴があり、適切に使い分けることでレスポンシブ対応・アクセシビリティ・保守性が大きく変わります。
| 単位 | 意味 | 例 | 主な用途 | 推奨度 |
|---|---|---|---|---|
| px | 絶対ピクセル数 | font-size: 16px | デバイス非依存の固定サイズが必要な場合 | △ |
| em | 親要素のフォントサイズ基準 | font-size: 1.5em | ネスト構造内の相対サイズ（注意が必要） | △ |
| rem | ルート要素（html）のフォントサイズ基準 | font-size: 1.2rem | 全体の一貫したサイズ管理 | ✅ 推奨 |
| % | 親要素のフォントサイズに対する割合 | font-size: 90% | 親要素比でのスケール変更 | △ |
| vw | ビューポート幅の割合 | font-size: 2vw | 全幅対応のダイナミックフォント | △ |
4-1. px（ピクセル）——固定サイズ指定
pxは画面上のピクセル数で直接サイズを指定します。最も直感的ですが、ユーザーがブラウザのフォントサイズを変更しても追随しないというアクセシビリティ上の問題があります。
📚 用語解説
px（ピクセル）：CSSにおける絶対単位の一つ。1pxは基本的に画面の1ドット（物理ピクセル）を指すが、高解像度ディスプレイ（Retina等）では論理ピクセルとして扱われる。font-size: 16pxのように書く。ユーザーのブラウザ設定やズームを無視した固定サイズになるため、アクセシビリティ観点ではremの使用が推奨される。ボーダーやアイコンサイズなど「変えたくないサイズ」には適している。
4-2. em——親要素基準の相対指定
emは親要素のfont-sizeを1emとする相対単位です。例えば親要素が16pxの場合、1.5emは24pxになります。しかし要素をネスト（入れ子）すると、それぞれの親要素を基準にサイズが掛け算されるため、深いネスト構造では予期しないサイズになることがあります。これを「em地獄」と呼びます。
📚 用語解説
em単位：CSSの相対単位。その要素の親要素のfont-sizeを1emとして計算する。親(16px) → 子(1.5em=24px) → 孫(1.5em=36px)のように入れ子にするとどんどん大きくなる「em地獄」が起きやすい。この問題を解決するために生まれたのがrem（ルート基準）単位。
4-3. rem——ルート要素基準の相対指定（推奨）
remはルート要素（html）のfont-sizeを1remとする相対単位です。どんな要素でも常にhtmlのfont-sizeを基準にするため、入れ子でも計算が単純です。ブラウザのデフォルトは「html { font-size: 16px; }」なので、1rem = 16pxになります。
📚 用語解説
rem（root em）：CSSの相対単位。常にルート要素（htmlタグ）のfont-sizeを1remとして計算する。emと違い「親要素の積み重ね」が起きないため、どこでも一貫したサイズ計算ができる。ブラウザデフォルトのhtml font-sizeは16pxなので、1rem=16px。ユーザーのブラウザ設定にも追随するためアクセシビリティにも優れる。現代のフロントエンド開発での標準単位。
📌 remの計算例（html の font-size が 16px の場合）
| CSS指定 | 実際のサイズ | 用途の目安 |
|---|---|---|
| font-size: 0.75rem | 12px | 注釈・キャプション |
| font-size: 0.875rem | 14px | サブテキスト・ラベル |
| font-size: 1rem | 16px | 本文（推奨標準） |
| font-size: 1.25rem | 20px | リード文・強調本文 |
| font-size: 1.5rem | 24px | H3見出し |
| font-size: 2rem | 32px | H2見出し |
| font-size: 2.5rem | 40px | H1ページタイトル |
4-4. vw——ビューポート幅に連動するサイズ
vwはビューポート（表示領域）の幅に対するパーセンテージです。1vwはビューポート幅の1%を意味します。大型ディスプレイと小さいスマートフォン両方で文字が「適切な相対サイズ」になる特性がありますが、単独で使うと極端に小さくなることがあるため、clamp()との組み合わせが推奨されます。
📚 用語解説
viewport（ビューポート）：ブラウザ上で実際にWebページが表示される領域のこと。スマートフォンでは画面幅がそのままビューポート幅になる（375〜430px程度）。デスクトップPCでは1280〜1920px程度。vwはこのビューポート幅の1%を1単位とするため、デバイスに応じて自動的にスケールする。
AI鬼管理山崎
05 FONT SIZE DESIGN 実践：Webサイトのフォントサイズ設計 読みやすいサイトを作るためのフォントサイズ設計の原則
フォントサイズは「見た目の好み」ではなく、読みやすさ・アクセシビリティ・モバイル対応を考慮した設計が必要です。
5-1. 本文フォントサイズは16px（1rem）以上が基本
Googleをはじめとした主要なガイドラインでは、本文テキストは16px以上を推奨しています。スマートフォンの画面サイズを考えると、16pxが最小ラインです。「少しくらい小さくても」という妥協が読者の離脱率を高める原因になります。16px未満の本文テキストはモバイルでの読みにくさに直結します。
| テキストの種類 | 推奨サイズ（デスクトップ） | 推奨サイズ（モバイル） | 備考 |
|---|---|---|---|
| 注釈・コピーライト | 11〜12px | 11〜12px | 最小限のテキスト |
| ラベル・タグ | 12〜13px | 12px | UIの補助情報 |
| サブテキスト・キャプション | 13〜14px | 13px | 画像説明など |
| 本文テキスト（基本） | 16〜18px | 16px | これ以下は読みにくい |
| リード文・強調本文 | 18〜20px | 17〜18px | 冒頭のリード文など |
| H3見出し | 20〜24px | 19〜22px | セクション内の小見出し |
| H2見出し | 26〜32px | 22〜26px | セクション見出し |
| H1タイトル | 36〜48px | 28〜36px | ページ最上位タイトル |
5-2. レスポンシブフォントサイズ：clamp()の活用
モバイルとデスクトップで最適なフォントサイズは異なります。メディアクエリで切り替えるより、clamp(最小値, 理想値, 最大値)を使う方が洗練されたアプローチです。例えば h1 { font-size: clamp(28px, 4vw, 48px); } と書くと、スマホでは28px、デスクトップでは最大48pxとなり、その間はビューポート幅に応じて変化します。
WordPressのブロックエディタではフォントサイズをGUI操作で変更できます（段落ブロック→右サイドバー→タイポグラフィ）。しかし記事全体の本文サイズを変えたい場合は、テーマのカスタマイズ（外観→カスタマイズ）からCSSを追加する方が一括で適用できます。
5-3. フォントサイズ設計のチェックリスト
どのテキストを
変えたいか
px / rem / clamp()
から適切なものを
推奨サイズ表を
参考に設定
375px幅で
読みやすいか
ブラウザズームで
崩れないか
06 CLAUDE CODE CSS Claude Codeでフォントサイズ設計を効率化 CSSの指定や修正を自然言語で指示する時代のWebデザイン
2026年現在、Claude Codeを使えばCSSのフォントサイズ設定・修正・最適化を自然言語で指示することができます。「font-sizeの書き方を覚えなくてもいい」という意味ではなく、「覚えた知識を素早く具体的なCSSコードに変換してくれるパートナー」として活用できます。
「H1は40px、
本文は16px以上に」
自然言語で伝えると
CSSを生成してくれる
意図と合っているか
ブラウザでプレビュー
「スマホはもう少し
小さくして」
WordPress追加CSS
またはスタイルシートへ
6-1. Claude Codeへの指示例と期待される出力
実際にClaude Codeに指示する場合、以下のような自然言語で書くとCSSを正確に生成してくれます。指示は日本語で問題なく、技術的な用語を知らなくても意図を伝えることができます。
| あなたの指示 | Claude Codeが生成するCSS | 結果 |
|---|---|---|
| 「本文を16px、H1を40px、H2を30pxにして。remで統一して」 | body{font-size:1rem} h1{font-size:2.5rem} h2{font-size:1.875rem} | remベースのスケールが完成 |
| 「スマホでは本文14px、H1は28pxにするメディアクエリも追加して」 | @media(max-width:768px){body{font-size:0.875rem} h1{font-size:1.75rem}} | レスポンシブ対応が追加 |
| 「clampを使って最小値と最大値を設定したい」 | h1{font-size:clamp(24px,4vw,48px)} | ビューポート対応のフォントサイズ |
| 「WordPressの追加CSSでブロックエディタの段落サイズを18pxに統一したい」 | .wp-block-paragraph{font-size:1.125rem!important} | WP専用のCSS指定が完成 |
6-2. 非エンジニアがClaude Codeでフォントサイズを変更する実例
弊社（株式会社GENAI）のメンバーがClaude Codeを使って実際にやっているフォントサイズ関連の作業です。エンジニア経験のない社員もこれらの作業をClaude Codeの補助で行っています。
代表菅澤
AI鬼管理山崎
WebサイトのフォントサイズをClaude Codeで改善してみませんか？
「本文が小さくて読みにくい」「スマホで見たらフォントが崩れた」——こうしたWebサイトの文字サイズ問題を、Claude Codeを活用して効率よく解決する方法を弊社がサポートします。
まずは無料相談で、あなたのサイトの現状と、AI活用によるフォントサイズ改善の余地をお聞かせください。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
AI活用を自社で回せるようになりたい方へ
AI鬼管理
Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。
よくある質問
Q. HTMLのfont sizeとCSSのfont-sizeは何が違いますか？
A. HTMLのfont size（fontタグのsize属性）は1〜7の数値でフォントサイズを指定する古い方法で、HTML5で廃止（非推奨）になっています。CSSのfont-sizeはpx・em・rem・%・vwなどの単位で正確なサイズ指定ができ、現在唯一の正式な方法です。fontタグは現在も多くのブラウザで動作しますが、将来のリスクを考えるとCSSへの移行を推奨します。
Q. font-sizeの単位はpxとremのどちらを使うべきですか？
A. 現代のWebサイトではremの使用を推奨します。remはブラウザのルート要素（html）のフォントサイズを基準にするため、ユーザーがブラウザの文字サイズを変更したときに追随します。pxは固定サイズのため、視覚障害のあるユーザーがブラウザ設定を変えても反映されません。ボーダーやアイコンサイズなど変えたくない要素にはpxを使う、という使い分けが一般的です。
Q. Webサイトの本文に適切なフォントサイズは何pxですか？
A. 最低16px以上を推奨します。Googleのモバイルユーザビリティガイドラインでも16px以上を推奨しています。15px以下の本文はスマートフォンでの読みにくさにつながります。理想的には16〜18pxを基準として、スマートフォン表示では16px、デスクトップでは18〜20pxとするレスポンシブ設計がベストプラクティスです。
Q. WordPressでフォントサイズを変更するにはどうすればいいですか？
A. 最も簡単な方法は「外観→カスタマイズ→追加CSS」に直接CSSを貼り付けることです。例えば本文を18pxにしたい場合は「.entry-content p { font-size: 18px; }」と入力します。テーマによってクラス名が異なる場合があるため、ブラウザの開発者ツール（F12キー）で対象要素を確認してからクラス名を確定させると確実です。Claude Codeを使えば目的を自然言語で説明するだけでCSSを生成してもらえます。
Q. emとremの違いを教えてください。
A. どちらも相対単位ですが基準が異なります。emは「その要素の親要素のfont-size」を1emとします。一方、rem（root em）は常に「ルート要素（htmlタグ）のfont-size」を1remとします。emはネスト（入れ子）構造で掛け算されて大きくなる「em地獄」が起きやすく、remはどこで使っても常にhtml基準なので計算がシンプルです。2026年時点ではフォントサイズにはremを使うことが多数派です。
Q. CSSのclamp()とは何ですか？フォントサイズにどう使いますか？
A. clamp()は「最小値・理想値・最大値」を指定して、その範囲内でスケールするCSSの関数です。例えば「font-size: clamp(16px, 2.5vw, 24px)」と書くと、ビューポート幅が狭い（スマホ）なら16px、広い（デスクトップ）なら最大24pxとなり、その間はビューポート幅に比例して変化します。メディアクエリを使わずに一行でレスポンシブフォントサイズが実現できる現代的な手法です。
Q. 非エンジニアでもClaude CodeでCSSのフォントサイズを変更できますか？
A. できます。Claude Codeに「このサイトの本文フォントを18pxにしたい」と日本語で伝えるだけで、対応するCSSを生成してくれます。生成されたCSSをWordPressの追加CSS欄に貼り付けるだけで適用できます。ただし、生成されたCSSが意図通りかブラウザで確認する習慣を持つことが重要です。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
Claude Code を業務に落とし込む
専門研修コース一覧
受講者本人の業務を題材に、「使いこなせる」状態になるまで伴走する研修プログラム。1対1特化型・ハンズオン・法人講座の3コースを展開中。業務特化・実装まで踏み込むタイプのClaude Code研修です。
研修コース一覧を見る →AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
