[JS]ページ上のあらゆる要素を簡単にレスポンシブ対応にするスクリプト -Responsive Elements

外部スクリプトを加えるだけで、ページ上のあらゆる要素にレスポンシブ対応のclassを利用できるようにするjQueryのプラグインを紹介します。

ブレイクポイントはピクセル単位で細かく、そして複数設定することが可能で、さまざまな表示幅に最適化なスタイルを特定の要素に適用できます。

Responsive Elements
Responsive Elements -GitHub

• Responsive Elementsのデモ
• Responsive Elementsの使い方

Responsive Elementsのデモ

デモは引用のテキスト、画像、人名などがセットなったコンテンツを表示幅に合わせて、最適化します。

デフォルトの状態

幅を広げると、ゆったりしたレイアウトに変更。

幅が少し狭くなると、画像が小さくなり、レイアウトも変わります。

最も狭い幅では、テキストのみに。

Responsive Elementsの使い方

Step 1: 外部ファイル

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

<script src="jquery.min.js"></script>
<script src="responsive-elements.js"></script>

Step 2: HTML

レスポンシブ対応にする要素に「data-respond」を加えます。

<div class="quote" data-respond>

Step 3: JavaScript

スクリプトは特に記述する必要はありません。

Step 4: CSS

レスポンシブ用のスタイルを定義します。
ltは未満、gtは以上で、「.lt500」は500px未満、「.gt150.lt300」は150px以上300px未満のスタイルになります。

.quote.lt500 {background: blue}
.quote.gt150.lt300 {background: red}

classは下記のように細かく設定して利用することもできます。

gt100 gt150 lt200 lt250 lt300 lt350 lt400 lt450 lt500 lt550 lt600 lt650 lt700 lt750 lt800 lt850 lt900

オプション

data-respondのオプションとして、ブレイクポイントの範囲と間隔を設定できます。

<div class="quote" data-respond="start: 100px; end: 900px; interval: 50px;">

start

ブレイクポイントを始めるピクセル値

end

ブレイクポイントを終了するピクセル値

interval

ブレイクポイントの間隔