CSSのGrid Layoutがわからなかったので、色々試しているうちにドット絵エディターを作っていた話をします。
dotter kunというドット絵エディターを作成しました
上の画像からわかる通り、ドット絵が描けるエディターです。
以下からアクセスできます。
https://henteko.github.io/dotter-kun/
ソースコードはGitHubで公開してるので見てみてください。
Grid Layoutがわからない
何年か前からGrid Layoutという言葉を見ていましたが、特に利用したことはありませんでした。
というのも、ほとんどのことがFlexboxで事足りると思っていたからです。
Flexboxを覚えてからは、ほとんどをFlexboxで開発してきました。
が、よくあるタイルUI(以下のようなデザイン)を実装したときに、サイズ次第でFlexboxだとカラムが飛び飛びになってしまうことがありました。
そんな時にGrid Layout使えば1発なのでは？と思い、今回CSS Grid Layout始めてみようとなりました。
ちなみに上のvoxelのサイトは画像をGrid Layoutで並べてます。
簡単でいいですね。
最初は普通のUIを模写してました
当初はYouTubeのWeb画面がちょうど良さそうだったので、それを真似て練習してました。
Grid Layoutを使わなくてもいい場所でもゴリゴリにGrid Layoutを使うように模写しました。
これのおかげでGrid Layoutでできることは大体わかった気がします。
そしてこの模写をしているうちに、これってドット絵と相性良くない？と思えてきました。
ドット絵と相性良さそうと思えたのでドット絵エディターを作成するのは自然なことですよね。
という流れでdotter kunの作成が開始されました。
ちなみに検索すると似たようなことしてる人がいました、わかる。
https://ebifry.jp/css/useless-css-grid/
dotter kunではcanvasを使っていません
普通HTMLとJavaScriptでドット絵を描くってなったら恐らくcanvasを使うと思います。
その方が最終的に画像にするのが楽だし……。
今回はコンセプトが「Grid Layoutを使ってドット絵エディターを作る」なのでcanvasは一切使用していません。
じゃあどうやっているのかと言うと……。
ゴリゴリに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色を並べています。
こちらも要素の追加は動的におこなっています。
全体の要素もGrid Layoutを使っています
その他の全体の要素についても、Grid Layoutを使って並べています。
Header, Palette, Editor, FooterをそれぞれGrid Layoutの grid-template-areas で並べてます。
grid-template-areas: "header header" "palette editor" "footer footer";
grid-template-areas を使う利点として、レスポンシブ対応が簡単なのがいいですね。
画面を小さくするとこんな感じで変わります。
grid-template-areas: "header" "editor" "palette" "footer";
細かいCSSやJavaScriptはGitHubを参照してください。
まとめ
Grid Layoutでドット絵エディターを作った話をしました。
Grid Layoutは適切に使えばHTML要素が簡潔になるし、レスポンシブ対応がわかりやすくなると利点があります。
Flexboxと合わせて、適材適所で使っていきたいです。
