JavaScript

複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「jquery.columns」がよさそうだったのでメモがてらご紹介します。迅速にレスポンシブWebデザインにしたい時にはとても役立ちそうです。MITライセンスで、サポートブラウザは、IE8、IE9・10、Webkit、Firefox、Operaとなっています。ちなみにIE8に対応させたい場合にはHTML5とCSS3 Media Queriesに対応させるためのhtml5shivRespond.jsが必要になるみたいです。

[ads_center]

使い方

jQueryとダウンロードしたプラグインファイルを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.columns.js"></script>
<link rel="stylesheet" href="jquery.columns.css" type="text/css" />

HTMLのマークアップは以下のように記述します。row-X(Xには値)のXで行ごとの列を指定できます。例えば、1行に3列のカラムを収めたい場合にはrow-3とします。また、push-X(Xには値)を指定したカラム(col)はX列分押し込むことができます。この場合、row-Xには押し込みたい分のカラム数をあらかじめ足して指定しておく必要があります。

<header class="row-1">
  <div class="col">
    <!-- content -->
  </div>
</header>

<article class="row-3">
  <div class='col'> 
    <!-- content -->
  </div>
  <div class='col'>
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
  <div class='col'> 
    <!-- content -->
  </div>
  <div class='col'>
    <!-- content -->
  </div>
  <div class="col">
    <!-- content -->
  </div>
</article>

<footer class="row-3">
  <div class="col">
    <!-- content -->  
  </div>
  <div class="col push-1">
    <!-- content -->  
  </div>
</footer>

あとはプラグインを呼び出せばOKです。

$.columns.quickSetup()

こんな感じで画面が大きい時と。

jquery.columnsの画面が大きい時

画面を縮小した時。ちゃんと画面サイズによってレイアウトが調整されます。

jquery.columnsで画面を縮小した時

オプションではブレイクポイントを設定したりもできます。便利ですね。レスポンシブに対応させたい時には覚えておいても損はないプラグインかと思います。

ダウンロードや実際のデモ、詳しい詳細に関しては以下からどうぞ。

関連記事

  1. Water Wave Effect jQuery
  2. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  3. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  4. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  5. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  6. NO IMAGE

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP