no-image

JavaScript

コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせて動的に拡大・縮小させることができます。スマホやパソコンなど、さまざまな機器のブラウザで快適にコンテンツを閲覧できるWebサイトを作りたい場合に活用したくなりますね。

Scalable

デモ

デモではContainerと書かれたコンテナのサイズを変更することで、コンテナ領域内にある要素を拡大・縮小させることができます。コンテナの右下をドラッグすることで、コンテナサイズを調節することができます。

コンテナを大きくするとそれに合わせて要素も大きくなり、コンテナを小さくするとそれに合わせて要素も小さくなります。コンテナに合わせて動的に要素のサイズも変化するので、いろんなデバイスに対応させたいといったシーンなどで活躍してくれそうですね。

使い方自体もとてもシンプルなので、簡単に実装できます。また、オプションもいくつか用意されていることから、ちょっとしたカスタマイズも可能です。

主なオプションは、align、verticalAlign、containerHeight、minWidth、maxWidth、minScale、maxScaleです。alignの値には、left、center、rightがあり、デフォルト値はleftになっています。verticalAlignの値には、top、center、bottomがあり、デフォルト値はtopです。

また、containerHeightの値には、fixedとautoが用意されていて、デフォルト値はfixedに設定されています。

コンテナ領域内にある要素をコンテナサイズに合わせて拡大・縮小してくれる機能を実装したい人は、ぜひ「Scalable」を使われてみてはいかがでしょうか。

Scalable

Ace Responsive Menuレスポンシブなマルチレベルのナビゲーションを実装できる「Ace Responsive Menu」前のページ

シンプルで操作性もいいモバイルメニュー実装「jQuery-Simple-MobileMenu」次のページjQuery-Simple-MobileMenu

関連記事

  1. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  2. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  3. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  4. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  5. Circular Slider
  6. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

最近の記事

  1. チキン&グリーンサンドイッチ
  2. アートアクアリウム美術館 GINZA
  3. オケラ
  4. デンタルプロ 歯間ブラシ
  5. ダミアン・ハースト 桜
PAGE TOP