Edgeの最新更新以降、「フォントのカスタマイズ」から等幅（monospace）フォントだけを小さくする術が消え、コードや表を多用するサイトで「文字だけ大きすぎる」違和感に悩む声が増えています。本記事では、変更の背景と現状仕様を整理したうえで、拡張機能やカスタムCSSで等幅フォントだけを狙って縮小する実践的な回避策、運用時の注意点、そして代替ブラウザーの選択肢までを一気通貫で解説します。
目次
Microsoft Edgeで固定幅（等幅）フォントだけを小さくできない問題
質問概要
- Edge 138.0.3351.83 以降、「カスタム フォント」設定から個別フォントのサイズ指定欄が消えた。
- 「フォント サイズ」「最小フォント サイズ」を動かしても monospace（等幅） だけを縮小できず、ページ全体の文字が一括変更される。
- 以前のように「固定幅フォントだけ小さく」する方法はあるか？
結論（先に要点）
- Edge標準の個別サイズ調整は廃止。現行仕様では「フォント サイズ」「最小フォント サイズ」はブラウザー全体に一律適用。
- 等幅フォントのみを狙って縮小したい場合は、拡張機能またはユーザーCSS（Stylusなど）で上書きするのが近道。
- 根本解決を望むなら、［…］→［ヘルプとフィードバック］→［フィードバックの送信］から復活要望を出すのが公式ルート。
何が変わったのか（仕様整理）
2025年夏以降の更新で、Edgeの「フォントのカスタマイズ」画面が簡素化され、かつて存在した固定幅（monospace）だけのサイズ指定ができなくなりました。現在は次の二択です。
- フォント サイズ：ページ内の文字サイズを全体的に増減。
- 最小フォント サイズ：表示される文字の最小サイズを全体に保証。
このため、コードブロックや等幅要素だけをピンポイントで小さくするような粒度の調整は、標準機能では不可能になっています。
いま可能な解決策（拡張機能 / カスタムCSS / ページズーム）
| 方法 | 概要 | 手順の一例 | メリット / 注意点 |
|---|---|---|---|
| Font Customizer系の拡張機能 | サイト単位・フォント種別単位でCSSを注入し、font-family: monospaceや等幅フォントに対してfont-sizeを上書き。 | Edgeアドオンから拡張機能を追加 → オプションで「monospace」「Courier New」「Consolas」などに任意サイズを設定。 | コード不要で直感的。 拡張機能の互換性/権限/プライバシーポリシーの確認が必須。 |
| Stylus（User CSS） | 自分でCSSを書き、codeやpreなどの等幅要素だけ縮小。サイト別やドメイン別に適用を切り替え。 | Stylus導入 → 新規スタイル → 適用範囲（例：ドメイン）を指定 → 下記CSSを貼り付けて保存。 | 最も柔軟で再現性が高い。 CSSの基本知識が必要。サイト側CSSの上書きに!importantが必要な場面も。 |
| サイト別ズーム | ページごとにズーム率を下げ、実質的に等幅フォントも含め縮小。 | アドレスバー右端［…］→ ズーム％を調整（Edgeはサイト別に記憶）。 | 手早いが画像やUIまで縮小して読みにくくなる場合あり。 テキストだけの調整ではない。 |
等幅フォントだけ縮小するCSSレシピ集（そのまま使える）
基本（全サイトで code/pre/kbd/samp を 90% に）
:where(code, pre, kbd, samp) {
font-size: 90% !important;
line-height: 1.4;
}
もっと小さくしたい場合は 85%、控えめなら 95% に。可読性を保つため line-height は 1.3～1.6 を目安に調整します。
1行コードと複数行コードで縮小率を分ける
:where(code):not(:where(pre code)) { /* インラインコード */
font-size: 92% !important;
}
:where(pre, pre code, code.block, pre > code) { /* 複数行コード */
font-size: 88% !important;
} 「monospace 系に限定」したより強力な当て方
Webサイトによっては、クラス名やカスタムCSSで等幅を当てていることがあります。実運用では下記のような“よくある対象”を広く拾うと安定します。
:where(code, pre, kbd, samp,
.code, .codespan, .highlight, .hljs, .chroma,
[class*="code"], [class*="mono"], [class*="pre"]) {
font-size: 90% !important;
}
可読性を落とさない「行間・折返し・余白」セット
/* 長い行で横スクロールが過剰なサイト向け */
:where(pre) {
line-height: 1.5 !important;
overflow-wrap: anywhere;
tab-size: 2; /* タブを詰めて見やすく */
margin: 0.75em 0; /* コード前後の余白を確保 */
}
CSS変数で縮小率をあとから一括調整
html { --mono-scale: 0.9; } /* 0.85～0.95 を目安に */
:where(code, pre, kbd, samp) {
font-size: calc(1em * var(--mono-scale)) !important;
}
サイト別に強めの上書きが必要な例（参考）
ドキュメント・ブログ系で多いクラスの例です。効かない場合は開発者ツールで実際のクラス名を確認して追加してください。
/* GitHub/Gist など */
:where(.markdown-body code, .markdown-body pre) { font-size: 90% !important; }
/* Docusaurus/Docsify/Hexo 等 */
:where(.theme-doc-markdown code, .theme-doc-markdown pre) { font-size: 90% !important; }
/* PrismJS / highlight.js */
:where(code[class*="language-"], pre[class*="language-"], .hljs) { font-size: 90% !important; } 拡張機能での運用ポイント
- 適用範囲をサイト単位に分ける：技術ブログ用、ドキュメント閲覧用など用途別にプロファイルを分けると衝突が少ない。
- 優先度の設計：グローバル（全サイト）用スタイルは控えめ（例：95%）。特定サイトは強め（例：88%）。
- バックアップ：拡張機能が無効化・初期化された場合に備え、CSSは定期的にエクスポートして保管。
- 権限の確認：閲覧中のサイトのデータの読み取りと変更 が必要な拡張は少なくありません。必要最小限の権限に絞り、不要時はオフに。
Edge標準設定で「できること / できないこと」
| 項目 | できること | できないこと | 補足 |
|---|---|---|---|
| フォント サイズ | 表示全体の文字サイズを調整 | 等幅フォントだけ個別に縮小 | UIや本文を含め一律に変わるため、狙い撃ちが不可 |
| 最小フォント サイズ | 小さすぎる文字を読みやすくする | 等幅だけ別上限にする | 全体に適用されるため、本文も影響を受ける |
| サイト別ズーム | ページ単位の拡大縮小 | 文字だけ縮小 | 画像・レイアウトも縮小/拡大される |
トラブルを避けるための実践ノウハウ
- 縮小し過ぎに注意：コントラストの弱いテーマや細い等幅フォントでは、
85%未満にすると可読性が急落する場合があります。 - 行間の確保：縮小するとグリフが詰まりやすいので、
line-height: 1.4～1.6を併用。 - 長い行の折返し：ドキュメント系は
overflow-wrap: anywhere;が効く場面が多い。 - タブ幅：
tab-sizeを2or4にすると桁ズレのストレスが軽減。 - 拡張の競合：広告ブロッカー等が 要素非表示 や スタイル上書き をしていると、CSSが効かないことがあります。対象ページでは一時的にオフにして検証。
「根本的な改善を望む」場合のアクション
Edgeの機能追加・UI復活はユーザーフィードバックの蓄積が最も有効です。右上の［…］→ ［ヘルプとフィードバック］→［フィードバックの送信］ から、次のように送ると通りやすくなります。
- 要望タイトル：「等幅フォントサイズの個別設定を復活してほしい」
- 再現手順：外観 → フォント → フォントのカスタマイズに固定幅サイズがないため、monospaceのみの縮小が不可
- 具体的用途：プログラミング学習、ドキュメント閲覧、ナレッジ共有でコードの可読性・情報密度を調整したい
一時的な回避としての別ブラウザー
- Firefox：設定 > 一般 > 言語と外観 > フォント > 詳細設定 から、Monospace のサイズを個別に指定可能。サイト側フォントを優先するかどうかも切り替えられます。
- Vivaldi：標準/セリフ/サンセリフ/モノスペースのフォント指定や既定/最小フォントサイズは調整可能。モノスペースだけのサイズを個別に持たない構成のため、必要に応じてユーザーCSSやページズームで補完するのが現実的です。
企業・教育機関での運用メモ
- グループポリシー/MDM：Edgeの既定フォントや最小フォントサイズはポリシー配布で揃えられます。ただし「等幅だけサイズを別管理する」粒度のポリシーは現状ありません。ユーザーCSSをプロファイルと併せて配布する設計を検討してください。
- プロファイル同期：ユーザーCSSや拡張の設定は同期対象外となることがあります。端末入替に備え、スタイルのエクスポート手順を標準化しましょう。
よくある質問
Q. 最小フォントサイズを上げると本文も大きくなってしまいます。
A. 仕様どおりです。本文への影響を避けたい場合は、本文サイズはそのままに、等幅要素のみCSSで相対縮小（例：88～95%）するのが最適です。
Q. サイトによっては全く効かないことがあります。
A. サイト側がインラインスタイルやより高い優先度（Specificity）で強制している可能性があります。セレクタを具体化（例：.markdown-body pre code）し、必要時のみ!importantを併用してください。
Q. フォントの種類自体を変えたい。
A. Edge標準の「フォント」メニューで、Fixed-width（モノスペース）のファミリだけ別フォントに切替可能です（サイズは別管理不可）。読みやすい等幅フォント（例：ui-monospace, SFMono-Regular, Consolas, 'Courier New'など）を選ぶと縮小しても視認性が保ちやすくなります。
Q. flags やレジストリで「固定幅サイズ」欄を復活できますか？
A. 現時点で復活する既知の手段は確認されていません。非公開のフラグやレジストリ編集は将来の更新で破綻する可能性が高く、推奨されません。
運用テンプレ（コピペ可）
次の3段階で導入すると、失敗しにくく管理も楽です。
- 全サイト用の控えめスタイル（95%）
:where(code, pre, kbd, samp){ font-size:95% !important; line-height:1.45; } - ドメイン別の強めスタイル（88～92%）
/* 例：技術ブログ/ドキュメント */ :where(.markdown-body code, .markdown-body pre){ font-size:90% !important; } - ページ個別の微調整（その場の検証→保存）
/* 例：特定記事だけの崩れ対策 */ :where(pre) { tab-size: 2; } :where(pre code) { white-space: pre-wrap; }
まとめ
- Edge 138以降、標準機能だけで等幅フォントのみ縮小は不可。
- 実用的な解は拡張機能またはユーザーCSSでの上書き。まずは全サイト95%、必要なサイトで90%前後に調整する二段構えが堅実です。
- レジストリ/flagsでの復活は未確認かつ非推奨。将来的な改善を望むならフィードバック送信を。
- 要件が厳密なら、Firefoxで等幅フォントサイズを個別指定するか、Edge＋ユーザーCSSのハイブリッドで対応しましょう。
付録：Edge標準設定の場所（確認手順）
- 右上［…］ → 設定 → 外観 → フォント
- 「フォント サイズ」：Very small / Small / Medium / Large / Very large から選択
- 「フォントのカスタマイズ」：フォント サイズ・最小フォント サイズのスライダー、標準/セリフ/サンセリフ/固定幅のフォント種類選択
ここで固定幅のサイズだけを別個に設定する欄は、現行バージョンにはありません。必要なら本記事のCSSレシピを活用してください。
付録：コピー用スタイル一括（プレーン）
/* ==== Edgeで等幅フォントだけ小さくする（汎用） ==== */
html { --mono-scale: 0.90; } /* 0.85～0.95で調整 */
:where(code, pre, kbd, samp) {
font-size: calc(1em * var(--mono-scale)) !important;
line-height: 1.45;
}
/* サイトによって効きやすくするための“拾い網” */
:where(.code, .codespan, .highlight, .hljs, .chroma,
[class*="code"], [class*="mono"], [class*="pre"]) {
font-size: calc(1em * var(--mono-scale)) !important;
}
/* 長文コードの読みやすさ */
:where(pre) {
overflow-wrap: anywhere;
tab-size: 2;
margin: .75em 0;
}
/* インラインコードは少しだけ縮める */
:where(code):not(:where(pre code)) {
font-size: 0.92em !important;
} 付録：導入チェックリスト
- ★ グローバル（全サイト）で95%を適用 → 体感確認
- ★ コードが多いサイトを開き、90%前後に微調整
- ★ 行間・折返し・タブ幅を調整して読みやすさを担保
- ★ スタイルをエクスポートしてバックアップ
- ★ 問題が解決しない場合は拡張機能の競合を確認
- ★ Edgeへフィードバックを送信
コメント