CSS Grid Layoutに触れてみよう! CSS Grid Layoutのテンプレート定義を簡単に作成できるジェネレーター

Webページをレイアウトする際にfloatを使って、そして去年あたりからはflexboxを使っての実装が増えてきたと思います。
CSS Grid Layoutはようやくすべてのデスクトップブラウザでサポートされたばかりですが、レイアウトすることに特化されており、シンプルな記述でより柔軟なレイアウトを実装することが可能です。

CSS Grid Layoutのテンプレート定義を簡単に作成できるジェネレーターを紹介します。
CSS Grid Layoutってどんな感じ? という人にもいいかもしれません。

サイトのキャプチャ

CSS Grid Template Builder

CSS Grid Layoutでレイアウトをするには、「grid-area」プロパティを使って、グリッドの定義をすることから始めます。例えば、通常のページの場合、ヘッダ・フッタ・コンテンツ・サイドバー2つのエリアを定義します。

次に「grid-template-areas」プロパティを使って、グリッドのレイアウトを視覚的に指定します。各エリアをスペースで区切り、リスト状に記述します。

スタイルシートの各行はグリッドの横列を表しており、定義されたそれぞれのエリアが1つの縦列で、エリアが複数のカラムにまたがる時には複数記述します。

参考: CSSの新しいレイアウトモジュール「CSS Grid Layout」を使って、レスポンシブ対応の3カラムレイアウトを実装

これらの定義を視覚的にできるのが、「CSS Grid Template Builder」です。

サイトのキャプチャ

CSS Grid Template Builder

操作は簡単です。
グリッドやアイテムをドラッグ&ドロップして調整すると、すぐにコードが生成されます。

サイトのキャプチャ

サイドバーを下まで延長

グリーンの枠を変更したり、サイドバーやコンテンツを入れ替えたりも可能です。

サイトのキャプチャ

サイドバーとコンテンツを変更

CSS Grid Layoutで実際に実装してみたい人は、下記を参考にしてください。

top of page

©2017 coliss