HOME | CUTPLAZA TERMINAL | CUTPLAZA | CUTPLAZA DIARY

アスキーアート(AA)をサイトやブログで綺麗に見せる方法

スポンサード リンク

アスキーアートごとにスタイル指定

フォントサイズやブラウザによってズレが起きることがあるので、そのまま貼ると環境によってはよく分からない表示になりやすいです。
個別にDIVなどにスタイルシートを指定して置くのが安全です。

高さが足りなくなるとスクロール

\   \\   \  \\  , ェェェェェェ、\  \\ \
\\   \\   \  \,ィ三三三三三三ヽ.  \\ \
\\\   \\, -‐≦三三三三三三三三三ヽ   \\
  \\\    /   ィエミ ヾ三三三ツ" ̄`ヾ三ヲ\   \\
\  \\\  l     !三リ  ヾ三ヲ'   ヽ、  \  \   \
  \  \ f三ミ        /三三     `ヽ.、 \  \
\  \  ` ヾ三        ヾ三三    ,ィ全、 \ \  \
\\  \  \.゛l    f≧  ノ三三  ./三三、   ヽ. \
  \\  \    、 fn,  ~   /三三".  ,'三三三、.  l  \
\  \\  \  .i≧ュ __,、 /三三"  ,'三三三三、 ノ
  \  \\  \ |三ミ≧≠三彡"    l三三三三三「\\
   \  \\  `!三三三リー - 、._ !三三三三三   \\
\   \  \\ }三三彡 \\\  ヾ三三三彡"≧,   \
  \   \  \.ノ三三リ\  \\\     ヾ三三ミ、
━━━━━━━{三三彡━━━━━━━━━━ ̄━━
            ̄ ̄
ケ  ケ   /\      ー―≠―   ー―≠
┼┼┼ /┌┴┐\      /       /
│└┘   [ 二 ]   ー 、   |       ー― 、
└──   レ`く_   _)  \_    くZ_ノ
  |二二|  /\   |  | |       _|           ||
┼└─┘/__ \ .|  | |         |/⌒ヽ     ||
┴ 7二二 ┌─┐  |     ー十十ヽ /|  _ノ 二   ||
  / / / /  |__|   ヽ_ノ     .|  ノ  |  (_ノヽ /乙  。

高さがなくなっても表示

\   \\   \  \\  , ェェェェェェ、\  \\ \
\\   \\   \  \,ィ三三三三三三ヽ.  \\ \
\\\   \\, -‐≦三三三三三三三三三ヽ   \\
  \\\    /   ィエミ ヾ三三三ツ" ̄`ヾ三ヲ\   \\
\  \\\  l     !三リ  ヾ三ヲ'   ヽ、  \  \   \
  \  \ f三ミ        /三三     `ヽ.、 \  \
\  \  ` ヾ三        ヾ三三    ,ィ全、 \ \  \
\\  \  \.゛l    f≧  ノ三三  ./三三、   ヽ. \
  \\  \    、 fn,  ~   /三三".  ,'三三三、.  l  \
\  \\  \  .i≧ュ __,、 /三三"  ,'三三三三、 ノ
  \  \\  \ |三ミ≧≠三彡"    l三三三三三「\\
   \  \\  `!三三三リー - 、._ !三三三三三   \\
\   \  \\ }三三彡 \\\  ヾ三三三彡"≧,   \
  \   \  \.ノ三三リ\  \\\     ヾ三三ミ、
━━━━━━━{三三彡━━━━━━━━━━ ̄━━
            ̄ ̄
ケ  ケ   /\      ー―≠―   ー―≠
┼┼┼ /┌┴┐\      /       /
│└┘   [ 二 ]   ー 、   |       ー― 、
└──   レ`く_   _)  \_    くZ_ノ
  |二二|  /\   |  | |       _|           ||
┼└─┘/__ \ .|  | |         |/⌒ヽ     ||
┴ 7二二 ┌─┐  |     ー十十ヽ /|  _ノ 二   ||
  / / / /  |__|   ヽ_ノ     .|  ノ  |  (_ノヽ /乙  。

※ただし、overflow: visible;の後は、重なってしまうことがあるので高さ指定はしたほうが安全。

スポンサード リンク