[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element
Post on:2015年11月6日
sponsors
画像やテキストなど、コンテンツのデザインで重要なのは縦のリズム。
ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできるスクリプトを紹介します。
デモのように罫線を背景にした時には、画像・文字ともに罫線に揃えることも簡単です。
Baseline Elementのデモ
デモはレスポンシブ対応で、1カラムと2カラムが用意されています。
1カラムは力技でもできますが、2カラムになると縦のリズムは難しくなります。
デモページ: 2カラム: 幅1,200pxで表示
レスポンシブ対応で、幅が狭い時でも同様に縦のリズムを確保します。
デモページ: 2カラム: 幅480pxで表示
テキストを日本語に変更しても、ベースラインにしっかりとツラがあっています。
デモのテキストを日本語に（ダミーテキスト: 組見本用創作文）
Baseline Elementの使い方
Step 1: 外部ファイル
当スクリプトとjQueryを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 |
<body> ... コンテンツ ... <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="vendor/baseline-element/baseline-element.js"></script> </body> |
Step 2: JavaScript
ベースラインを設定し、適用する要素（.baseline-image）を指定して、スクリプトを実行します。
|
1 2 3 4 |
<script type="text/javascript"> var baseline = 24; $('.baseline-image').baselineElement(baseline); </script> |
sponsors
