- タグはCODE
- せっかくあるんだし。PREを使うにしても<PRE>,<CODE>と併記で。
- 表示はPRE
- 何もしないと崩れることもあるので、PRE。タグなら<PRE>スタイルシートならwhite-space:pre;インデントも表示されるし。
- ブロック要素で
- CODEタグだとインラインになる場合もあります。背景色を変えたときにインラインだと文字の部分だけ背景色が変わるので矩形で表示した方がスマートかと。と思ったんですが、文中に埋め込みたい場合はそこだけ特別扱いでも良いかも
<code class="inline"></code> - フォントは等幅
- 等幅は譲れない。Courier Newがコードっぽい。
font-family:'Courier New', [ 好きなフォントs, ...] monospace; - はみ出した部分は適当に
- 隠れるのもなんなので、overflow:scroll;で良いんじゃないですかね。個人的にはスクロールバーは常に表示されている方がわかり易いと思う。border表示しなくても端がわかりやすいのでborderの替わりにもなりませんか？(borderの代替自体を目的とするのは邪道ですが)
- 背景色は変える
- グレーっぽいのが多いようですが、変える理由が見やすいように、なら見やすければなんでも。
- タグはエスケープ
- 最低でも<>を<>ぐらいの変換はしたい。できれば"&も"&に。エディタのマクロとかでもそれくらいはなんとか。
- 枠の大きさは横だけ指定
- ブログのレイアウトの所為もありますが、Webサイトは縦長が基本かと思われますので、特別の意図がなければwidthだけ指定で十分だと思います。
- インデントはスペース
- TAB文字は制御がマチマチなので、スペースの方がよさげ。
- IEがウンヌン
- 気にしだしたらキリがない
まとめるとこんな感じです
- <style>
- CODE {
- width : 500px;
- display : block;
- overflow : scroll;
- white-space : pre;
- font-family : 'Courier New', monospace;
- background-color : #EEE;
- }
- </style>
- <code>
- </code>
スクロールバーよりもPRE表示した時の一行目の方が気になりますね。
- <code>first line ...
と書くか、
- CODE:before {
- content : attr(title);
- }
- <!-- 略 -->
- <code title="[ここにtitle属性の値が出ます]">
- </code>
こんなんも良いですね。