ソースコードのマークアップ

動機とか

　ソースコードをWeb上で紹介する際，最近まで私はpreタグを単純に使っていたのですが，最近サイトのデザインを変えた際に，表示の乱れを直すべくスタイルシートに幾つかの指定を加えて現在に至っています。この作業の際に，preタグを用いた際の表示の乱れに加えてソースコードのマークアップについても若干考えさせられたので，代表的な二つの方法についてまとめたいと思います。

preタグを使う

　余り使いたくないタグではあるのですが，ソースコードをエディタで見るのと同様の体裁で見せるもっとも手軽な方法であることは間違いありません。但し，標準では折り返しも掛からないので，少し長い行があると全体のレイアウトに影響が出ることになりかねません。そこで，スペース内に収まる様スタイルを指示する必要があります。以下に，スクロールバーを表示する方法と，強制的に折り返す方法を紹介します。codeタグは表示内容の調整用では無しに，コードの一部を載せている事を示す為に指定しています。

スクロールバーを表示する

　CSSでは領域をはみ出す場合に，はみ出して表示させる，表示しない，スクロールバーを表示する，ブラウザに任せる，の四つの方法を指定できます。今回はスクロールさせるのですばりスクロールバーを表示する指定をするのも手ですが，FirefoxやIEではお任せの指定をした場合あふれた場合にスクロールバーを表示する動作となるので，今回はそれを用いたいと思います。
スクロール指定
<pre style="width:100%;overflow:auto"><code>function sayHello() {
	alert('私の名前は「寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポ パイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助」です。");
}
</code></pre>
　この表示は以下の様になります。 
function sayHello() {
	alert('私の名前は「寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポ パイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助」です。");
}

強制的に折り返す

　スクロールバーによる表示を実際に見てもらえれば分かるとかと思いますが，全体が見えない為，リスト全体が把握し難い表示となります。強制的に改行すると本来一行である行が複数行に分かれて表示されてしまう為，これはこれで見難くなる場合もあるでしょうが，一つの方法として以下に紹介します。
強制折り返し指定
<style type="text/css">
pre.source {
	width:	100%;
	white-space:	pre-wrap;
	white-space:	-moz-pre-wrap;
	white-space:	-pre-wrap;
	white-space:	-o-pre-wrap;
	word-wrap:	break-word;
}
</style>
<pre class="source"><code>function sayHello() {
	alert('私の名前は「寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポ パイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助」です。");
}
</code></pre>
　この表示は以下の様になります。 
function sayHello() {
	alert('私の名前は「寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポ パイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助」です。");
}

順序リストを使う

　ソースコードを紹介するのに順序リストを使う発想は正直無かったのですが，ソースは細切れになってしまうものの，preタグを使うもやもや感，HTMLの中に素のテキストが現れる違和感は消えます。
順序リストを使う
<style type="text/css">
div.source {
	width:	100%;
	overflow:	auto
}
ol.source {
	list-style-type:	decimal;
	margin:	0px 0px 0px 3em;
	padding:	0px
}
ol.source li {
	white-space:	nowrap
}
ol.source li.tab0 { }
ol.source li.tab1 {
	padding-left:	4em
}
ol.source li.tab2 {
	padding-left:	8em
}
</style>
<div class="source">
<ol class="source">
	<li class="tab0"><code>function sayHello() {</code></li>
	<li class="tab1"><code>alert('私の名前は「寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポ パイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助」です。");</code></li>
	<li class="tab0"><code>}</code></li>
</ol>
</div>
　この表示は以下のようになります。
  1. function sayHello() {
  2. alert('私の名前は「寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポ パイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助」です。");
  3. }

まとめ

　本文中でも触れた様に，順序リストを用いる方法は素のテキストが現れることが無いので，preタグに比べてHTMLとしては自然な記述となります。しかし，整形の手間やブラウザによる表示のずれ，ソースコードの再利用性等を考えると，現状ではpreタグを使う方法が一番バランスが良いのではないかと個人的には思います。

リンク