標準環境

2ちゃんねる等でAAを制作・閲覧する場合に標準とされる環境について。

■ 2ちゃんねるAAカテゴリ各板での標準環境

歴史的経緯から、Windows上のInternet Explorer 5.0上で、フォントサイズ「中」で表示した場合の表示が基準となっている。MS Pゴシック16px(96dpiの環境では12pt)・行間2ドットがこれに相当する。

上記AAには「 」と「 」の2種類の数値文字参照が含まれている。2ちゃんねるで用いられるAAでは、これらを使用したものは比較的少数なので、実際のところこのAAがズレて表示される環境(Opera 9.x 後述)であっても次のAAの縦線が揃って表示されればほとんど支障がないと思ってよい。

なお上記のチェック用AAでは「行間2ドット」の確認はできない。理屈上、行間2ドットの状態であれば下記のAAのななめ線が一直線につながって表示されるはずである。ただし、実際には目の錯覚が原因でズレているように感じる可能性もある。

■ フォント

MS Pゴシックの項を参照。

■ 主要ブラウザの設定

Internet Explorer(Trident)

IE 5.5以降の場合、ギリシャ文字・キリル文字の表示で欧文フォント(Times New Roman)を使用するため、上記の環境とは表示が異なります。以下の方法で回避できます。

IEコンポーネント使用の Sleipnir などのタブブラウザ、OpenJane(非Doeタイプ)などの専用ブラウザなどを使用する場合も同様です。

Firefoxなど Mozilla系(Gecko系)ブラウザ

デフォルトでは行間がやや広めになります。行間2ドット(行の高さ112.5%)になるよう、ユーザスタイルシート等で調整すれば、ほぼ「標準」の表示が得られます。ただし実体参照による文字の表示が他の環境と異なる場合があります。

• Firefox 1.0.x の場合、デフォルトのフォントをserifからsans-serifに変更する必要があります。
• Firefox 1.5以降はデフォルトで sans-serif を使用するように設定されています。

Opera

デフォルトでは行間が0になります。行間2ドット(行の高さ112.5%)になるよう、ユーザスタイルシート等で調整すれば、ほぼ「標準」の表示が得られます。ただし実体参照による文字の表示が他の環境と異なる場合があります。

• Opera 6.x では表示は問題ありませんが、AAのコピー&ペーストが正常にできません。
• Opera 7.03 では空白文字の表示に問題があり、AAが大幅に崩れます。
• Opera 9.x では、 ( )   などの表示がかなり違うため、上記「右のAAのズレない環境が標準です」のAAがずれて見えます。ただし、大多数のAAはこれらを使用していないので、問題になることは少ないと思われます。
• Opera 8.54 では上記の問題点はとくに発生しません。

その他の環境

• MacおよびUnix系OSの場合、モナーフォント?の導入で、ずれのないアスキーアートが見られるようになるかもしれません*2。http://monafont.sourceforge.net/
• Macの場合、Microsoft Office の導入で MS Pゴシックが利用できるようになるみたいです*3。この場合、フォントサイズは16pt(16px)に設定します。

■ スタイルシートの例

フォントサイズ16px(Win 12pt, Mac 16pt)に固定

IEを使用している場合、フォントサイズを「中」以外にしても大きさが変わりません。

p, dd {
  font-family:'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  font-size:16px;
  line-height:18px;
}

フォントサイズをブラウザのデフォルトに任せる場合

IEでフォントサイズの変更が効くようになります。(大きいAAの場合にフォント「小」にしておおよその全体像を見るような使い方ができる)

p, dd {
  font-family:'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  font-size:100%;
  line-height:1.125;
}

Firefox のユーザスタイルシートでドメイン指定を使う(1.5以降)

以下のような内容を UserContent.css に記述。例として、2ちゃんねるとふたばの場合。

@-moz-document domain(2ch.net), domain(2chan.net) {
  dd {
    font-family:'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    font-size:100%;
    line-height:1.125;
  }
}

■ 外部リンク

• AAを見るための環境設定-しっぽのとこ-