Grid Editor - Web上でBootstrapのグリッド設計
Bootstrapでは高機能なグリッドが提供されていますが、それを使いこなすのはなかなか難しいのではないでしょうか。特にスマートフォンやタブレットでの表示を想定したグリッドは困難です。 そこで使ってみたいのがGrid Editorです。ビジュアル的にグリッドの設計ができるエディタです。
Grid Editorの使い方
デモです。ちょっと複雑そうに見えますがすぐに使い方は分かるかと思います。
マイナスをクリックすればグリッドの幅を減らせます。
子のグリッドを追加するのも簡単です。
さらに横に兄弟要素を追加。
左右の入れ替えも簡単です。
結果はHTMLコードで確認できます。
さらにスマートフォンサイズでの確認。
タブレットサイズ。
Grid Editorを使えばデスクトップ、タブレット、スマートフォンのそれぞれにおける画面幅に応じたグリッド設計が簡単にできます。作った後はHTMLで出力すれば良いだけです。Bootstrapを使ったWebデザインを行う前のグリッド設計にぜひどうぞ。
Grid EditorはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。