[JS]ノート風のレイアウトもOK！画像をベースラインに揃えて配置するだけのシンプルなスクリプト -Baseline.js
Post on:2012年6月25日
sponsors
レスポンシブデザインにも対応、指定したベースラインに画像のサイズを揃えて配置するjQueryのプラグインを紹介します。
縦のリズムを美しく整えます！
[ad#ad-2]
Baseline.jsのデモ
デモは赤いボタンの「Turn Baseline.js」をクリックすると、スクリプトを実行します。
ボタンが緑の状態はスクリプトはオフで、画像はそのまま配置されています。
Baseline.js適用前
[ad#ad-2]
ボタンをクリックするとスクリプトは実行され、画像のサイズはベースラインに揃い、画像に続くテキストも罫線に揃って表示されます。
Baseline.js適用後
Baseline.jsの使い方
使い方は2ステップです。
Step 1: 外部ファイル
「jquery.js」と当スクリプトを外部ファイルとして記述します。
<script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/jquery.baseline.js"></script>
Step 2: JavaScript
適用する範囲をjQeuryのセレクタで指定し、ペースラインをpxで指定します。
$('img').baseline(24);
//全てのimg要素に24pxのベースライン
$('.content img').baseline(30);
//.content内のimg要素に30pxのベースライン
レスポンシブデザインにも対応しており、ブレイクポイントごとにベースラインを定義できます。
$('.content img').baseline({'0px':24, '700px':30});
//.content内のimg要素に24pxのベースライン、幅700px以上で30pxに
sponsors
