Blog

グリッド状のレイアウトを補助するjQueryプラグイン作りました

nino-eye

最近、WEBページでグリッド状に要素を配置したデザインを行う機会がありました。

グリッドに要素を配置するようなデザインをコーディングで再現する方法はいくつかあると思いますが、
その時は、親要素を固定して、
そこに子要素を position: absolute で配置するという方法を取りました。

そのとき、子要素の位置を一つ一つ計算しながらCSSで配置するという作業を行ったのですが、その作業がとても大変で、デザインの変更があった場合に、計算を全てやり直さないといけない場合もありました。

そこで、この作業をもっと楽にするためのjQueryプラグインを作りました。

プラグイン Download

プラグインmin版

DEMO

 

使い方

image01

上記のようなレイアウトにしたい場合を例にご説明いたします。

まずは以下のようにHTMLで対象の要素を配置します。
例では仮に<div>にしていますが、タグの種類は基本的になんでも大丈夫です。

そうしたら、上で紹介しているプラグインをダウンロードして、jQueryと共にHTMLで読み込んで下さい。

そうしたら、以下のようにプラグインを呼び出して下さい。

image_02

子要素がもっとある場合は、追加可能です。

レスポンシブに対応させる場合は以下のようにリサイズイベントと連動させてください。

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ