猿でも分かる CSS 講座 - AA は消毒だ〜

　　　　　　,,､,､､,,,';i;'i,}､,､
　　　　　　ヾ､'i,';||i !｝ 'i, ﾞ〃
　　　　　　　　ﾞ､';|i,!　　'i i"i,　　　　　､__人_从_人__/し､_人＿入
　　　　　　　　 `､||i　|i　i　l|,　　　　　､_）
　　　　　　　　　 ',||i　}i |　;,〃,,　　　　_）　ＡＡは消毒だ〜っ！！
　　　　　　　　　 .}.||||　| ! l-'~､ミ　　　　｀)
　　　　　　　　 ,＜.}||| il／,‐'liヾ;;ミ　　　'´⌒V＾'^Y⌒V^V⌒W^Y⌒
　　　　　　　　.{/ﾞ'､}|||/／　 .i| };;;ミ
　　　　　　　　Y,;-　　ｰ､　　.i|,];;彡
　　　　　　　　iil|||||liill||||||||li!=H;;;ﾐミ
　　　　　　　　{　く；ｧｿ　 '';;,;'' ﾞ};;彡ﾐ
　　　　　　　　ﾞi　[`'''~ヾ. ''~ ||^!,彡ミ　　＿,,＿＿
　　　　　　　　ﾞi　}~~　｝ ';;:;li,　ﾞiミミミ=三＝-;;;;;;;;;''
,,,,-‐‐''''''}￣~フハ,“二ﾞ´ ,;／;;'_,;,7''~~,-''::;;;;;;;;;;;;;'',,=''
　;;;;;;;;''''/_　 / | | `ー-‐'´_,,,-',,r'~`ヽ';;:;;;;;;;, '';;;-'''
'''''　　,r'~ `V　ヽニニニ二､-'{ 十　）＿＿;;;;/　

HTML に AA を貼るときは CSS で消毒した方がいいですよ、という話からフォント周りの CSS の使い方を覚えようというページです。

CSS で AA

最初のお題は、AA (アスキーアート) です。
このサイトでも多用している AA ですが、HTML で AA を表示するにはフォントを正しく定義しておかないと思ったように表示されません。

説明は後回しにして、AA を正しく表示するための CSS は以下のようになります。

.AA {
    font-family: "ＭＳ Ｐゴシック";
    font-size: 12pt;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 100%;
    white-space: nowrap;
}

2ch の AA で使用するフォントは 12pt ＭＳＰゴシックと決まっていますので、まず font-family と font-size でフォントを指定します。
次に font-style, font-variant, font-weight プロパティをすべて normal にして通常フォント (ボールドやイタリックで無い普通のフォント) を指定します。
line-height を 100% にして行の縦幅をフォントサイズに合わせます。
white-space は折り返し改行が入らないように nowrap にします。

ちなみに white-space 以外のフォントに関する指定は、font プロパティを使って以下のように一行にまとめることができます。

.AA {
    font: normal normal normal 12pt / 100% "ＭＳ Ｐゴシック";
    white-space: nowrap;
}

使ってみる

HTML に AA を張るには、以下のように書きます。

<p class="AA">
　　　　　　r　‐､<br>
　　　　　　| ○ | 　　　　　　　　r‐‐､<br>
　　　　　_,;ﾄ - ｲ、　　　　　　∧l☆│∧ 　良い子の諸君！<br>
　　　 （⌒`　　　 ⌒ヽ　　　/,､,,ﾄ.-ｲ/,､ l 　 信じる者と書いて「儲ける」と読む！<br>
　　　　|ヽ　 ~~⌒γ⌒）　r'⌒　｀!´ `⌒） 　この漢字を考えた人はてーしたもんだな！！<br>
　　　│　ヽー—'^ー-'　（ ⌒γ⌒~~　/|<br>
　　　│　　〉　　　 |│　　|｀ー^ｰ— r'　|<br>
　　　│　/───|　|　　|/　| 　l　　ﾄ､ |<br>
　　　|　 irｰ-､ ｰ　,}　|　　　 / 　　　　i<br>
　　　| /　　　｀X´　ヽ 　　 / 　 入　　|
</p>

するとこんな感じで表示されます。

　　　　　　r　‐､
　　　　　　| ○ | 　　　　　　　　r‐‐､
　　　　　_,;ﾄ - ｲ、　　　　　　∧l☆│∧ 　良い子の諸君！
　　　（⌒`　　　 ⌒ヽ　　　/,､,,ﾄ.-ｲ/,､ l 　信じる者と書いて「儲ける」と読む！
　　　　|ヽ　 ~~⌒γ⌒）　r'⌒　｀!´ `⌒）　この漢字を考えた人はてーしたもんだな！！
　　　│　ヽー—'^ー-'　（ ⌒γ⌒~~　/|
　　　│　　〉　　　 |│　　|｀ー^ｰ— r'　|
　　　│　/───|　|　　|/　| 　l　　ﾄ､ |
　　　|　 irｰ-､ｰ　,}　|　　　 / 　　　　i
　　　| /　　　｀X´　ヽ　　 / 　入　　|

フォント周りの CSS

上で示したフォントに関係するプロパティに指定できる値は、以下のようになります。

font-family: 表示に使用するフォントを表し、PC 上のフォント名、もしくは generic family (serif, sans-serif , cursive, monospace, fantasy) のいずれかを指定します。
カンマ区切りで複数のフォントを指定することもできます。
font-size: 表示するフォントのサイズを指定します。
px や em/ex (全角1文字の幅と半角一文字の幅) 単位もしくは % で指定することが多いと思います。
単位については別ページにて説明する予定です。
font-style: フォントの傾きを表し、normal (標準), italic (斜体), oblique (標準を傾けたもの) のいずれかを指定します。
ほとんどの日本語フォントには、italic フォントが含まれていませんので italic と oblique は同じように表示されます。
font-weight: フォントの太さを表し、normal (標準), bold (太字), 100, 200, 300, 400, 500, 600, 700, 800, 900 のいずれかを指定します。
数値指定した場合、大きい数ほど太くなります。
font-variant: small-caps を指定すると、小文字を低い大文字に変換します。
normal (標準), small-caps, inherit (継承) のいずれかを指定します。
line-height: 行の高さを指定します。
font-size と同じく、px や em/ex (全角1文字の幅と半角一文字の幅) 単位もしくは % で指定することが多いと思います。
font: 上記のフォントに関するプロパティをまとめて指定します。
指定する際は、左から font-style font-variant font-weight font-size / line-height font-family の順になります。
font-size と font-family 以外は省略することもできます。
white-space: 空白文字の処理方法を表し、normal (標準), pre (空白文字をそのまま表示), nowrap (自動改行抑制) のいずれかを指定します。

代替フォントに関する問題

上の例では font-family に MS Pゴシックを指定しましたが、環境によってはフォントが存在しないことがありますので、font-famyli プロパティに複数フォントを指定し代替フォントを設定しておくと良いです。
2ch の AA を表示するための代替フォントには、MS Pゴシック Ex+ や IPA モナー Pゴシックなどのフォントがあります。
以下のように優先させたい順に font-family にフォントを追加します。

font-family: "ＭＳ Ｐゴシック", "IPA モナー Pゴシック", "MS Pゴシック Ex+";

代替フォントの最後に serif や sans-serif などの論理フォント名を指定することも多いと思いますが、sans-serif を使用する場合は以下のように sans-serif の前に Windows にインストールされている日本語フォントを指定するようにしてください。

font-family: "ＭＳ Ｐゴシック", sans-serif;    /* OK */
font-family: sans-serif;                      /* NG */

こうしておかないと Microsoft サポートオンライン - 使用フォントを sans-serif に指定した HTML ファイルを Internet Explorer で表示すると文字化けに書かれているとおり古い IE6 で文字化けします。
Windows XP/2000 以降では発生しないので無視してもいいレベルの話ですが、これを書いてる人間は未だに Win98 も使ってますので、考慮して頂けるとサイトに対する好感度が上がる人も少しはいるみたいです。

色を付けてみる

HTML なんで 2ch ではありえない色付き AA もできます。
まあ作るのめんどくさいですけどww

　　　__
　　 i＜´ 　 }＼　 ,　- 、
　　　ヽ.._＼./　 .ﾝく　r-兮、＿_
　　　 ∠｀ヽ.!　/ 　ヾﾆEｦぐ　,ゝ-＞　　さすがゴッグだ、
　　　/＿｀ｼ'Ｋ-───‐-､l∠ イ
　　　l´__,/l＼､_￣０¨0)ﾞ@Yﾍ, -┤ 　　　何ともないぜ
.　　 l'___|⌒ヾ''ｰ＝=､ｰr='ｲ　ｉ二|
　　　/　.｣　　 i　　 /./7r‐く　 lー!
.　　ｆ.　　ヽ‐ｉ人.∠'＜　＿i. l,.-ゝ.
　　ﾄiﾍﾍ｢ﾄ〈　　　　｀X　　ﾄﾚi7__|
　　　〉ﾄ:ﾄﾊj｀! i.　　　 /　ﾄｰ┤lﾙj,ﾘ
　　/‐+----+‐l　　 iｰ--i---ヾ'〃
.　ｌ＿i＿＿__i__|　　 |＿__i,＿＿i_|
　

色を指定するには、color プロパティと background-color プロパティを使います。

color: 前景色を指定します。通常は文字に効果が出ます。
background-color: 背景色を指定します。

上記のプロパティには、文字名 (Red Lime Blue White Maroon Green Navy Silver Yellow Aqua Fuchsia Gray Olive Teal Purple Black) かハッシュ (#RGB / #RRGGBB 形式の16進数) で色を指定します。

言葉で説明するよりも、上のゴッグのソースを見てもらった方が早いかもしれません。

<p class="AA" style="color:#64370f;background-color:#dbf9f9">
 　　　__<br />
    　 　 i＜´ 　 }＼ 　 ,　- 、<br />
    　　　ヽ.._＼./　 .ﾝく　<span style="color:black">r-兮</span>、 ＿_<br />
    　　　 <span style="color:#efd95d">∠｀</span>ヽ.!　/ 　 ヾﾆEｦぐ　,ゝ-＞　　<span style="color:black;font-weight:bold">さすがゴッグだ、</span><br />
    　　　<span style="color:#efd95d">/＿｀</span>ｼ'Ｋ-───‐-､l<span style="color:#efd95d">∠ イ</span><br />
    　　　<span style="color:#efd95d">l´</span>__,/l<span style="color:#e7c81a">＼､_￣<span style="color:#cf0000">０</span>¨<span style="color:#cf0000">0</span>)ﾞ</span>@Y<span style="color:#efd95d">ﾍ, -┤</span> 　　　<span style="color:black;font-weight:bold">何ともないぜ</span><br />
    .　 　 <span style="color:#efd95d">l'___|</span>⌒ヾ''ｰ＝=､ｰr='ｲ　<span style="color:#efd95d">ｉ二|</span><br />
    　　　<span style="color:#efd95d">/　.｣</span>　　 i　　 /./7r‐く　 <span style="color:#efd95d">lー!</span><br />
    .　　 <span style="color:#efd95d">ｆ.　　ヽ</span><span style="color:#aa9936">‐ｉ人</span>.∠'＜ 　 <span style="color:#aa9936">＿i. l,.</span><span style="color:#efd95d">-ゝ</span>.<br />
    　 　 <span style="color:#efd95d">ﾄiﾍﾍ｢ﾄ</span><span style="color:#aa9936">〈　　　 　 ｀X　　<span style="color:black">ﾄﾚ</span></span><span style="color:#efd95d">i7__|</span><br />
    　　　<span style="color:#efd95d">〉ﾄ:ﾄﾊj</span><span style="color:#aa9936">｀! i.　　　 /　 ﾄｰ┤</span><span style="color:#efd95d">lﾙj,ﾘ</span><br />
    　　<span style="color:#aa9936">/‐+----+‐l　 　 iｰ--i---ヾ'〃</span><br />
    .　 <span style="color:#333333">ｌ＿i＿＿__i__|　　 |＿__i,＿＿i_|</span><br />
　</p>

真面目に使う

えーとまあ、CSS は AA を描くためのものではありませんが、AA 描ける程度に知っとくと普通の文章を書くのに不自由はしません。
以上の知識を元に普通の文書を書くとこんな感じになります。

はじめまして、当サイト管理人のK氏です。
本職は皆さんと同じ普通のサラリーマンですが、暇を見つけては株に勤しんでおります。

当サイトは、ご同輩の皆様にも株の楽しさを知ってもらいたいと思い開設しました。
実際のところ巷で言われているほど儲かるものでも無いのですが、
ちゃんと投資すればそれなりのリターンがありますし、
ちょっとでも利益が出るのは実際楽しいものですよ。

そんな感じなんで、当サイトではサラリーマンの方でも比較的手が出しやすい
長期保有をメインにした投資方法を主体にご紹介しております。
一気にドバッと儲かる訳ではありませんが、
毎年ワンランク上の家族旅行にみんなを連れていくぐらいなら
そう難しいことではありません。

お小遣いの足しや、ちょっとした遊行費、もしくは家計の足しにでもしていただければと思いますので、
ぜひご活用ください。

元ネタは団長のサイトの「はじめに」です。この文章は元々私が書いたものなんで、勝手に引用させて頂きました。