• かちびと.net

    制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Gridのご紹介です。なかなか良かったのでメモ。オンオフを切り替えられるのはいいかもですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

制作中の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

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services