へんてこのブログ

日々気づいたことや、最近やっていることを書いています

CSSのGrid Layoutがわからなかったのでドット絵エディターを作った話

f:id:henteko07:20220306101355p:plain

CSSのGrid Layoutがわからなかったので、色々試しているうちにドット絵エディターを作っていた話をします。

dotter kunというドット絵エディターを作成しました

f:id:henteko07:20220306083052p:plain
dotter kun利用イメージ

上の画像からわかる通り、ドット絵が描けるエディターです。
以下からアクセスできます。

https://henteko.github.io/dotter-kun/

ソースコードはGitHubで公開してるので見てみてください。

github.com

Grid Layoutがわからない

何年か前からGrid Layoutという言葉を見ていましたが、特に利用したことはありませんでした。
というのも、ほとんどのことがFlexboxで事足りると思っていたからです。

Flexboxを覚えてからは、ほとんどをFlexboxで開発してきました。
が、よくあるタイルUI(以下のようなデザイン)を実装したときに、サイズ次第でFlexboxだとカラムが飛び飛びになってしまうことがありました。

voxel.henteko07.com

そんな時にGrid Layout使えば1発なのでは?と思い、今回CSS Grid Layout始めてみようとなりました。

ちなみに上のvoxelのサイトは画像をGrid Layoutで並べてます。
簡単でいいですね。

最初は普通のUIを模写してました

当初はYouTubeのWeb画面がちょうど良さそうだったので、それを真似て練習してました。

f:id:henteko07:20220306092642p:plain
YouTube模写

Grid Layoutを使わなくてもいい場所でもゴリゴリにGrid Layoutを使うように模写しました。
これのおかげでGrid Layoutでできることは大体わかった気がします。

そしてこの模写をしているうちに、これってドット絵と相性良くない?と思えてきました。
ドット絵と相性良さそうと思えたのでドット絵エディターを作成するのは自然なことですよね。

という流れでdotter kunの作成が開始されました。
ちなみに検索すると似たようなことしてる人がいました、わかる。

https://ebifry.jp/css/useless-css-grid/

dotter kunではcanvasを使っていません

普通HTMLとJavaScriptでドット絵を描くってなったら恐らくcanvasを使うと思います。
その方が最終的に画像にするのが楽だし……。

今回はコンセプトが「Grid Layoutを使ってドット絵エディターを作る」なのでcanvasは一切使用していません。
じゃあどうやっているのかと言うと……。

f:id:henteko07:20220306093536p:plain
Grid Layoutを使っている図

ゴリゴリにGrid Layoutでdivを並べています。

今回25 × 25マスのドット絵なので、合計625個のdiv要素を追加してGrid Layoutで整列させています。
ちなみに流石に625個の要素を手でHTMLに書くのは辛いので、JavaScriptで動的に追加しています。

for (let i = 0; i < 625; i++) {
  const div = document.createElement("div");
  div.className = "dot";
  div.addEventListener("click", draw);
  document.querySelector("#dot-area").append(div);
}

またパレット部分に関しても同じです。
今回のパレットはWeb Safe Colorの140色を並べています。
こちらも要素の追加は動的におこなっています。

f:id:henteko07:20220306094448p:plain
パレットのGrid Layout

全体の要素もGrid Layoutを使っています

その他の全体の要素についても、Grid Layoutを使って並べています。

f:id:henteko07:20220306094742p:plain
全体の要素の構成

Header, Palette, Editor, FooterをそれぞれGrid Layoutの grid-template-areas で並べてます。

grid-template-areas: "header header"
                     "palette editor"
                     "footer footer";

grid-template-areas を使う利点として、レスポンシブ対応が簡単なのがいいですね。
画面を小さくするとこんな感じで変わります。

f:id:henteko07:20220306095737p:plain
レスポンシブ対応

grid-template-areas: "header"
                     "editor"
                     "palette"
                     "footer";

細かいCSSやJavaScriptはGitHubを参照してください。

github.com

まとめ

Grid Layoutでドット絵エディターを作った話をしました。
Grid Layoutは適切に使えばHTML要素が簡潔になるし、レスポンシブ対応がわかりやすくなると利点があります。

Flexboxと合わせて、適材適所で使っていきたいです。