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

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

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

レイアウトを確認しながら、CSSのコードを生成できるツール -CSS Layout Generator

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

sponsors

top of page

©2021 coliss