AA(Shift-JIS Art)をずれずに表示するCSS設定＆はみ出し対策 #CSS

この記事はAA(Shift-JIS Art)をずれずに表示するためのCSS設定＆はみ出し対策について説明します。

失敗編：改行＆ズレとは？

一般的にアスキーアートはテキストであるため、そのままコピペして使えると考えるかもしれません。

例えば下のような感じに

<div>
| 　 　 |＼|／　|　　　　　｜ 　　｜
| ∧ ∧  |/⌒ヽ、| ∧＿∧ | ∧∧ |
|(,,ﾟДﾟ)||,,ﾟ Θﾟ）|（； ´Д｀）|(=ﾟωﾟ)|
</div>

しかし、これだと改行コードが含まれません。表示が大きく崩れます。

ならば、今度は改行タグを記述してみます。

<div>
| 　 　 |＼|／　|　　　　　｜ 　　｜<br>
| ∧ ∧  |/⌒ヽ、| ∧＿∧ | ∧∧ |<br>
|(,,ﾟДﾟ)||,,ﾟ Θﾟ）|（； ´Д｀）|(=ﾟωﾟ)|<br>
</div>

これでちゃんと改行されますが、今度は、AAの表示が崩れてしまいます。

これは、AAのほとんどがMSPゴシック準拠で作成されているからです。なのでMacや各WebブラウザだとそのフォントがないためAAがずれてしまうのです。

この記事ではこのようなAAをずらさないためのCSS設定を書きます。

ズレないCSS設定

ズレなくするために必要な設定の勘所は以下です。

Webフォント
font-size＆line-height
はみ出し対策

Webフォントの設定

まず、AA表示に対応したWebフォントを設定しましょう。手前味噌ですが、私のサイトでAA表示対応のWebフォントを紹介しています。
https://fonts.aahub.org

例えば、Saitamaarを利用する場合はい以下のCSSを記述しましょう。これでWebフォントの読み込みはOKです。

@font-face {
  font-family: "Saitamaar";
  src: url("https://fonts-aahub.netlify.com/assets/fonts/Saitamaar/Saitamaar.woff2") format("woff2"),
    url("https://fonts-aahub.netlify.com/assets/fonts/Saitamaar/Saitamaar.woff") format("woff"),
    url("https://fonts-aahub.netlify.com/assets/fonts/Saitamaar/Saitamaar.ttf") format("ttf");
  font-display: swap;
}

font-size＆line-heightの設定

FontSizeとLineHeightですが、ここ結構好みもあるかもしれませんが、基本的にFontSize + 2くらいのLineHeightを設定すればよいでしょう。

.Saitamaar {
  font-family: "Saitamaar";
  white-space: pre;
  font-size: 16px;
  line-height: 18px;
}

WebフォントとCSSを設定すれば AAがズレなくなります。ひとまずOK！

番外編:改行はwhite-space:preでもOK

本記事では、改行にbrタグを利用しましたが、CSSでwhite-spaceを指定すれば、コピペしたAAをそのまま利用できます。

<div class="Saitamaar-pre">
| 　 　 |＼|／　|　　　　　｜ 　　｜
| ∧ ∧  |/⌒ヽ、| ∧＿∧ | ∧∧ |
|(,,ﾟДﾟ)||,,ﾟ Θﾟ）|（； ´Д｀）|(=ﾟωﾟ)|
</div>

.Saitamaar-pre {
  font-family: "Saitamaar";
  white-space: pre;
  font-size: 16px;
  line-height: 18px;
}

はみだし対策

上記の内容でAAのズレ問題はほぼ解決します。しかし、まだAAがはみ出した時、改行されてしまうという問題があります。

例えば以下のような横に長いAAの場合、横幅の小さいスマホ等だと表示が崩れます。

<div class="Saitamaar">
　　.／ ￣/　￣ 　 /　＿|＿_　＿__|＿<br>
　　　 ―/　　　　 /　　 ｜／ 　　/|<br>
　 　 ＿/ 　 ＿／　　 　 |　 .＿／｜<br>
<br>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 /＼＿＿_／ヽ<br>
　　　 (.｀ヽ(｀＞ 、　　　　　　　　　　　　　　　　　 　 　 　 ／''''''　　　''''''::::::＼<br>
　　 　 `'＜｀ゝr'ﾌ＼　　　　　　　　　　　　 　 　 　 ＋　　|（●）,　　　､（●）､.:|　＋<br>
　 ⊂ｺ二Lﾌ^´　 ノ, ／⌒)　　　 　 　 　 　 　 　 　 　 　 |　　 ,,ﾉ(､_, )ヽ､,,　.::::|<br>
　　⊂l二L7_　/　-ゝ-')´　　　　　　　　　　　 　 　 　 +　|　　 ｀-=ﾆ=- '　.:::::::|　+<br>
　　　　　　 ＼_　　､__,.ｲ＼　　　　　　　　　　　＋　　　　 ＼　　 ｀ﾆﾆ´　 .:::／　　　　+<br>
　　　　　　　　(T＿_ノ　　 Tヽ　　　　　　　 , -r'⌒!￣ `":::7ヽ.｀- ､　　　./|<br>
　　　　　　　　　ヽ￢.　　　/　ﾉ`ｰ-､ﾍ<ｰ1´|　 ヽ　| :::::::::::::ﾄ、 ＼　(　　./ヽ<br>
　　　　　　　　　　＼l__,.／　　 　 　 i　l.ヽ!　|　　　.| ::::::::::::::l ヽ 　 ｀７ｰ.､‐'´ |＼-､<br>
　 .＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿　 ＿＿<br>
　│二│三│四│二│三│四│二│三│四│◎│◎│◎│伍│｜伍｜<br>
　│萬│萬│萬│萬│萬│萬│萬│萬│萬│◎│◎│◎│萬│｜萬｜<br>
　└─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘└─┘<br>

</div>

PC

スマホ

この問題を解決するためにoverflow、white-spaceを設定してはみ出してもスクロールできるようにしましょう。

.Saitamaar {
  font-family: "Saitamaar";
  font-size: 16px;
  line-height: 18px;
  overflow:auto;
  white-space:nowrap;
}

これでスマホでの表示もOKです。

まとめ

以上、ずれないCSS設定＆はみ出し対策についての記事でした。もし、WebサイトでAAを使いたいときは参考にしてみてください。

ただ、今回紹介した内容はCSS設定のみで、これだけだとスマホ対応等でまだ不便なところがあります。

明日以降、画像変換などレスポンシブ対応したAAの表示方法について解説したいと思います。
それでは