このエントリを読んで、ちょっと勉強してみるか、と。
昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。ちょっと気になったので調べてみました。
僕は個人的には殆ど何も考えていなくて。
まぁそんなに頻度も高くないというのもあるけれども、
参考までに色んな人のサイトを見てみたら、
如何に自分のやり方が鈍臭く、かつ、適当でないかがよくわかった。
僕の場合は以下の通り。書くまでもない。
- コードをコピペ。
- <>"をそれぞれ、実体参照化（それぞれ、<>"）
- 半角スペース（またはタブ）を全角スペース1個または2個に変換
- blockquoteで括ってそのままアップ
この欠点は、
- 等幅ではないので、可読性が低い
- 領域が連続してるのでコピーしにくい
- 定義的にコードであることがわかりにくい
そういうわけで、なにがしかの改良を行おうと思うんだけど、
色々上げられているものを参考にした、
改良案はこんなところ。
直接的には、hail2u.netさんを参考に（および引用）してみました。
hail2u.net – Weblog – pre要素へのスタイル指定
- <pre>の利用
- <code>の利用
- font-familyの指定（等幅）
- white-space:preの指定（スペースの連続を認める）
- overflowの設定
1. <pre>の利用
2. <code>の利用
preを使う意味は、
- ほとんどのブラウザでpreは等幅フォントで表示される
- ほとんどのブラウザでpreのwhite-spaceはpreになっている
（いずれもhail2u.netさんの該当エントリから引用）
なのだけど、重ねてcodeを使うのは、
クラス名をなるべく増やしたくないなぁ、ということで。
3. font-familyの指定（等幅）
これは前提みたいなもん。
4. white-space:preの指定（スペースの連続を認める）
同じく。
全角スペースは確かに連続してても認められるけど、
わざわざ変換する手間を考えれば、
こっちの方が遙かに楽&有用。
5. overflowの設定
overflowを指定する意味は、コードを読みやすくするためではなく(むしろ読みづらくなるはず)、
内容に合わせてボックス幅が際限なく拡大するというInternet Explorerの問題点に対する
解決のために使っているというのが一般的だと思う。
（引用元、同上）
そうかそうか、それで回避できるんだ。
スクロールバー（特に横）は嫌い何だけど…仕方がないか。
以上を盛り込んでみたのがこちら。
pre {
width: auto;
_width: 90%; /*for IE*/
overflow: auto;
_overflow: scroll; /*for IE*/
font-size: 75%;
letter-spacing: 1px;
color: #3d4263;
background-color: #f5f5f5;
border: 1px solid #cccccc;
padding: 8px 16px;
}まぁ何とか大丈夫だろう。
とりあえず、これで。
ところで、コードと同じように、
等幅、フォント…などで同じような感じになるのが、AA（アスキーアート）。
コードの場合はずれても問題ないけど、
こっちの方は、ずれたら意味ないんで。
そういうわけで、参考にすべきサイトはこれ。
AAなにっき….〆ﾐ・д・,,ﾐ
まず、これ。
（エントリの趣旨と違うけど）
AA（アスキーアート）は､Windows＋ＩＥ､フォント「ＭS Pゴシック 中(12ポイント)」(IE標準)の状態で､
最適表示になります（ズレのないAAが見られます）｡
盲点だったのは、この設定。
IE5.5以上では『ギリシャ語』と『キリル言語』のフォントが各々異なり､AAがズレます｡
・Windows2000、XPの場合。
インターネットオプションから、フォントを各々（日本語、ギリシャ語、キリル言語）
「MS Pゴシック」に変更するとズレが直ります｡
あーなるほど。
多言語設定クソ食らえ的になるけど、確かにこれで、
ずれなくなりますなぁ。
CSSで対処できないのかしら？と思うけど、
CSSでは元々、『MS Pゴシック』を指定されてるみたい。
それでもずれて見えてたから、
必要な設定なのね。
で、次に貼る方。
これをスタイルシート（CSS）にコピペ。
例に挙げられてるような設定をCSSに追加してやれば、ずれなくなるみたい。
重要なのは、フォント名、フォントサイズ、フォント高。
というわけで、ここでは、こんな風に指定してやることにしました。
.aa{
font-family:"ＭＳ Ｐゴシック","Mona","mona-gothic-jisx0208.1990-0",sans-serif;
font-size:12px;
line-height:14px;
}結果はこんな感じ。
↓↓
やつを追う前に言っておくッ！
おれは今やつのスタンドをほんのちょっぴりだが体験した
い…いや…体験したというよりはまったく理解を超えていたのだが……
,. -‐'''''""¨¨¨ヽ
(.＿＿_,,,... -ｧァﾌ| あ…ありのまま 今 起こった事を話すぜ！
|i i| }! }} /／|
|l､{ j} /,,ｨ//｜ 『おれは奴の前で階段を登っていたと
i|:!ヾ､_ﾉ／ u {:}//ﾍ 思ったらいつのまにか降りていた』
|ﾘ u' } ,ﾉ _,!V,ﾊ |
／´fト､_{ﾙ{,ィ'ｅﾗ , ﾀ人 な… 何を言ってるのか わからねーと思うが
/' ヾ|宀| {´,)⌒`/ |<ヽﾄiゝ おれも何をされたのかわからなかった
,ﾞ ／ )ヽ iLﾚ u' | | ヾｌﾄﾊ〉
|／_／ ﾊ !ニ⊇ '／:} V:::::ヽ 頭がどうにかなりそうだった…
/／ 二二二7'T'' ／u' __ /:::::::/｀ヽ
/'´r -―一ｧ‐ﾞＴ´ '"´ ／::::／-‐ ? 超スピードだとか催眠術だとか
/ // 广¨´ /' ／:::::／´￣｀ヽ ⌒ヽ そんなチャチなもんじゃあ 断じてねえ
ﾉ ' / ノ:::::`ー-､___／:::::／/ ヽ }
_／｀丶 /::::::::::::::::::::::::::￣`ー-{:::... ｲ もっと恐ろしいものの片鱗を味わったぜ…
なかなか、奥が深い。
いや、そうでもないか。
各サイトに感謝。
