ドット絵をWeb Site Pro X5で表示する時の覚書
Web Site X5 Proでドット絵を表示させる覚書
ドット絵のサイトも作り直したいので
レスポンシブでデバイスの大きさが変わっても
にじんだ感じに拡大や縮小しないように
タグを入れるんですが、
ドット絵を作ったサイズのまま表示するには
「そのまま画像をして入れる」が良かったので覚書。
ドット絵を作ったサイズより大きく指定して表示するには
・ページ
↓
・HTMLコードを選択して表示したい箇所に入れる
↓
・コンテンツを押して
↓
・HTMLコードに
<img class="pixel" src="images/〇〇〇.gif" width="任意px" height="任意px">
↓
・エキスパートに
.pixel {
image-rendering: pixelated;
}
を入れる。
または！
・HTMLコードに
<img class="pixel" src="images/〇〇〇.gif">
↓
・エキスパートに
.pixel {
image-rendering: pixelated;
}
img {
width: 100%; height: auto;
}
下記サイトが一番わかりやすかったので参考にしました。
記事のソース: