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で画面を縮小した時

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

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

WordPressのログイン時のツールバーWordPressで記事タイトルの文字数制限をするやり方前のページ

似ているサイトを検索して探してくれる「SimilarSites」次のページSimilarSites

関連記事

  1. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  2. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  3. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  4. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  5. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

  6. Material ScrollTop Button

コメント

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

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

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP