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. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  2. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  3. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  4. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  5. bubbly-bg

    JavaScript

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

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

コメント

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

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

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP