Layoutがわからなかったので、色々試しているうちにドット絵エディターを作っていた話をします。kun利用イメージ上の画像からわかる通り、ドット絵が描けるエディターです。以下からアクセスできます。https://henteko.github.io/dotter-kun/ソースコードはGitHubで公開してるので見てみてください。Layoutという言葉を見ていましたが、特に利用したことはありませんでした。いうのも、ほとんどのことがFlexboxで事足りると思っていたからです。Flexboxを覚えてからは、ほとんどをFlexboxで開発してきました。あるタイルUI(以下のようなデザイン)を実装したときに、サイズ次第でFlexboxだとカラムが飛び飛びになってしまうことがありました。Layout始めてみようとなりました。Layoutで並べてます。最初は普通のUIを模写してました当初はYouTubeのWeb画面がちょうど良さそうだったので、それを真似て練習してました。Layoutを使うように模写しました。Layoutでできることは大体わかった気がします。この模写をしているうちに、これってドット絵と相性良くない?と思えてきました。ドット絵と相性良さそうと思えたのでドット絵エディターを作成するのは自然なことですよね。kunの作成が開始されました。ちなみに検索すると似たようなことしてる人がいました、わかる。kunではcanvasを使っていません普通HTMLとJavaScriptでドット絵を描くってなったら恐らくcanvasを使うと思います。その方が最終的に画像にするのが楽だし......。Layoutを使ってドット絵エディターを作る」なのでcanvasは一切使用していません。やっているのかと言うと......。Layoutでdivを並べています。Layoutで整列させています。ちなみに流石に625個の要素を手でHTMLに書くのは辛いので、JavaScriptで動的に追加しています。document.querySelector("#dot-area").append(div);}またパレット部分に関しても同じです。Colorの140色を並べています。こちらも要素の追加は動的におこなっています。Layoutを使って並べています。使う利点として、レスポンシブ対応が簡単なのがいいですね。画面を小さくするとこんな感じで変わります。"footer";細かいCSSやJavaScriptはGitHubを参照してください。Layoutでドット絵エディターを作った話をしました。Layoutは適切に使えばHTML要素が簡潔になるし、レスポンシブ対応がわかりやすくなると利点があります。Flexboxと合わせて、適材適所で使っていきたいです。3はてなブログをはじめよう!henteko07さんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。