[JS]派手な演出は無し！レスポンシブ対応のレイアウトを素早く構築するスクリプト -jquery.columns

サイト構築 -JavaScript

Post on:2012年12月27日

jquery.columnsのデモ

対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。
まずは、デスクトップサイズとして幅1,200pxでの表示から。

デモページ：幅1,200pxで表示

表示サイズを変更すると、それに合わせてグリッドや画像・フォントサイズが最適化されます。

デモページ：幅800pxで表示

スマフォサイズにすると、レイアウトがかなり変わります。

デモページ：幅480pxで表示

jquery.columnsの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.columns.js"></script>
</head>

IE8対応にするには、html5shivとRespond.jsが必要です。

Step 2: HTML

レイアウトは幅を100%にした容器に、div要素でカラムを配置しています。

<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>

Step 3: JavaScript

カラムの幅（%）を設定し、表示サイズごとのフォントサイズを設定し、スクリプトを実行します。

<script type="text/javascript" charset="utf-8">
$.columns.quickSetup({ 
  width: 70,
  center: true,
  fontSize: $.columns.calcFontSize([1024, 14], [1440, 18])
})
</script>

Media Queriesを使用すると、下記のようになります。

media all and (max-width: 1024px) {
  .col { 
    font-size: 16px !important;
  }
}
@media all and (min-width: 1440px) {
  .col { 
    font-size: 20px !important; 
  }
}

スクリプトのオプション

スクリプトのオプションではカラムの数や幅、ブレイクポイントとフォントサイズが設定できます。

defaults = {
  colsPerRow: 3, // カラムの数
  width: 70, // ウインドウの幅（%）
  height: 'auto', // ビューポイントユニットの高さ
  center: true, // レイアウトのセンタリング
  breakPoints: [ [1024, 95], [1440, 80] ] // ブレイクポイントの設定
  fontSize: 1.55 // ビューポイントユニットのフォントサイズ
}