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

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

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

サイトのキャプチャ

Responsive Elements
Responsive Elements -GitHub

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
ブレイクポイントの間隔

top of page

©2017 coliss