CSSグリッドジェネレーター、LayoutItが便利!

はじめに

CSSのレイアウト方法がどんどんと新しくなってきてきます。
特に注目されているのはflexとCSSグリッドです。

ぜひとも試してみたい新しいレイアウト方法ですが、特にCSSグリッドは従来のレイアウト方法とは全く異なる文法、プロパティなどを使用しており、少し慣れるのに時間がかかります。

CSSグリッドについてしっかりと学びたい方はこちらの記事をご覧ください。
【CSS】CSSグリッドで変わる！CSSの考え方とワークフロー

今日は、とりあえずCSSグリッドを試してみたい！という方に向けて、Bootstrapのコードを書き出してくれるLayoutItの新機能、CSS Grid Generatorをご紹介します。

LayoutItとは

LayoutItとはCSSのレイアウトに関する便利なツール集です。元々はBootstrapのコードを書き出してくれるツールとしてでしたが、最近こちらに加え、CSSグリッドジェネレーターも追加されました。

Bootstrap ジェネレーター

Bootstrapの方の機能に関しては今回詳しくご紹介しませんが、気になる方はこちらの記事より大体どういったことが出来るのか確認できます。（記事自体は古いものなので、ツール自体の見た目は結構変わっています。どんなことが出来るのかあくまで参考として読んでください）

ちなみに、Bootstrapジェネレーターの方はこのようなインターフェースです。

ご覧のようにグリッドシステム、元のCSS、コンポーネントなどをGUIで組み合わせることができます。出来上がった独自のテンプレートのHTML, CSS, LESS, JSをダウンロードすることが出来るようになっています (HTMLのみのダウンロードも可能です)。

CSSグリッドジェネレーター

今回メインでご紹介するCSSグリッドジェネレーターですが、最近新しく追加された新機能です。

こちらの使い方について簡単にまとめていきます。

LayoutIt Grid Generatorの使い方

今回このジェネレーターで作っていくレイアウトですが、以前私がCSSグリッドを試したくて簡単に作ったツール、アイキャッチメーカーのレイアウトを元に作っていきたいと思います。

作っていくレイアウト

今回作っていくレイアウトのサイトをご覧になりたい方はこちらから見ることができます。
最短5秒でアイキャッチが作れる！ | Eyecatch Maker

こちらは名前の通り、背景の色もしくは画像を選び、文字を入力するだけで簡単にアイキャッチが作れるツールなので、ぜひ使ってみてください。

グリッドとカラムとローを整える

まずはグリッドのカラムとローの幅と高さが違うのでこちらを変えていきます。

カラムに関してはこちらの値を変更していきます。

カラムの幅の単位ですが、「fr」、「px」、「%」、「em」、「auto」、「min-content」、「max-content」、「minmax」とあります。

それぞれの単位の説明

今回のサンプルではサイドバーが350px、カンバスが650px、そのほかは固定ではないのでautoに設定します。

同じようにローの高さの設定をしていきます。

これで今回サイトを組み立てるグリッドの土台ができました。
もしグリッドの間にマージンを入れたい場合は、「grid gap」というところから設定してください。

それぞれの要素を作っていく

あとはそれぞれの要素をグリッド上で作っていくだけです。
まずはヘッダーを作りたいので、最初の一行目のグリッドを一つづつ選択肢、headerという名前をつけます。

同じようにサイドバー、ツールバー、メイン、カンバス、フッターを作っていきます。

グリッドはレイアウトが非常に自由なので、例えばメインとカンバスなどが被っていてもpositionなど無理なレイアウトをしなくてもOKです。

これでOKです！
あとは「Get the code」ボタンをクリックします。

そうすると今回作ったHTMLとCSSコードをダウンロードすることができます。

まとめ

以上、今回はCSSグリッドジェネレーター、LayoutItをご紹介しました。

グリッドを試してみたい方はもちろん、ちょっとしたレイアウトを手早くGUIで作れるので非常に便利ですね！