CSS GridとFlexboxの便利なツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Layout Generator

Webサイトでよく使用されるレイアウト、「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツールを紹介します。

実装はCSS Gridで、今後Flexboxにも対応予定2022年にCSS Flexboxにも対応しました。レイアウトを実装するために使用してもよし、CSSの勉強にもよしの便利ツールです。

CSS Layout Generator

CSS Layout Generatorでは現在、5種類のレイアウトに対応しています。今後はスターターテンプレートやカスタマイズした設定の保存などにも対応予定です。

CSS Layout Generator

左から順に、3x3、ヘッダ・メイン・フッタ、Holy Grail、Infinite、サイドバーで、それぞれ子アイテムの数は増減できます。

3x3を例に画面を見てみましょう。

Customize -3x3

レイアウトは左のパネルから簡単に変更できます。例えば、3x3の9個の子アイテムを5個に変更してみました。列や行の数、カラム間のギャップ、垂直・水平なども簡単に変更できます。

子アイテムを5個に変更

子アイテムの詳細な設定も変更可能で、auto, fr, min-width, max-width, px, vh, vw

, %の単位を使用できます。

子アイテムの変更

レイアウトを変更すると、すぐにCSSも生成されます。CSSは右上「Copy」からコピーできます。

CSSの生成

CSS Layout Generatorで生成できる他のレイアウトも紹介します。

Customize -3x3

Customize -Header Main Footer

Customize -Holy Grail

Customize -Infinite

Customize -Sidebar