【テクニカル・上級編】codeタグによるコード断片の表示 – HTML実践ガイド

/ 推奨されるフォントスタックの設計 /
code {
/
system-uiを優先し、OSネイティブの等幅フォントを適用することで、
フォントダウンロードによるFOUC（Flash of Unstyled Content）を回避。
また、text-size-adjustによる意図しない拡大防止も忘れずに。
/
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.9em; / 親要素よりわずかに小さくすることで可読性を確保 /
line-height: inherit; / 行高さが崩れるとリフローの原因になるため、継承が鉄則 /
}

ここで重要なのは、`font-size`を`0.9em`程度に抑えることです。等幅フォントは往々にしてプロポーショナルフォントよりも視覚的に大きく見えるため、相対値で調整しないと、インラインコードを多用する文章で「行間がガタつく」現象が発生し、レンダリング負荷を高める原因となります。

---

2. レンダリング負荷を最小化する設計：`white-space: pre-wrap`の功罪

インラインコード内で長い文字列（ハッシュ値やURLなど）を表示する場合、ブラウザはデフォルトで改行を制限しようとします。ここで`white-space: pre-wrap`を採用すると、ブラウザはレイアウト計算時に「どこで改行すべきか」を非常に細かく計算することになり、頻繁な更新が発生するUIではリペイント負荷を増大させます。

解決策：`overflow-wrap: break-word`の併用

code {
/ 長いコード文字列がレイアウトを破壊するのを防ぎつつ、計算コストを低減 /
white-space: pre-wrap;
word-break: break-all; / 単語の途中でも強制的に改行させることで、予期せぬ領域拡大を防止 /
overflow-wrap: break-word;
}

これにより、ブラウザの描画エンジンは、コンテナ幅を超えた文字列を「強制的に折り返す」という単純なロジックで処理できるため、複雑な計算を回避し、高速なレンダリングを維持できます。

---

3. TypeScriptによる型安全なコード注入

モダンなReactやVueのプロジェクトにおいて、コード断片をコンポーネント化する際、安易に`dangerouslySetInnerHTML`などを使ってハイライトを当てるのは避けるべきです。これはXSSのリスクだけでなく、仮想DOMの差分計算（diff）において重い負荷をかけます。

TypeScriptを活用し、文字列を厳密に扱うための型定義を施しましょう。

/

• インラインコードを表示するためのProps定義
• 外部から注入される文字列が意図せぬHTML変換をされないよう、
• 明示的にstring型を強制する

/
interface InlineCodeProps {
children: string; // ReactNodeではなくstringに限定し、汚染を防ぐ
className?: string;
}

const InlineCode: React.FC = ({ children, className }) => {
// エスケープ処理をブラウザレベルで完結させる
return {children};
};

このように、`children`を`string`に限定することで、コンポーネントが「コードの断片」としてのみ機能することを保証できます。これは大規模開発において、意図しないネストやレンダリングバグを早期に検知するための「型による防波堤」です。

---

4. エッジケースの回避：ブラウザの競合とアクセシビリティ

最後に、スクリーンリーダーの挙動について触れておきます。``タグは一部のスクリーンリーダーにおいて、過剰に「コード」であることを読み上げることがあります。