Responsive Elements

JavaScript

指定した要素をレスポンシブにしてくれるjQueryプラグイン「Responsive Elements」

Responsive ElementsというjQueryプラグインを使えば、指定した要素をあっという間にレスポンシブに対応させることができます。レスポンシブに対応させた要素には特定のクラスが付与されるので、目的に応じたクラスにCSSを定義することが可能です。以下、使い方です。

[ads_center]

Responsive Elementsの使い方

Responsive Elements

Responsive Elements

実際のデモでは、スライダーを動かして幅を変更することで要素内のレイアウトが調整されていきます。

使い方は、まずjQueryとプラグインをhead内に読み込みます。

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

レスポンシブにしたい要素にdata-respondを追加します。

<div class="quote" data-respond>

あとはCSSで以下のように記述していきます。ltは「未満」、gtは「以上」という意味です。

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

他にも以下のように様々なクラスが付与されるので、好きなクラスにCSSを設定することができます。

gt100 gt150 gt200 gt250 gt300 gt350 gt400 lt450 lt500 lt550 lt600 lt650 lt700 lt750 lt800 lt850 lt900

というわけで、レスポンシブに対応させたい要素がある時には役立つこと間違いなしですね。

Nexus7レビューNexus7(2013)購入レビュー前のページ

blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」次のページ

関連記事

  1. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  2. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  3. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  4. FixedContent.js

    JavaScript

    モバイルフレンドリーなコンテンツ固定のjQueryプラグイン「FixedContent.js」

    FixedContent.jsはスクロールしてもコンテンツを固定してく…

  5. Tagify

    JavaScript

    Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

    TagifyはVanilla JSを用いた軽量のタグ入力機能を実装でき…

  6. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP