レスポンシブ対応の変化するグリッドを各デバイスの見え方を確認しながら設計できるオンラインツール -Shoelace
Post on:2015年3月19日
sponsors
スマホ・タブレット・デスクトップ、それぞれで変化するレスポンシブ対応のグリッドを確認しながら設計ができるオンラインツールを紹介します。
使い方は簡単、まずはページにアクセス！
登録とかの面倒なことはありません。
あとは各カラムをクリック・ドラッグで作成します。
作成シーンをアニメーションGIFにしてみました。
作成シーンのアニメーション
中央パネルでグリッドを作成し、左パネルは上からスマホ、タブレット、デスクトップ、ラージデスクトップの表示で、右パネルにはリアルタイムでコードが生成されます。
上部の「Save」ボタンで保存すると、「Preview」ボタンが表示されて実際のページとしてグリッドを表示することもできます。
作成したコードは、Bootstrapのグリッドして利用することができます。
作成完了
sponsors
