Webサイトを制作・運営する中で、プログラムのソースコードを記事内に掲載する機会は非常に多いものです。
プログラミングの学習サイトや技術系ブログにおいて、コードが正しく、かつ読みやすく表示されていることは、読者の利便性を左右する極めて重要な要素となります。
HTMLには、ソースコードを表現するための専用のタグとして<code>タグと<pre>タグが用意されています。
これらのタグを適切に使い分けることで、検索エンジンに対して「ここはプログラムの一部である」という構造を正しく伝え、アクセシビリティを向上させることができます。
本記事では、2026年現在のWeb標準に即したコード表示の最適解について、CSSによる装飾技術やアクセシビリティへの配慮を含めて詳しく解説します。
HTMLでソースコードをマークアップするための基本タグ
ソースコードをWebページ上に表示する際、最も基本となるのが<code>タグです。
<code>タグは、文章の一部として短いコードの断片を示すためのインライン要素です。
例えば、「const x = 10;を定義します」といった文脈で使用されます。
一方で、複数行にわたるプログラムの塊を表示する場合には、<pre>タグが必要になります。
<pre>タグは「Preformatted Text（整形済みテキスト）」を意味し、ソース内の改行やスペースをそのままブラウザに反映させる役割を持っています。
通常のHTML要素では、連続するスペースや改行は1つの空白にまとめられてしまいますが、<pre>タグ内では記述した通りに表示されます。
セマンティックな観点（意味論的な正しさ）から見ると、複数行のコードを表示する場合は<pre>タグの中に<code>タグを配置するのが一般的です。
具体的には、<pre><code>〜</code></pre>という二重構造にすることで、「整形されたテキストであり、かつその内容はコードである」という情報を明確に定義できます。
codeタグの役割と特徴
<code>タグは、デフォルトで多くのブラウザにおいて等幅フォント（monospace）で表示されます。
これは、アルファベットや記号の横幅がすべて一定になるフォントのことで、プログラミング言語の構文を確認しやすくする効果があります。
<code>タグ自体はあくまでインライン要素であるため、段落（pタグ）の中などでシームレスに使用することが可能です。
preタグの役割と特徴
<pre>タグはブロックレベル要素として扱われ、その中に含まれるテキストの書式を保持します。
インデント（字下げ）を多用するプログラムにおいて、スペースを保持できるこのタグは不可欠な存在です。
ただし、<pre>タグだけでは「中身が何であるか」までは伝わらないため、必ず<code>タグを併用することが推奨されます。
ソースコードを表示する際の必須テクニック：特殊文字のエスケープ
HTMLのソースコードそのものを表示したい場合、最も注意しなければならないのが特殊記号のエスケープ処理です。
HTMLにおいて「<」や「>」はタグの開始と終了を意味するため、そのまま記述するとブラウザがHTMLタグとして解釈してしまいます。
意図した通りに文字として表示させるためには、以下の表のように文字実体参照に置き換える必要があります。
| 記号 | エスケープ後の記述 | 意味 |
|---|---|---|
| < | < | Less Than（未満） |
| > | > | Greater Than（超） |
| & | & | Ampersand（アンパサンド） |
| “ | " | Quotation（二重引用符） |
例えば、<div>という文字列を表示したい場合は、<div>と記述しなければなりません。
この変換を怠ると、コードが表示されないだけでなく、ページのレイアウトが崩れる原因にもなります。
アクセシビリティを向上させるための実装方法
単に画面上でコードが見えるだけでなく、スクリーンリーダーなどの支援技術を利用しているユーザーにも情報を正しく届ける工夫が必要です。
アクセシビリティを高めるためには、まず<code>要素に対してプログラム言語を明示することが有効です。
HTML規格では、class="language-xxxx"という形式で言語を指定することが推奨されています。
また、コードブロックが長くなりスクロールが発生する場合、キーボード操作でその領域をスクロールできるように調整すべきです。
tabindex="0"属性を<pre>タグに付与することで、キーボードのTabキーでフォーカスを当て、矢印キーで中身をスクロールさせることが可能になります。
<!-- アクセシビリティに配慮したコードブロックの例 -->
<pre tabindex="0" role="region" aria-label="JavaScriptのサンプルコード">
<code class="language-javascript">
const message = "Hello, World!";
console.log(message);
</code>
</pre>上記のようにaria-label属性を組み合わせることで、何についてのコードブロックなのかを音声読み上げ時に伝えることができます。
CSSによるコード表示の装飾とスタイリング
デフォルトの表示では味気ないため、CSSを適用して視認性を高めることが一般的です。
特に重要なのは、「はみ出し」への対処と「フォントの選定」です。
レスポンシブ対応とスクロール制御
スマートフォンのような画面幅の狭いデバイスでは、長いコードが画面外に突き抜けてしまうことがあります。
これを防ぐためには、overflow-x: auto;を設定し、横スクロールを可能にする必要があります。
/* 2026年推奨の基本的なコードブロック用CSS */
pre {
background-color: #2d2d2d; /* 背景色をダーク系に */
color: #f8f8f2; /* 文字色を明るく */
padding: 1.5em; /* 余白の確保 */
border-radius: 8px; /* 角を丸く */
overflow-x: auto; /* 横スクロールを許可 */
font-family: 'Consolas', 'Monaco', 'Courier New', monospace; /* 等幅フォント */
line-height: 1.6; /* 行間を広げて読みやすく */
}
code {
/* インラインコード用のスタイル */
background-color: #eeeeee;
color: #d63384;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 90%;
}このようにスタイルを定義することで、技術文書としてのクオリティが大幅に向上します。
ダークモードへの対応
現代のWebデザインにおいて、OSの設定に合わせたダークモード対応は必須と言えます。
メディアクエリを利用して、ダークモード時にはコードブロックの色調を反転させる、あるいは適切なコントラストを維持する工夫を行いましょう。
実践的なコード表示の例
ここでは、実際にHTMLとJavaScriptのコードを表示する際の記述例を見ていきましょう。
HTMLを表示する場合
HTMLの構造を説明するためのコード例です。
<article>
<h1>記事タイトル</h1>
<p>ここに本文が入ります。</p>
</article><article>
<h1>記事タイトル</h1>
<p>ここに本文が入ります。</p>
</article>JavaScriptを表示する場合
次に、より複雑なロジックを含むJavaScriptの例です。
// 数値を2倍にする関数
const double = (num) => {
return num * 2;
};
const result = double(5);
console.log("実行結果:", result);実行結果: 10このように、data-lang属性を付与しておくことで、後述するシンタックスハイライトのライブラリを導入した際に、自動的に言語を判別して色分けすることが可能になります。
シンタックスハイライトの活用
ソースコードをさらに読みやすくするために、シンタックスハイライトの導入を検討しましょう。
シンタックスハイライトとは、予約語（if、functionなど）や文字列、コメントを自動的に色分けする機能のことです。
代表的なライブラリには「Prism.js」や「highlight.js」があります。
これらを利用すると、静的なHTMLだけでは難しい「行番号の表示」や「特定の行の強調」も容易に実現できます。
2026年現在は、パフォーマンスの観点からビルド時にハイライトを適用する手法も一般的ですが、手軽に導入するならクライアントサイドのライブラリが便利です。
コード表示におけるSEO上のメリット
適切にタグ付けされたコードは、検索エンジン最適化（SEO）の観点からも有益です。
Googleなどの検索エンジンは、ページ内の構造を理解しようとします。
<code>タグを使用することで、その部分がコンテンツの本体とは異なる「コードの情報」であることをエンジンに明確に伝えることができます。
また、ユーザーにとって読みやすいコード表示は、ページの滞在時間を延ばし、直帰率を低下させる要因になります。
質の高い技術情報を発信するサイトとして評価されるためには、細かなマークアップの丁寧さが欠かせません。
まとめ
HTMLでソースコードを表示する際は、<code>タグと<pre>タグの組み合わせが基本となります。
インラインでの記述には<code>を、複数行のブロックには<pre><code>を使用することを徹底しましょう。
また、HTMLの特殊文字を適切にエスケープすることや、CSSでレスポンシブなスクロール設定を行うことは、ユーザー体験を損なわないための必須条件です。
さらに、アクセシビリティに配慮した属性の付与やシンタックスハイライトの活用により、情報の伝わりやすさは飛躍的に向上します。
正しいマークアップと適切な装飾を組み合わせ、読者にとってストレスのない技術記事の作成を目指してください。
これらの基本を押さえることで、あなたのWebサイトの信頼性と利便性はより一層高まるはずです。