あらゆる環境でアスキーアートを快適に閲覧出来るCSSはコレ！

現在自分はやる夫之書のほか、やる夫 Wiki・やる夫AA録2と3つのアスキーアート(AA)関連のサイトを運営しています（あれ、いつのまにこんなに増えた？）。

AAをブラウザ上で適切に表示させるには、スタイルシート(CSS)でフォントと文字の大きさ・行間を指定する必要があります。ウィキペディアには以下のようにするように書かれています。

主に2ちゃんねるおよび、その影響を受けた電子掲示板で使用される。数行?十数行であることが多いが、巨大なものでは50行に達する場合もある。 2ちゃんねる黎明期に普及していたInternet Explorer5.0での表示を基準としたMS Pゴシック16ピクセル(12ポイント)、行間2ドットを標準として作られている。 W3C勧告のCascading Style Sheetsを利用してアスキーアートに適した表示を行う場合は、以下のように指定することが望ましい。
font-family: IPAMonaPGothic,'ＭＳ Ｐゴシック',sans-serif;
font-size  : 16px;
line-height: 18px;
MS PゴシックがプリインストールされていないWindows 以外では正しく表示しにくいため、その欠点を解決するため、利用がフリーなフォント「モナーフォント」が開発された。このモナーフォントは、Linux を始めとする他のオペレーティングシステムでも利用可能であることから、この問題点は既に克服されている。モナーフォントには、IPA モナ、M+IPAモナなど数種の派生フォントが存在する。

しかし、以下に上げるような点から、このCSSのフォント指定では不完全と言えます。そこで、どんな環境でもAAを快適に見ることが出来るスタイルシートを考えてみました。

Internet Explorer

Internet Explorer 8: ホームページ

言わずと知れたマイクロソフト製の、Windowsのデフォルトのブラウザです。HTMLレンダリングエンジンはTridentといい、LunascapeやSleipnirなど、IEコンポーネントブラウザはこのエンジンを積んでいます。

IE系はWindowsしかないので、OSごとに表示が違うようなことが無いので対応が楽だな・・・え、IE:macなんてもう知りません。

Windows xpまでは上記の通りMS Pゴシック・16ピクセルでの表示が標準だったけれど、Windows Vista以降はメイリオが標準になった（あれ、IE7から、だっけ？）ので、ブラウザのフォント設定を変えないのであれば、サイト側で指定する必要がある。まあ'ＭＳＰゴシック'と指定すれば大丈夫です。

・・・と言い切りたいところだけれど、Windows 7で採用されたMS Pゴシックはフォント環境がJIS90からJIS2004に切り替えられたため、フォントの表示が違うという問題があるようです。

上記のマイクロソフトのサイトから、旧バージョンのMS Pゴシックをインストール出来るそうだ。この旧フォントについて、更新履歴＠飼育日誌ではフォント名を「Mona」とすることを推奨している。

前言撤回に近いですが、「AAUGの裏 | WindowsVistaでのMSPゴシック」で紹介されている方法で旧ゴシック（XPに入っているMS Ｐゴシック（JIS90型）のこと）のフォント名を変えてVistaにコピーする場合、フォント名は「Mona」にすることをオススメします。

なぜかというと、「Mona」はMacやUNIX用のモナーフォントに使われているフォント名であり、以下のようなことが考えられるからです。

Mac/UNIX用モナーフォントと旧ゴシックの両方を併用するという必要性はまず考えられないので、フォント名が被っていても問題はない。

むしろ、AA表示のため既に「Mona」をスタイル指定に組み込んでいるサイト（例：はてなダイアリー）では管理者による新たな対応なしで、旧ゴシックによる閲覧が可能になる。

各ブラウザ等でフォント指定する際、「ＭＳＰゴシック」の近くに表示されるので分かりやすい。

2ch標準AA用のフォントであることが名称からも分かりやすい。

「AAUGの裏」のサイトが閉鎖されてしまっているので「紹介されている方法」が分からないのだが残念・・・。とにかく、旧MS Pゴシック(JIS90)があるPCはフォント名を「Mona」にしていることがあるかもしれないので、Windows利用者で最も利用者が多いIE向けには、Monaを最も優先してフォントを指定するのが良いでしょう。似た感じでIPAモナーも次に書いておきましょうか。

あと、Windows 9x系向けにIE 5.5/6用パッチがあるらしい。今さら10数年前のOSに対応するのも面倒ですが、一応「MS PGothic AA」も付け加えておきます。

というわけで、Mona・IPA モナー Pゴシック・MS PGothic AA・ＭＳＰゴシックという順番で指定します。Microsoft謹製なのに、MS公式のフォントが一番後ろというのもなんか変な話ですが。

Safari

アップル – Safari – Safari 4の登場です。 – 目の前にひろがる新しいウェブの世界。

Appleが開発した、Mac OS X　v10.3以降の標準ブラウザで、Windows版も公開されています。レンダリングエンジンはWebKitで、Google Chromeと同じなので、表示はほとんど同じです。

MacにはMS Pゴシックのフォントは標準ではついてこないのですが、Office:macを購入したりすればインストールすることが出来ます（自分もこの方法で手に入れました）。もしくはモナーフォントかIPAモナーフォントが無料で配布されているので、それをインストールすると、（厳密にはちょっと表示が異なるかもしれないが）ズレ無くAAを閲覧出来ます。

Safariでは、MS Pゴシック・モナーフォント・IPAモナーフォントの何れもちゃんと表示できます。ただ、モナーフォントはローマ数字（ⅠⅣⅩなど）が組まれていないため、その部分が空白になってしまいます。ズレないだけましだけど、他2つのフォントなら表示出来るので、その2つを優先させて表示した方が良いですね。IPA モナー Pゴシックのローマ数字には、MS Pゴシックにはあるセリフ（sans serif サンセリフ＝セリフの無い書体・・・なのに？）がないので、MS Pゴシックを一番優先したいです。

まとめると、ＭＳＰゴシック・IPA モナー Pゴシック・Monaの順で指定します。これまたなんでMS謹製フォントをAppleのソフトで優先せにゃならんのだろう。

Mozilla Firefox

次世代ブラウザ Firefox ? 高速・安全・カスタマイズ自在な無料ブラウザ

Mozilla Foundationが開発する、オープンソース・クロスプラットフォームのブラウザで、機能拡張が多いことも売りの一つ。レンダリングエンジンはGeckoで、Mozilla Suite→SeaMonkeyやCamino、Netscapeなんかと同じです。

Mac上でFirefoxを立ち上げてAAを表示させると、MS Pゴシック及びIPA モナー Pゴシックは微妙にズレが生じます。例えばやる夫の顔だけとかだったら大丈夫なのだけれど、外側を罫線で囲ったりなど凝った作りのAAはズレが大きくなります。おそらくGeckoエンジンとアンチエイリアスの相性が悪いのじゃないかと思っています。

ところが、これがモナーフォントだと全くずれずに表示できます。フォントによってずれが違うなんて、これはこれで謎。まあ兎に角、FirefoxではMona・IPA モナー Pゴシック・ＭＳＰゴシックの順が良いと思われます（IPA モナー PゴシックとＭＳＰゴシックの順は特に指定しなくても良い、かな？）。

Opera

ウェブブラウザ Opera | 高速かつ安全な多機能ブラウザ | 無料ダウンロード

ノルウェー発のクロスプラットフォームなブラウザで、タブブラウジングやマウスジェスチャー、スピードダイヤルなど、その他のブラウザにも取り入れられた機能をいち早く搭載していた草分け的存在。メールクライアントも含んでいて、BitTorrent機能も備えています。京ぽんことDDIポケット（→ウィルコム）の京セラ端末にOperaブラウザが搭載されたことも有名ではないでしょうか。

ただ、独自エンジン故か、なかなか癖が強いブラウザでもある（と、個人的に思っています）。opera フォントでググると結構その手の記事が出てくるように、フォント周りはけっこう厄介らしい。

それでも、ブラウザに関してはサイト側でフォントを指定すれば問題ない、はずなのだが、Mac版のOperaはさらに厄介な仕様（というかバグ？）を含んでいます。

その1つがどうやってもMS Pゴシックを無視し、その次のフォントを読み込むというもの。以下のように書けば普通は最初の「ＭＳＰゴシック」になるはずなのに、3番目の「IPA モナー Pゴシック」にブラウザ側では表示されるのです。


.entry_body dl{
	font-family:"ＭＳ Ｐゴシック","MS Pゴシック","IPA モナー Pゴシック",IPAMonaPGothic,Mona,sans-serif;
}

Windows版ではこの設定でも問題なくMS Pゴシックで表示されているので、Mac版のバグのよう。

もう1つの厄介な点は、"MS PGothic"と指定するとその後のフォント指定もさっぱり無視されてしまうこと。上記とほぼ変わらないはずだが、以下のように指定すると、右のように全くズレズレになってしまう。何故だっ！


.entry_body dl{
	font-family:"ＭＳ Ｐゴシック","MS Pゴシック","MS PGothic","IPA モナー Pゴシック",IPAMonaPGothic,Mona,sans-serif;
}

Mac版のOperaも考慮するなら、IPA モナー Pゴシック・Mona・ＭＳＰゴシックの順が良いのかな。無視されるだけだったらMS Pゴシックを優先しても良いかも、意味ないけど。

CSSハックでまとめる

ブラウザ毎にどういう風にフォントを指定するか、をまとめたところで、実際にサイトで表示させることを考えます。ブラウザごとに異なるスタイルシートを読み込ませる、という方法もあるけどそれはちょっと面倒だし、レンタルブログなどですぐに使えるようにしたいので、CSSハックを使って対応することにします。

Operaだけに適応させたいCSSハック – MOMIZINE

これを参考にして、以下のように書いてみました。


.entry_body dl {
	font-size:12pt;
	line-height:18px;
	font-style:normal;
	font-weight:normal;
	letter-spacing : 0;
}
/* Opera */
.entry_body dl{
	font-family:"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,Mona,"MS PGothic AA","ＭＳ Ｐゴシック","MS Pゴシック","ＭＳＰゴシック","MSPゴシック","MS Pｺﾞｼｯｸ","MS PGothic",sans-serif;
}
/* firefox */
:-moz-read-only .entry_body dl{
	font-family:Mona,"MS PGothic AA","ＭＳ Ｐゴシック","MS PGothic","MS Pｺﾞｼｯｸ","MS Pゴシック","ＭＳＰゴシック","MSPゴシック","IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,sans-serif;
}
/* safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
.entry_body dl {
	font-family:"MS PGothic AA","ＭＳ Ｐゴシック","MS PGothic","MS Pｺﾞｼｯｸ","MS Pゴシック","ＭＳＰゴシック","MSPゴシック",IPAMonaPGothic,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",Mona,sans-serif;
}
}
/* IE */
.entry_body dl{
	_font-family:Mona,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,"MS PGothic AA","ＭＳ Ｐゴシック","MS Pゴシック","MS PGothic","MS Pｺﾞｼｯｸ","ＭＳＰゴシック","MSPゴシック",sans-serif;
}
*:first-child+html .entry_body dl{
	font-family:Mona,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,"MS PGothic AA","ＭＳ Ｐゴシック","MS Pゴシック","MS PGothic","MS Pｺﾞｼｯｸ","ＭＳＰゴシック","MSPゴシック",sans-serif;
}

.entry_body dlとあるのはやる夫之書の仕様なので、使うサイトによってpreだったりdiv.entryだったり読み替えてください。面倒だったら*にすると、サイト全体がAA表示に対応してしまいます。

現在このスタイルシートをやる夫之書で使用しているので、AAの表示に関して何か問題があればお申し付けください。特にLinux版のOperaなどは未テストなので、どんな風に表示出来ているのか分かりませんので。

あと、ウィキペディアによれば「モナーフォント」「IPA モナ」の他、「M+IPAモナ」なるフォントもあるらしいのですが、ちょっとググっても見当たらなかったので、情報をお持ちの方はご一報をお願いします。