ドット絵をWeb Site Pro X5で表示する時の覚書

MAMI KIDS ロゴ
コンテンツに移動します

ドット絵をWeb Site Pro X5で表示する時の覚書

mami kids
公開済み by kumami -U174の ドット絵 · 23 2月 2023
Tags: ドット絵ピクセルアート覚書websiteX5
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;
}


下記サイトが一番わかりやすかったので参考にしました。



コンテンツに戻る