Flexboxを使ったページのレイアウトから要素の配置まで、レスポンシブ対応のコードが生成できるツール -Flexible Boxes
Post on:2016年12月19日
Flexboxを使ったページレイアウト、要素の配置など、レスポンシブ対応のコードが結果を見ながら簡単に生成できるオンラインツールを紹介します。
Flexboxでどんなことができるんだろう、という勉強にもいいですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016121601.png)
Flexible Boxes
Flexible Boxes -GitHub
Flexible Boxesの使い方は、簡単です。
まずは左下の「Presets」から、レイアウトのベースを選択します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016121602-00.png)
レイアウトの選択
「Presets」に用意されているレイアウトは、3種類。
-
- Simple
- ヘッダとフッタと1カラムのコンテンツ、シンプルなレイアウト。
-
- Holy Grail
- ヘッダとフッタ、そしてサイドバー2つとコンテンツの3カラム レイアウト。
-
- Centered
- 天地中央、左右中央、天地左右中央に要素を配置。
「Presets」でレイアウトを選択すると、それぞれの基本レイアウトが表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016121602-01.png)
Simple
ヘッダとフッタと1カラムのコンテンツ、シンプルなレイアウト。ヘッダにはロゴやナビゲーションが配置されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016121602-02.png)
Holy Grail
ヘッダとフッタ、そしてサイドバー2つとコンテンツの3カラム レイアウト。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016121602-03.png)
Centered
天地中央、左右中央、天地左右中央に要素を配置。
それぞれのレイアウトは、カスタマイズも可能です。
Holy Grailの3カラムを2カラムに変更してみます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016121602-04.png)
「DOM」のパネルで左のサイドバーを選択し、ゴミ箱をクリックすると、簡単に削除されました。カラムを削除するだけでなく、追加することも簡単にできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016121602-05.png)
レイアウトはURIに反映されるので、直リンクすることも可能。上記のリンクをクリックすると、左サイドバーが削除された状態で表示されます。
子要素は、右の「TOOLBAR」で変更できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016121603.gif)
フッタに配置されているロゴを中央配置から、左寄せに変更してみます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201604/2016121604.gif)
表示されているレイアウトは、リアルタイムにコードに反映されており、上の図でもCSSのパネルの最後に変更されたコードが追加されているのが分かると思います。
sponsors