[JS]ノート風のレイアウトもOK!画像をベースラインに揃えて配置するだけのシンプルなスクリプト -Baseline.js

レスポンシブデザインにも対応、指定したベースラインに画像のサイズを揃えて配置するjQueryのプラグインを紹介します。
縦のリズムを美しく整えます!

サイトのキャプチャ

Baseline.js -GitHub

Baseline.jsのデモ

デモは赤いボタンの「Turn Baseline.js」をクリックすると、スクリプトを実行します。

デモのキャプチャ

デモページ

ボタンが緑の状態はスクリプトはオフで、画像はそのまま配置されています。

デモのキャプチャ

Baseline.js適用前

ボタンをクリックするとスクリプトは実行され、画像のサイズはベースラインに揃い、画像に続くテキストも罫線に揃って表示されます。

デモのキャプチャ

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に

top of page

©2017 coliss