レスポンシブ対応の変化するグリッドを各デバイスの見え方を確認しながら設計できるオンラインツール -Shoelace

スマホ・タブレット・デスクトップ、それぞれで変化するレスポンシブ対応のグリッドを確認しながら設計ができるオンラインツールを紹介します。

サイトのキャプチャ

Shoelace

使い方は簡単、まずはページにアクセス!
登録とかの面倒なことはありません。

サイトのキャプチャ

Shoelace

あとは各カラムをクリック・ドラッグで作成します。
作成シーンをアニメーションGIFにしてみました。

サイトのキャプチャ

作成シーンのアニメーション

中央パネルでグリッドを作成し、左パネルは上からスマホ、タブレット、デスクトップ、ラージデスクトップの表示で、右パネルにはリアルタイムでコードが生成されます。

上部の「Save」ボタンで保存すると、「Preview」ボタンが表示されて実際のページとしてグリッドを表示することもできます。

作成したコードは、Bootstrapのグリッドして利用することができます。

サイトのキャプチャ

作成完了

sponsors

top of page

©2024 coliss