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

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

関連記事

  1. AnimatedSlideNav

    JavaScript

    動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」

    AnimatedSideNavは、動きがオシャレなアニメーションによる…

  2. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  3. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  4. bubbly-bg

    JavaScript

    幻想的なバブル背景アニメーションを実装できる「bubbly-bg」

    bubbly-bgは幻想的で美しいバブル(気泡)背景アニメーションを実…

  5. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  6. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

コメント

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

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

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP