« バックスラッシュハックについての考察 | Back To Blog Top | Daily Link »
Blogにコードを貼り付ける時。
ブログにコードを貼り付ける方法で悩むの巻
pre要素へのスタイル指定
Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
ソースを貼付ける50の方法
pre 要素のスタイル定義とマークアップ
Blogにコードを貼り付ける際のアレコレが、あちこちで話題に上っています。
これまでに余り情報を見つけられなかったので、とても参考になりました
折角なので、僕もひとつ書いてみたいと思います。
XHtml
こちらは至ってシンプルです。
<pre>
<code>
</code>
</pre>
構造としても<code>を使うのが正しいかな、と思うので、こうしています。
こちらは特に問題無いかと思います。
CSS(Befor)
今回の色んな方のエントリを参考にして、多少変更を加えました。 まずはBeforです。
pre {
width:450px;
overflow:auto;
margin:10px 0;
background:#f5f5f5;
}
<pre>に対して、widthとoverflow:autoを指定しています。
背景色は薄めのグレーで、フォントファミリーやサイズはそのままです。
確かにこれでも悪くは無いのですけど、もう少し見やすくですとか、IEのデザインをすっきりさせたいな、と思っていました。
そこで、皆さんのエントリを参考にして改善したのが以下です。
CSS(After)
pre {
width:450px;
overflow:scroll;
margin:10px 0;
background:#f5f5f5;
}
/*other than ie6*/
div.column>pre {
overflow:auto;
}
pre code {
font-family:"Courier New",monospace;
font-size:0.85em;
}
overflow:autoで横スクロールが出る時に、IEのみ何故か縦スクロールが出る問題では、2xupの上之郷谷さんの手法をそのまま頂戴して、IEにはoverflow:scroll、それ以外にはoverflow:autoとしています。
font-familyはi d e a * i d e aの中の方のエントリを参考に、Courier Newにしています。
コード関係は英字が基本なので、font-sizeは少し小さめにしました。
ちなみに何故、フォント関係を<code>のスタイルとして指定したかと言うと、領域に関する事は<pre>に、内容に関する事は<code>に、とした方がより構造通りかな、と考えたからです。
その他諸々
実体参照に関しては、実は何も対策していませんでした。
と言うより、頭からスッポリと抜け落ちていましたので、すぐさま修正しました。
空白文字に関しては、実際の記述はTabですけど、<pre>内では半角スペースに直しています。
これはHtml4.01の仕様書で、Tabの使用を避けるように強く要請されている為です。
TracBack
Reference Entry: Blogにコードを貼り付ける時。:
2xup.org » pre 要素のスタイル定義とマークアップ
Macintosh 版 Internet Explorer では子セレクタを利用した分岐は認識されるので、CSS に若干の変更を加えました。
TracBack Time: 2006年09月13日 19:02
404 Blog Not Found » javascript - Text to HTML Entities Encoder
Sourceを貼付ける際に実体参照化するとき、みなさんはどうしていますか?
404 Blog Not Found:ソースを貼付ける50の方法...
TracBack Time: 2006年10月06日 17:38
猫鯖の部屋 » 個人的なメモ：ソースを表示するのによさそうなスタイルシートについて
最近ちょくちょくとCSSを弄ったり適当な内容の記事を作ったりしているため コマン...
TracBack Time: 2007年03月01日 21:24