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. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  2. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  3. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  4. jQuery Notebook
  5. JavaScript

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「…

  6. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

コメント

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

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

最近の記事

  1. 16インチMacBook Pro
  2. レトロスペクティブ V2.0
  3. YAECA ワイドテーパードデニム 10-13WW

アーカイブ

PAGE TOP