どや!?ブラウザのみで操作するグリッドフレームワーク「Griddle.It」がシンプルで便利!!

18 4月

  • このエントリーをはてなブックマークに追加

ブラウザのみで操作するグリッドフレームワーク「Griddle.It」がシンプルで便利!!

デザイン案を作成する際に、まず取り掛かるのがレイアウトの調整。
グリッドフレームワークのwebサービスはいくつかありますが、「Griddle.It」というwebサービスが一番シンプルで使いやすいかなと感じたのでご紹介。

Griddle.Itでできること

  • webブラウザのみで自由なグリッドを“その場”で画像にして作成
  • 制作中のwebサイトにCSSを加えることで、背景にグリッドを表示

DEMO

言葉で説明するより、実際に使ってみたほうが分かるかと思うので
よろしければ使ってみてください。

①ブラウザでグリッドを作成

ブラウザでグリッドを作成

下記を参考にアドレスバーにグリッドの横幅・カラム数・余白サイズを入力。
表示されたページには、あなたが設定した通りのグリッドを画像で作成してくれます。
画像なので右クリックで保存することができます。
グリッドやテキストの色の変更等は後ほどw

http://griddle.it/ [全幅] - [列数] - [余白サイズ]

例)http://griddle.it/960-12-30

②webサイトにCSSを加える

webサイトにCSSを加える

①で作成した画像をbodyの背景として組み込みます。
制作中のwebサイトにcssを加えることで、グリッドを意識しながらコーディングが可能です。

body {
  background: url(http://griddle.it/960-12-30) repeat-y center top;
}

例)デモサイトを見る

③グリッドをカスタマイズしてみる

グリッド画像の高さを変える

グリッド画像の高さを変える

「?horizontal=30」を加えることで、グリッド画像の高さを変更することができます。
画像として保存するときには便利ですよね。

http://griddle.it/960-12-20?horizontal=30

例)http://griddle.it/960-12-20?horizontal=300

グリッドの色を変える

グリッド画像の高さを変える

グリッドを好みの色でデザインすることもできます。
下記を参考にベースの色、背景色、テキスト色の3つを指定してください。

http://griddle.it/960-12-20?color=33ddaa&background=11bb33&text=345c98

例)http://griddle.it/960-12-20?color=33ddaa&background=11bb33&text=345c98

グリッドの数字を消す

グリッドの数字を消す

グリッド画像上に表示されるピクセルの数値が邪魔だなってときには「?num=false」を付け加えることで数字を消すこともできます。

http://griddle.it/960-12-20?num=false

例)http://griddle.it/960-12-20?num=false

Griddle.It

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL