- 追記
-
ここの内容は古いしだめだめなので下記をご笑覧ありたし。
pre要素で書くのはやっぱり邪道ですね。すみません。てなわけでこんなかんじがいいのかも？
というかブラウザで'ＭＳ Ｐゴシック'をデフォルトにしてたら不要なんですが、ここの日記は等幅指定なので（あとLinuxとか）ってことで。
※あとでしっかり確認しときます。
- スタイルシート
div.kumakuma {
overflow: auto;
white-space: pre;
font-size: 0.8em;
font-family: 'ＭＳ Ｐゴシック','IPA モナー Pゴシック',IPAMonaPGothic,Mona,sans-serif;
margin: 1em;
padding: 0.5em;
color: #003;
background-color: #f1f1f1;
line-height: 1.1em;
letter-spacing: 0px;
border-style: solid;
border-width: 1px;
border-color: #fff #003 #003 #fff;
}
【追記】overflow: auto;入れないと幅が勝手に広がっちゃうので入れた方がいいかなぁ。
- html書き書き...
<div class="kumakuma"> ここにコピペ </div>
【追記】確認中ですが
はてなでは<div>で他の要素なしで書くと左側にスペースが入っちゃいますね。ということで、やっぱりpre要素で書くのがいいのかなぁ。
尚、pre要素、white-space属性（いや、もちろんAAのための要素ではないのですけど...汗）を使うわけは、いちいち改行タグ(br)を入れなくてすむからです。blogでは勝手に改行タグを入れてくれる場合が多いのですけど、htmlで書く場合は確実に指定しとかないといけないので。
white-space:pre はIE6の互換モードでは無視されるみたい？
IE6/7の互換モードでは色々と属性を指定すると、一部の指定が無視されちゃったりするので、これもvalidではないけど、おまじない（ナニ）を入れといた方がいいかも。
で、結局こんなかんじかなぁ。ってかややこしいからblogの仕様にまかせて何もしない方がよかったりして（ショボン）
.kumakuma {
margin: 3%;
padding: 1%;
overflow: auto;
font-size: 0.8em;
font-family: 'ＭＳ Ｐゴシック','IPA モナー Pゴシック',IPAMonaPGothic,Mona,sans-serif;
line-height: 1.1em;
letter-spacing: 0px;
color: #003;
background-color: #f1f1f1;
border-style: solid;
border-width: 1px;
border-color: #fff #003 #003 #fff;
width: 90%;
}
- html書き書き...
<pre class="kumakuma"> ここにコピペ </pre>
／￣￣￣￣￣＼ | マイヤヒー♪ | ／￣￣￣￣￣＼ ＼＿＿_ ＿_／ | マイヤフー♪ | ／￣￣￣￣￣＼ ∨ ＼＿＿_ ＿_／ | マイヤホー♪ | ∨ ＼＿_ ＿＿__／ ∩＿＿＿∩ ∩＿＿＿_∩ ∨ | ノ ヽ / ヽ| ∩＿＿＿_∩ / ● ● | | ● ● ヽ/ ヽ| | ( _●_) ミ 彡 (_●_ ) | ● ● ヽ 彡､ |∪| ､｀＼ ／ |∪| 彡 (_●_) | / ＿＿ ヽノ /´> ) （ < ヽ ﾉ ／ |∪| ミ (＿＿＿） / (_／ ＼_ ) （ < ヽ ﾉ ヽ
あんまり意味なかったなぁ・・・（汗）
【1/1】さらに追記
ありゃ?、はてなにはこんなのあったんですね。シランカッタ（汗）。
div.ascii-art{
font-size:12pt;
line-height:18px;
font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","ＭＳ Ｐゴシック","MS Pｺﾞｼｯｸ","MS Pゴシック",sans-serif;
}
というわけで、aa記法使う場合はこのセレクタを自分好みに弄ればいいんではないかなと。（_width: 100%; は互換モード用ですが...）
div.ascii-art {
/* overflow: auto; */
/* white-space: pre; */
font-size: 0.8em;
font-family: 'ＭＳ Ｐゴシック','IPA モナー Pゴシック',IPAMonaPGothic,Mona,sans-serif;
margin: 1em;
padding: 0.5em;
color: #003;
background-color: #f1f1f1;
line-height: 1.1em;
border-style: solid;
border-width: 1px;
border-color: #fff #003 #003 #fff;
_width: 100%;
}
改行(br)を自動で入れてくれるのは便利ですが、overflow: auto（white-spaceを設定すると改行が二重になるのでだめ？）は使えないと思うので、幅に合わせて自動改行折り返しされるのが嫌な場合とかはpre要素と使い分けた方がいいかもしれないですね。
