制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid

昨日TwitterでもPostしたんですけどやっぱり
たまに使いそうなのでメモ。数値を設定する
だけで簡単にシンプルなグリッドを重ねる事
が出来るWeb屋さん向けのjQueryプラグイン・
Simple Gridです。いちいち拡張やブックマー
クレット使うのも面倒ですしね。

制作中のサイトにこのプラグインを入れるだけでグリッドを表示できるので場合によっては手間が省けるかもしれません。オンオフも簡単に切り替えられるのもメリットです。

Simple Grid

こうしてグリッドを重ねられます。微調整で結構時間取られるので楽っちゃ楽かも。

グリッドの調整は簡単で、jQueryとプラグインを読み込んで下記のように設定するだけです。

<script type="text/javascript">
      $.simpleGrid({
        rowHeight: 20, 
        columnWidth: 30, 
        gridWidth: 960 
      });
    </script>

これで、グリッドの幅の調整が出来ました。同時に左上にピンク色のドットが表示されますので、クリックで表示のオンオフが可能になります。

Sample

デモ作りました。左上のピンクのドットをクリックするとグリッドが表示されます。

デモ01
rowHeight: 20,
columnWidth: 30,
gridWidth: 960

デモ2
rowHeight: 10,
columnWidth: 60,
gridWidth: 960

デモ3
rowHeight: 120,
columnWidth: 60,
gridWidth: 1140

こういう補助系ツールはいろいろありますけど、制作中のサイトでjQueryを使う予定ならこういうのも手かなと思います。以下よりダウンロードできますよ。

Simple Grid