[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element

画像やテキストなど、コンテンツのデザインで重要なのは縦のリズム。

ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできるスクリプトを紹介します。
デモのように罫線を背景にした時には、画像・文字ともに罫線に揃えることも簡単です。

サイトのキャプチャサイトのキャプチャ

Baseline Element -GitHub

Baseline Elementのデモ

デモはレスポンシブ対応で、1カラムと2カラムが用意されています。

デモのキャプチャ

デモページ

1カラムは力技でもできますが、2カラムになると縦のリズムは難しくなります。

デモのキャプチャ

デモページ: 2カラム: 幅1,200pxで表示

レスポンシブ対応で、幅が狭い時でも同様に縦のリズムを確保します。

デモのキャプチャ

デモページ: 2カラム: 幅480pxで表示

テキストを日本語に変更しても、ベースラインにしっかりとツラがあっています。

デモのキャプチャ

デモのテキストを日本語に(ダミーテキスト: 組見本用創作文

Baseline Elementの使い方

Step 1: 外部ファイル

当スクリプトとjQueryを外部ファイルとして記述します。

Step 2: JavaScript

ベースラインを設定し、適用する要素(.baseline-image)を指定して、スクリプトを実行します。

sponsors

top of page

©2024 coliss