CODEとAAを入力するCSSのまとめ。

『等幅フォント』に関する意識がテキトーだったわけだが。
このエントリを読んで、ちょっと勉強してみるか、と。

昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。ちょっと気になったので調べてみました。


僕は個人的には殆ど何も考えていなくて。
まぁそんなに頻度も高くないというのもあるけれども、
参考までに色んな人のサイトを見てみたら、
如何に自分のやり方が鈍臭く、かつ、適当でないかがよくわかった。

僕の場合は以下の通り。書くまでもない。

  1. コードをコピペ。
  2. <>"をそれぞれ、実体参照化(それぞれ、&lt;&gt;&quot;)
  3. 半角スペース(またはタブ)を全角スペース1個または2個に変換
  4. blockquoteで括ってそのままアップ


この欠点は、

  • 等幅ではないので、可読性が低い
  • 領域が連続してるのでコピーしにくい
  • 定義的にコードであることがわかりにくい


そういうわけで、なにがしかの改良を行おうと思うんだけど、
色々上げられているものを参考にした、
改良案はこんなところ。

直接的には、hail2u.netさんを参考に(および引用)してみました。

hail2u.net – Weblog – pre要素へのスタイル指定



  1. <pre>の利用
  2. <code>の利用
  3. font-familyの指定(等幅)
  4. white-space:preの指定(スペースの連続を認める)
  5. 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+IE、フォント「MS Pゴシック 中(12ポイント)」(IE標準)の状態で、
最適表示になります(ズレのないAAが見られます)。

盲点だったのは、この設定。
IE5.5以上では『ギリシャ語』と『キリル言語』のフォントが各々異なり、AAがズレます。

・Windows2000、XPの場合。
インターネットオプションから、フォントを各々(日本語、ギリシャ語、キリル言語)
「MS Pゴシック」に変更するとズレが直ります。

あーなるほど。
多言語設定クソ食らえ的になるけど、確かにこれで、
ずれなくなりますなぁ。

CSSで対処できないのかしら?と思うけど、
CSSでは元々、『MS Pゴシック』を指定されてるみたい。
それでもずれて見えてたから、
必要な設定なのね。



で、次に貼る方。

これをスタイルシート(CSS)にコピペ。

例に挙げられてるような設定をCSSに追加してやれば、ずれなくなるみたい。
重要なのは、フォント名、フォントサイズ、フォント高。

というわけで、ここでは、こんな風に指定してやることにしました。

.aa{
font-family:"MS Pゴシック","Mona","mona-gothic-jisx0208.1990-0",sans-serif;
font-size:12px;
line-height:14px;
}


結果はこんな感じ。

↓↓

                            やつを追う前に言っておくッ! 
                    おれは今やつのスタンドをほんのちょっぴりだが体験した
                  い…いや…体験したというよりはまったく理解を超えていたのだが……
         ,. -‐'''''""¨¨¨ヽ
         (.___,,,... -ァァフ|          あ…ありのまま 今 起こった事を話すぜ!
          |i i|    }! }} //|
         |l、{   j} /,,ィ//|       『おれは奴の前で階段を登っていたと
        i|:!ヾ、_ノ/ u {:}//ヘ        思ったらいつのまにか降りていた』
        |リ u' }  ,ノ _,!V,ハ |
       /´fト、_{ル{,ィ'eラ , タ人        な… 何を言ってるのか わからねーと思うが
     /'   ヾ|宀| {´,)⌒`/ |<ヽトiゝ        おれも何をされたのかわからなかった
    ,゙  / )ヽ iLレ  u' | | ヾlトハ〉
     |/_/  ハ !ニ⊇ '/:}  V:::::ヽ        頭がどうにかなりそうだった…
    // 二二二7'T'' /u' __ /:::::::/`ヽ
   /'´r -―一ァ‐゙T´ '"´ /::::/-‐  ?    超スピードだとか催眠術だとか
   / //   广¨´  /'   /:::::/´ ̄`ヽ ⌒ヽ    そんなチャチなもんじゃあ 断じてねえ
  ノ ' /  ノ:::::`ー-、___/::::://       ヽ  }
_/`丶 /:::::::::::::::::::::::::: ̄`ー-{:::...       イ  もっと恐ろしいものの片鱗を味わったぜ…





なかなか、奥が深い。
いや、そうでもないか。



各サイトに感謝。