HTML

HyperText Markup Language code element.

code 要素

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

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

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

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

code要素のマークアップ例


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

code要素のマークアップ例のサンプル

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

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


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

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

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


<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>

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要素などの要素の中に入れる必要はありません。

code 要素の概要

カテゴリー
フロー・コンテンツ
フレージング・コンテンツ
コンテンツ･モデル
フレージング・コンテンツ
利用可能な場所
フレージング・コンテンツが期待される場所
開始タグ
必須
終了タグ
必須
要素固有のコンテンツ属性
なし
標準的なスタイル

code {
	font-family: monospace;
}

HTML + CSS

HTML source


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

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

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

HTML source


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

CSS source


code {
	background-color: #d2b48c;
}

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

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

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

HTML source


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

CSS source


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

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

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

HTML source


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

CSS source


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

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

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

HTML source


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

CSS source


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 source


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

CSS source


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 source


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

CSS source


pre {
	white-space: pre-wrap;
}

Sample

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

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

HTML source


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

CSS source


pre {
	overflow-x: auto;
}

Sample

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

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

HTML + JavaScript

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

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

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

prism.js の使用例

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

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

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

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

HTML source


<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 source


<pre><code class="language-javascript">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>

Sample of prism.js

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


<!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-javascript">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>

　＞＞サンプルページを表示する