|
_,.-.:.:.:^ヽ.‐-...､.._ ,.-'´:.:.:.:.:.:.:.:.:.:.）'^:.ｰ､:.:.｀''ｰ､ ,r'ｧ´:.;.;r'´;.-.:,､.:,´:.:.:.:.:.:.｀:.:.:.:.:-ヽ . ,':.;ｨ'/:.:/／ヽL|:.:.l:.:.:.:.:.:.:.:.:.:.:.:.:.:.｀ヽ. |/i':.;l.:/l〈 /:./:.:.:.:,!:.:.:.:.:.:.:.:.:.:.:.:.:.:ﾞ、 l/|ﾘ/_.| /／!:.:.:/:.:.:.:.:,!:.:.:.:.:.:.:.:.:.:.:.l. V 似 '＜/_／!:./:.:.;/:.:.:.:.:.:.:.:.:.:.:.:.| / _ノ Zヽ｀7ｲ:.:,/:.:,:.:.:.:.:.:.:.:.:.:.:.:,! | l ｀¨´ /;／:.:.;/.:.;.:.:.:.:.:.:.:.:.:/ | r､ ´ /..-Z-く:.:.:.:.:.:.:.:./ | ､ ｀ヽ ´ ノ7,. /:.:.:.:.:,:.;/ l ｀¨′ _,.二r;‐' ィ／/'′ ヽ､＿ ＿,.. ´ ｹ,!ヽ､ __.......-‐::´／::〉、 ／ ,/:::::|::::ヽ、 r::７::::::::::::::::::/:::::/ ヽ ／ /::::::::|::::::::::＼ |
ん、ああ。入部希望者かな？ 入部届け、持ってきたかい？
え？ ＳＯＳ団団長にこっちに来るように言われた？ ああ、そう……。
じゃあ、教えるよ。ウェブページやブログでアスキーアートをきれいに載せる方法を。
最近、アスキーアートを使っててもフォントが正しくなかったり、行間がありすぎて縦に伸ばしてしまっている人とかいるからね。
最初に確認しておくけれど、アスキーアートは一定の規定に沿って作られている。それを再現しない環境では、ずれてしまったり崩れたりする。環境を整えるのは簡単だ。下記のタグでアスキーアートをはさめばいい。
| <div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック';"></div> |
これはスタイルシートと言う種類のタグで、これひとつで行間、フォントサイズ、利用するフォントを指定している。<div> から </div> の間にアスキーアートを挟めば、きれいに表示されるよ。
| ウェブページ使用例 |
|
<div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック'; "> ||<br> <br> ※<br> <br> ||<br> <br> ||<br> ○<br> ||<br> ivｖvi<br> l_, ,_j<br> ,i^l,<br> ,i! ﾞl,<br> . ,i! .D. ﾞl,<br> . ,i! I ﾞl,<br> _,i! E ﾞ!,_<br> . ﾞｌ,i!ﾞ￣￣￣ﾞｌ,i!"<br> </div> |
| ブログ使用例 |
|
<div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック';"> || ※ || || ○ || ivｖvi l_, ,_j ,i^l, ,i! ﾞl, . ,i! .D. ﾞl, . ,i! I ﾞl, _,i! E ﾞ!,_ . ﾞｌ,i!ﾞ￣￣￣ﾞｌ,i!" </div> |
ただ、ブログのようなプログラムによってページを作成している場合、タグの改行をそのまま改行に変換してしまうから、上下の間隔は実際に試してみて確認してくれ。改行をタグに変換しないなら、まあそのまま使えるけれどね。これはたまにしかアスキーアートを使わない人向けかな。
あと、このタグでアスキーアート以外のものも一緒にはさむと、デザインとしてバランスが悪くなってしまうことがある。特にブログでは致命的になることがあるから注意が必要だ。
また、CSS をいじれるなら、そっちに下記の条件を書きこんで利用してもいい。
| div.AA { line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック'; } |
CSS ファイルの最後にでも書き込んでおくといい。書き込んだら、下記のタグでアスキーアートをはさむんだ。
| <div class="AA"></div> |
これで、アスキーアートをきれいに表示することができるよ。こっちはアスキーアートを多用する人向けだね。簡単に環境を再現できる。
あともうひとつ。面倒だけれど、アスキーアートはソースからコピーしたものでなければ、そのままでは使えないことがある。< や > 、& の文字は、ウェブページを形作るルール上、そのままでは使えないんだ。だから、これらの文字はページを作る際に変換しなくてはならない。検索置換を使うといいだろう。
|
< は < に。 > は > に。 & は & に。 |
これを省略すると、アスキーアートの一部がページを形作るタグであると認識されて、ブラウザ上では表示されずに消えてしまうことがある。気をつけるといい。
ここからはもう少しアスキーアートをうまく使いたい人向けの説明だ。聞いて置いて損はないかもね。
アスキーアートの形を崩さず、ページの左側、または中央、または右側に表示したい場合は、テーブルタグ <table> を使う。
|
<table align="center"> <tr><td> <div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック';"> </div> </td></tr> </table> |
| ウェブページ使用例 |
|
<table align="center"> <tr><td> <div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック';"> ＿ _,,ｨ‐z､<br> 卞''ｰ-=,,;r'''´ヽ｀ヾ､／ |<br> l. ｀＞' ﾆ う|＜ ﾞヽ._ﾉ<br> ヽ､/ ￣ ＼<br> / ｀''ｰ' ｀ｰ''´ .ヽ<br> i.＿_ ◯ ○ =二}<br> ト-‐‐ 'ｰﾋﾗ‐' ー-ﾉ<br> ヽ/.）~ ,,r'<br> ゝﾐﾆTirｰ----‐ｒ仁ヽ<br> ｆ⊂⊃=⊂⊃(ノ<br> . ヾﾆ丈才ﾗ<br> ｀＞ 〉 /_<br> └ｰ'ﾞ''‐┘<br> </div> </td></tr> </table> |
| ブログ使用例 |
|
<table align="center"><tr><td> <div style="line-height: normal; font-size: 12pt; font-family: 'ＭＳ Ｐゴシック';"> ＿ _,,ｨ‐z､ 卞''ｰ-=,,;r'''´ヽ｀ヾ､／ | l. ｀＞' ﾆ う|＜ ﾞヽ._ﾉ ヽ､/ ￣ ＼ / ｀''ｰ' ｀ｰ''´ .ヽ i.＿_ ◯ ○ =二} ト-‐‐ 'ｰﾋﾗ‐' ー-ﾉ ヽ/.）~ ,,r' ゝﾐﾆTirｰ----‐ｒ仁ヽ ｆ⊂⊃=⊂⊃(ノ . ヾﾆ丈才ﾗ ｀＞ 〉 /_ └ｰ'ﾞ''‐┘ </div> </td></tr></table> |
テーブルタグはウェブページ上で表を形成するタグだ。これで中のアスキーアートは崩れない。あとは、属性の align="" で位置を決める。align="left" なら左側、 align="center" で中央、 align="right" で右側と指定可能。試してみるといい。ブログでやる場合は改行上の注意が必要かもしれないし、物によっては備え付けのものがあるかもしれない。いろいろと試してみてくれ。
あと、ここまで説明しておいてなんだが、この HTML の書き方はあくまで HTML 4.01 Transitional で通用するものであって、XHTML になると書き方が少し変わる。そのあたりのことはウェブページ構築指南サイトに行ってもらったほうがいいだろう。ここじゃ、少々手狭なのでね。
|
＿＿,.k'" "''''----､ ／: : : : : :-=､:::/: : : : : : : : : : : :ヽ､ . ／: : : : : : : : : : ヽ、: _: : : : : :.､ ヽ ヽ ／:: : : : : : : /: : : : ,､: :.}:> ヽ. . . :ヽ: :.､ ヽ:ヽ /:::: : :.:/: : ::.{'' ' {' ' {:::ヽ|/:::>::}: ヽ: :ヽ:.ヽ:.ヽ:k ./ ''''' ' ''{ . ....{::: ::{::.: {-''''-""ヽ1::: 1:: l: : 1:: l ､1 { ...l.....:::|:. : l:::1:.: :l､:::{ . 1l 、l┤|::.: :l､:l \ .{...l:::{::::::::k::.: :l::.l ､:::{ヽ:ヽ _,>|"l:/.ヾ1:: }.|.l| {::|::::{:::::::ヽ:::::{,,h-ヽl--ヽ''" _／''""' l:/^､ {:{:::ヽ::l:::::>､::l ~,.-->-,､ ヽ.ll__,,..l.l\", } 誰か、僕のちびキャラＡＡを作ってくれ！ .\1:ヾ､l::､::ヽヾ/ lll ._| .l " .' l/./ ヽヽ>__'ﾐ,ヽ:ヽ--'''' ヽ l^ コンピ研の自作オンラインゲーム、 l: :,lヽ､: : . ' ,, /ヾ.､ 「 THE DAY OF SAGITTARIUS 」 ''-,,,,^ ,､::::j . ,--'''''"" } / l ヽヽ、もよろしく頼むよ！ | l .::::::ヽ::::.. { ヾl / l }ヽ ヽ、 { | :::::::::::::>､_::.. ヾ､__,,,-'''ノ // / }''ヽ ヽ、 ヽl ::::::::::/:::::{ヽ-,,,_"''''''"- ／ / | l ヽ、 .ヾ:::,:::::|::::::| .ヽ::::~^---" / } ＼ |
