コードは<pre>でマークアップするべき ...か？

/web/html-css

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

技術系のネタを出すときに避けて通れないのが、ソースコードの出し方。通常は<pre>要素でマークアップするのが一般的。だけど<pre>要素でマークアップすると、基本的にはどれだけ横長になろうがソース中の改行でしか改行されないため、表示領域内に収めることが難しい。

だが待ってほしい。
そもそも<pre>でマークアップしなければいけないのか？

そんな事はない。<pre>（整形済みテキスト）はソース中のスペースや改行をそのまま表示するために作られたタグで、改行や空白に大きな意味をもつ詩や俳句なんかのために用意されている。それがソースコードのマークアップに使われるのは、単にインデントが反映されて便利だってだけの話。ソースコードのマークアップに必要なタグは<code>であって、<pre>を使うのはインデントのため。

Case1: SimpleBits

  1. <p><code>&lt;h1&gt;&lt;img src="img/logo.gif" alt="ROLLYO" /&gt;&lt;/h1&gt;</code></p>

つい先日リデザインされたDan Cederholm氏のSimpleBitsでは、<p>＋<code>によるシンプルなスタイルで表現している。

<pre>に慣れた感覚では些か奇妙に感じられるが、先に述べたように、文法的には全く問題ない。

Case2: If..Else

  1. <ol class="codelist">
  2. <li class="tab0 odd"><code>&lt;?php</code></li>
  3. <li class="tab1 even"><code>$u_time = get_the_time('U');</code></li>
  4. <li class="tab1 odd"><code>if ((time() - 1209600) &gt;= $u_time){//60*60*24*14 = 1209600</code></li>
  5. <li class="tab0 even"><code>?&gt;</code></li>
  6. <li class="tab1 odd"><code>&lt;!-- Place your adsense code here --&gt;</code></li>
  7. <li class="tab0 even"><code>&lt;?php } ?&gt;</code></li>
  8. </ol>

現在はリデザイン真っ最中であるPhu Ly氏のIf..Elseでは、<ol>と<code>を組み合わせる凝った演出をしている。

この方法の最大の利点は、見た目が判りやすいこと。<pre>とは反対に表示領域内での改行を前提としているが、一行ずつ明確に切り分けているので可読性はそれなりに有している。

Case3: A List Apart

  1. <pre>
  2. .menu a {
  3. display: block;
  4. width: 150px;
  5. }
  6. </pre>

WaSPの共同創設者Jeffrey Zeldman氏のA List Apartでは著者によって微妙に違うが、<pre>のみ、もしくは<pre>＋<code>スタイルを採っている。

<pre>最大の利点は、なんといっても記述が簡単なこと。そしてそのままコピペで使えること。

Case4: 24Ways

  1. <ol class="code">
  2. <li><code>label {</code></li>
  3. <li class="tab1"><code>cursor: pointer;</code></li>
  4. <li><code>}</code></li>
  5. <li class="source">Source: <a href="/code/revealing-relationships-can-be-good-form/1.txt" title="Download the above code as a textfile">/code/revealing-relationships-can-be-good-form/1.txt</a></li>
  6. </ol>

今年で2回目となる、豪華執筆陣によるコラボレーションブログ「24Ways」。ここでもIf..Elseと同じ<ol>＋<code>が採用されている。

（If..Elseでも使えるようにはなっているが）ソース元へのリンクを用意することにより、一覧性および利便性も確保している。

Case5: Stopdesign

  1. <p class="codeblock"><code>
  2. #topleft {<br />
  3. &nbsp;&nbsp;position:absolute;<br />
  4. &nbsp;&nbsp;top:0;<br />
  5. &nbsp;&nbsp;left:0;<br />
  6. &nbsp;&nbsp;}
  7. </code></p>

Web標準を実務レベルに押し上げた立役者Douglas Bowman氏のStopdesign。（もう3年はデザイン変わってないのだけど）ここでも先のSimpleBitsと同じ<p>＋<code>スタイルを採っている。

インデントを &nbsp; で表現していることが特徴的。確かにこうすると、<pre>と比べてもコピペ性能に大差ない。

Case6: 国内

日本では<pre>単体、もしくは<pre><code>が主流。ともすれば横方向にはみ出る<pre>内テキストを、どうにかして制御しようという試みは各所で行われていて、様々な工夫が見られる。

memo: ソースコードに限った話ではないが、当サイトでも「横方向にはみ出るテキスト」に関連する記事は出している。

まとめ

<pre>全盛の日本に比べ、海外ではデベロッパ中心に「ソースコードを通常のインラインテキストとして扱う」ケースが多く見られる。

<pre>が抱える問題は「oveflow: auto;」で概ね解決するのだが、これはスクロールバーによる見た目の問題以前に読みにくく、使いにくい。自分でも今までいろいろ工夫してきたが、何かを満たすと何かを犠牲にしてる感覚が強く、納得には至らなかった。

ま～すったもんだあって、当サイトでは現在、<ol>＋<code>案を採用しています。欠点は記述が面倒なことだけど、これは自前でコード整形フォームとか作って気にならなくなりました。コピペではインデントが反映されませんが、これはそもそも人によって半角2つとかタブとか好みがあることだし... ただ、なるべくソース元にリンク張るようにはしてます。

なにより見た目には代えられない（ぁ

2008.02.15 追記

はてブより、id:vantguarde氏のタレコミ「HTML5だと<pre><code>でコードを表すように定義されてるよ」。

あとでよむ ...が、コードの再利用性を重視してW3Cが<pre><code>式を推す流れは理解できる。しかしながら、どうせなら専用のタグを定義してほしいな～、とかとか。同じくはてブより、id:Brenhilt氏のコメントに同意。

2008.02.15 さらに追記

なにぶん古い記事なので、今の考えも記録しておく。

仕様自体に大きな変化がないため（HTML5とかXHTML2.0とかは話題にはなっても、まだまだ現実的じゃない）、1年経ってもこの問題に関して大きな動きはないです。当サイトでも相変わらず<ol><li><code>でやってます。目視での理解を重視しているのと、行番号と併せて説明できる点が便利だからですね。もともとサイトそのものが俺用メモ帳って背景もあり。

手軽にコードを利用するにはコピペが便利なのは確か。実践を重視するなら<pre>を選ぶと良いでしょう。解説や説明に重点を置くなら<ol><li><code>が便利です。たとえばコードそのものはダウンロードしてもらい、注意点を抜き出して説明するときとか。ライブラリ／ドキュメントの関係を想像すると良いかも。

memo: <ol><li><code>案にあるインデントの問題は、Vimみたくインデントが楽なエディタであれば、（自分で使う分には）ほぼ無視できる。

2008.12.10 追記

はてブより、id:shhin_advance氏の感想「うちの環境だと ol 使うと行番号もいっしょにコピーされちゃう」。たぶんFirefoxのことだと思います。あれは俺も一長一短だと思います。Operaユーザの俺は勝ち組だとかそんなことは考えません。たぶん。きっと。

<ol>式は一部をピックアップして説明するのが凄く楽で、<pre>式はそのままコピペできるに尽きる。とはいえ著者と利用者のインデント規則の違いとか、解りやすさ≠使いやすさとか、そもそも長いコードはダウンロードさせろよ、とかいろいろあるよね。最近はコピペ用のJS書こうかとも思ったりして。単純なコピペは誰のためにもならないという考え方もアリ。

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。