アスキーアートをMacのブラウザでややずれないように簡易cssスタイルを指定する

Macを使うようになってしばらく経ちました．
私はブログにアスキーアートを使っています．しかし，Mac経由ではどうにもアスキーアートの表示が崩れてしまうことに悩んでいました．

これはCSSの指定が悪かったからでして，フォントの指定を変えればMacのブラウザ経由でもアスキーアートを多少ずれないようにすることができます．

確認したブラウザはFirefoxとChromeとSafariです．

全体のフォントを指定

以下のようにまずフォントを指定してあげます．

* {
font-family:Mona,"ＭＳ Ｐゴシック","MS PGothic",verdana,arial,sans-serif;
font-style:normal;
font-weight:normal;
margin:0;
padding:0;
}

アスキーアート用のクラスを作ります

次にアスキーアートを表示したい領域用のクラスを作りました．

.aa {
font-size:12px;
line-height:100%;
}

表示の確認

あとはこんな感じで表示を確認してみます．

<div class="aa">
| 　 　 |＼|／　|　　　　　｜ 　　｜
| ∧ ∧  |/⌒ヽ、| ∧＿∧ | ∧∧ |
|(,,ﾟДﾟ)||,,ﾟ Θﾟ）|（； ´Д｀）|(=ﾟωﾟ)|
</div>

どうでしょうか．

※以下のAAのｽﾞﾚない環境が標準です｡
| 　 　 |＼|／　|　　　　　｜ 　　｜
| ∧ ∧  |/⌒ヽ、| ∧＿∧ | ∧∧ |
|(,,ﾟДﾟ)||,,ﾟ Θﾟ）|（； ´Д｀）|(=ﾟωﾟ)|

ややずれてしまいますが，それでもMacから見るとWindows向けの設定であった前の指定だけよりもだいぶマシになっているはずです．

ちなみにiPadやiPhoneではアスキーアートは大きくずれてしまうみたいです．

MacとWindowsでそこそこ表示できる設定なのでは

Windowsでアスキーアートが最も見やすいCSSの設定は今回書いた内容と異なると思います．しかし，このスタイル設定にしても，Windowsでのアスキーアートの閲覧がとてもすぐれないとは言えないのではないでしょう．

つまりこの設定はWindowsとMacで我慢できる程度に少し崩れる表示と言えるのではないでしょうか．

MacとWindowsでそこそこましに表示できるのはこの辺で良いんじゃないだろうかと思いました．細かく設定したい人はもっと細かく書けばいいんじゃないですかね．

2ちゃんねる AA大辞典 (2003/02/28) まるへそ太郎 商品詳細を見る