HTML

この記事では、文章の中に短いコードを示す<code>要素と、複数行のコードを見せるときの<pre>との組み合わせを初心者向けに説明します。

この記事でわかること

文章中の短いコードに<code>を使う方法
複数行のコードを<pre>と組み合わせて示す方法
<kbd>・<samp>・<var>との使い分け

A small inline tag that clearly marks “this part is code” inside a sentence; for multi-line code, pair it with <pre> to keep indentation and line breaks.

code 要素

1行の小さなコードは <code>、改行や字下げをそのまま見せたい複数行は <pre><code> のセット。

HTML + CSS
HTML + JavaScript
- コードをシンタックスハイライトする
- prism.js の使用例

code とは？

code要素はコンピュータのコードをマークアップするときに使います。

例えば、プログラムに使う関数名、メソッド名、プロパティ名や XML や HTML の要素名、CSS、JavaScript、Python、Ruby、Go...などなど、どんな言語であってもコードをコンテンツとして表示したい場合に使われます。

一般的なブラウザでは、等幅フォントで表示されます。

ソースコードをきちんと code要素で囲むことにより、code要素を CSSなどで装飾すればユーザーは「どの部分がコードなのか」がパッと見てわかりやすくなりますし、検索エンジンのクローラーなどのロボットが「どの部分がコードなのか」を判別しやすくなりますので、ユーザーにコードを見せたいときは基本的に code要素で囲むようにしましょう。

HTML

<p>Perl スクリプトを作る際には、<code>use strict;</code> と <code>use warnings;</code> を必ず入れるようにしましょう。</p>

Perl スクリプトを作る際には、use strict; と use warnings; を必ず入れるようにしましょう。

複数行にまたいでインデント（字下げ）や改行などをそのままにコードをブロックとしてまとめて表示したい場合は、pre要素を使うのが良さそうです。特に、Python といったプログラム言語のように、タブ・インデントに意味を持つコンテンツでは、pre要素との併用が最適です。

HTML

<pre>
	<code>
		ここにコードを書く
	</code>
</pre>

複数行のコードを載せるときには pre要素の中に code要素を入れ、その中にコードを書きます。

ポイント：codeはインライン要素なので、文の途中で小さなコード片を示すのに向いています。一方で、スペースや改行はそのまま表示されません。入力どおりの見た目（改行やインデント）で見せたいときは、preとセットで使うのが基本です。

関連する要素：キーボード入力は<kbd>、プログラムの出力は<samp>、変数名は<var>で表すと、より意味が伝わりやすくなります（必要に応じて使い分けましょう）。

pre要素と併用したマークアップ例

HTML

<pre><code>
for n in range(2, 10):
	for x in range(2, n):
		if n % x == 0:
			print(n, 'equals', x, '*', n//x)
			break
		else:
			print(n, 'is a prime number')
</code></pre>

for n in range(2, 10):
	for x in range(2, n):
		if n % x == 0:
			print(n, 'equals', x, '*', n//x)
			break
		else:
			print(n, 'is a prime number')

HTMLの <pre><code>〜</code></pre> の中のテキストの改行やスペースなどが、そのままページに反映されているのがわかると思います。

pre要素が１つのブロックを作るため、p要素などの要素の中に入れる必要はありません。

HTML + CSS

HTML

<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>

console.log("hello")はコンソール画面に「hello」と表示します。

デフォルトでは <code> 内のテキストは、一般的に font-family: monospace; が適用されているため、等幅フォント（コードを表示するときによく使うフォント）で表示されますが、少し区別がしづらいので、CSSを使ってわかりやすくしてみます。

HTML

<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>

CSS

code {
	background-color: #d2b48c;
}

console.log("hello")はコンソール画面に「hello」と表示します。

まずは背景色（background-color）をつけてみました。

これだけだと文字のすぐ近くにだけ背景色がついているので、もう少し文字の周りに余裕を持たせたいので余白（padding）を増やしてみます。

HTML

<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>

CSS

code {
	background-color: #d2b48c;
	padding: 0.5em;
}

console.log("hello")はコンソール画面に「hello」と表示します。

これで余白（padding）は増えましたが、角張っていて硬い感じがしますので、次は角を丸く（border-radius）して柔らかさを出してみます。

HTML

<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>

CSS

code {
	background-color: #d2b48c;
	padding: 0.5em;
	border-radius: 5px;
}

console.log("hello")はコンソール画面に「hello」と表示します。

背景に丸みがつき、柔らかい印象になりました。当ページでは Dark mode 時の設定をしており、その Dark mode時に文字が見づらいようなので、次は文字色（color）を設定します。

HTML

<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>

CSS

code {
	background-color: #d2b48c;
	padding: 0.5em;
	border-radius: 5px;
	color: #191970;
}

console.log("hello")はコンソール画面に「hello」と表示します。

このように Light mode と Dark mode で文字の色が変わるようなサイトで、背景色（background-color）を設定した場合は、モードによっては文字が読みづらくなってしまうため、文字色（color）も同時に設定することをお勧めします。

ここまででもずいぶんと明確に <code> で囲われた部分を目立たせることができましたが、さらに明確にするために、背景色の周りを濃い色のライン（border）で囲んでみます。

HTML

<p><code>console.log("hello")</code>はコンソール画面に「hello」と表示します。</p>

CSS

code {
	background-color: #d2b48c;
	padding: 0.5em;
	border-radius: 5px;
	color: #191970;
	border: solid 2px #8b4513;
}

console.log("hello")はコンソール画面に「hello」と表示します。

ここまで目立たせる必要があるのかどうかはわかりませんが、CSSには他にもさまざまなプロパティが用意されていますので、皆さんのサイトのデザインに合わせて色々と試してみて下さい。

他にもコードが長すぎて画面や表示したい枠からからはみ出して表示されるようなケースもあると思います。その場合、pre要素に white-space: pre-wrap; を指定すると、コードが１行に収まりきらない場合にはみ出さずに折り返すようになります。

HTML

<pre><code>
&lt;script&gt;
	var greeting = "Hello everyone. Thank you for visiting our site. We hope you find this site useful.";
	console.log(greeting);
&lt;/script&gt;
</code></pre>

CSS

pre {
	white-space: pre-wrap;
}

<script>
	var greeting = "Hello everyone. Thank you for visiting our site. We hope you find this site useful.";
	console.log(greeting);
</script>

当サイトでは、折り返しを使わずに、横スクロールするように設定しています。この場合は、pre要素に overflow-x: auto; を指定します。

HTML

<pre><code>
&lt;script&gt;
	var greeting = "Hello everyone. Thank you for visiting our site. We hope you find this site useful.";
	console.log(greeting);
&lt;/script&gt;
</code></pre>

CSS

pre {
	overflow-x: auto;
}

Sample

<script>
	var greeting = "Hello everyone. Thank you for visiting our site. We hope you find this site useful.";
	console.log(greeting);
</script>

コードを表示する場合は、タブやスペース、改行の使い方をわかりやすくするためには、折り返しよりスクロールの方がいいのかも？しれません。

読み上げ（アクセシビリティ）について：code自体は特別な読み上げにはなりにくいので、「これはコードです」「以下は出力例です」のように短い説明をそえておくと、支援技術でも理解しやすくなります。

HTML + JavaScript

コードをシンタックスハイライトする

シンタックスハイライトとは、コードを色付けして見やすくすることです。

シンタックスハイライトはライブラリを使えば簡単に実現できます。

prism.js の使用例

ここでは prism.js の導入方法の一例を紹介します。

prism.js
- Download

prism.js の Downloadページから必要なファイル「prism.js」、「prism.css」をダウンロードします。HTML、CSS、JavaScriptのシンタックスハイライトを考えている方は、設定はそのままで Downloadページ最下部の「DOWNLOAD JS」と「DOWNLOAD CSS」からそれぞれのファイルをダウンロードして下さい。

行番号を表示する場合は、Download ページで Plugins → Line Numbers を選択して、対応する CSS と JS を取得してください。ローカル設置なら prism.css の直後にプラグインの CSS、ページ末尾の prism.js の直後にプラグインの JS を読み込めばOKです。

ダウンロードしたら FTPソフトなどを使ってサーバーにアップロードして下さい。

アップロードしたファイルを <head>〜</head>の中で呼び出します。

HTML

<head>
		<link rel="stylesheet" href="prism.css">
		<script src="prism.js"></script>
	</head>

これで準備は完了です。

次は、シンタックスハイライトを使いたいコードを <pre><code>〜</code></pre> で囲みます。

囲んだ <code> タグにどの言語でのシンタックスハイライトを適用するか指定します。

HTMLの場合: <code class="language-html">
CSSの場合: <code class="language-css">
JavaScriptの場合: <code class="language-javascript">

などです。

HTML

<pre><code class="language-python">for n in range(2, 10):
		for x in range(2, n):
			if n % x == 0:
				print(n, 'equals', x, '*', n//x)
				break
			else:
				print(n, 'is a prime number')
	</code></pre>

for n in range(2, 10):
		for x in range(2, n):
			if n % x == 0:
				print(n, 'equals', x, '*', n//x)
				break
			else:
				print(n, 'is a prime number')

All HTML source

HTML

<!DOCTYPE html>
	
	<html lang="ja">
	
	<head>
		<meta charset="utf-8">
		<title>シンタックスハイライトのサンプル</title>
	
		<link rel="stylesheet" href="prism.css">
		<script src="prism.js"></script>
	</head>
	
	<body>
		<pre><code class="language-python">for n in range(2, 10):
			for x in range(2, n):
				if n % x == 0:
					print(n, 'equals', x, '*', n//x)
					break
				else:
					print(n, 'is a prime number')
		</code></pre>
	</body>
	
	</html>

行番号の表示は、<pre class="line-numbers"> と書くだけで自動で有効になります。これは Prism.js に line-numbers の機能（またはプラグイン）を読み込んでいるためで、特別な初期化コードは不要です。

もし行番号が出ない場合は、使用中の prism.css/prism.js に line-numbers が含まれていない、またはプラグインの CSS/JS の読み込み順が正しくない可能性があります。コア（本体）→プラグインの順で読み込み、<pre> 側に class="line-numbers" が付いているか確認してください。

FAQ

Q. 1行だけでも <pre> を使うべき？: A. 1行なら基本は <code> でOK。改行や字下げをそのまま見せたいなら <pre> と合わせます。
Q. HTML 記号（< や &）が表示されません: A. 文字として出すにはエスケープします。例：<、>、&。
Q. 行番号が出ません: A. Prism の line-numbers プラグイン（CSS/JS）を読み込んで、<pre class="line-numbers"> を付けます。
Q. ダークモードで読みにくい: A. 背景色を付けたら文字色も同時に指定。@media (prefers-color-scheme: dark) が便利。
Q. code と kbd と samp の違いは？: A. code=コード片、kbd=ユーザー入力、samp=プログラムの出力例。迷ったら“誰が出した/打つ文字か”で判断。

よくあるエラー早見表

ハイライトの色が付かない: コードと言語クラスが不一致（Python なのに language-javascript など）。正しい言語名に直す。
行番号が出ない: Prism の line-numbers プラグイン未読込 or <pre> に class が付いていない。
タグ記号が消える/崩れる: < と & をエスケープしていない（< / &）。
段落の中でレイアウトが崩れる: <pre> はブロック要素。<p> の中に入れない。
ダークモードで読みにくい: 背景色だけ指定して文字色を未指定。color も一緒に設定。