webページでドット絵を表示させる時のお作法

ドット絵にノスタルジーを感じてしまう、弓削田です。 3D映像が当たり前になってきた世の中ですが、ドット絵という表現は無くなりません。 むしろ、ゲーム風の味が出るのでデザイン要素として効果的に使うこともできていい感じです。 自分のホームページでドット絵を表示しようとして見た所、なんだかぼやけた感じに表示されて 少しがっかりした人もいるかと思って、ドット絵を表示する時のCSS操作方法を書き残しておきます。

ドット絵を表示する時のCSS設定

小さいドット絵画像をサイズを大きく表示してみると、ブラウザのデフォルト表示で、ボヤケて見えてしまう事がよく分かります。 そこに、cssで以下のスタイルを適用することで、ボケずに表示することができます。 img{ image-rendering: pixelated; image-rendering: -webkit-crisp-edges; image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; } ベンダープレフィックスも含めてあるので、selectorを調整してこれを適用するだけでいいので、覚えておくと便利でしょう。

ドット絵便利ツール

DotGen.css ドット絵を自分で書きやすいようにツールを作ったツワモノがいたので、リンクを掲載しておきます。 PlayGround あと、ドット絵を独自にCSSで構築する時に、box-shadowを使ってアンチエイリアスを表現する方法がいろいろなサイトで紹介されていますが、 その時のbox-shadowの設定を簡単に構築できるツールがあります。 cssでドット絵サンプル 実際にCSSでドット絵を書く解説がされているページを参考に、興味がある人は是非トライしてみましょう！

See the Pen wvBXRzw by yuka kimura (@kimurayuka) on CodePen.