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

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


## 失敗編：改行＆ズレとは？
一般的にアスキーアートはテキストであるため、そのままコピペして使えると考えるかもしれません。

例えば下のような感じに

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

しかし、これだと改行コードが含まれません。表示が大きく崩れます。
<img width="733" alt="Screen Shot 2018-12-18 at 2.06.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/51db0e1b-0fa8-af20-9301-b7fe7040a930.png">

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

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

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

<img width="278" alt="Screen Shot 2018-12-18 at 2.08.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/bce650f3-914a-777c-5256-76991ede76f4.png">

これは、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です。

```css
@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を設定すればよいでしょう。

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

WebフォントとCSSを設定すれば AAがズレなくなります。ひとまずOK！ 
<img width="236" alt="Screen Shot 2018-12-18 at 2.37.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/0d66b501-ee76-6999-36ec-8c6a8f395992.png">

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

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

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

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

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

```html
<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
<img width="544" alt="Screen Shot 2018-12-18 at 2.45.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/74be2fe2-2b9b-c1d1-10e2-016b9755b3ef.png">

#### スマホ
<img width="394" alt="Screen Shot 2018-12-18 at 2.45.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/165335/e062e21b-eb16-cd0c-770e-9ae89d341a5c.png">

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

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

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

![aa.gif](https://qiita-image-store.s3.amazonaws.com/0/165335/dd4eff77-d4fa-2120-01f0-500511dfb539.gif)


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

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

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