Fitty

JavaScript

親コンテナにテキストをフィットさせられる「Fitty」

Fittyはテキストをスケールアップ、またはスケールダウンして親コンテナに完全にフィットさせることができるJSライブラリです。フレキシブル・レスポンシブなWebサイトには最適な機能ですね。

jQueryなどへの依存性もなし

デモ

デモではコンテナ内にテキストがしっかりフィットした状態で収められています。レスポンシブにもなっているので、画面を縮小・拡大してみるとわかりますが、それに合わせてテキストも最適化されます。

パソコン、スマホ、タブレットと、さまざまなデバイスからの閲覧でもテキストを親コンテナにフィットさせた状態を維持したいという場面にはピッタリのライブラリですね。

ちなみに、jQueryなどへの依存性もなくファイル容量も軽量なのでサクサク動作します。セットアップも簡単なことから、手軽に実装できるのがグッドです。

フォントサイズは、min値・max値ともにオプションから指定することができます。主なオプション項目は、minSize、maxSize、multiLine、observeMutationsです。デフォルト値は、minSizeが16、maxSizeが512、multiLineがtrueです。minSizeとmaxSizeの単位はピクセルになります。

ほかにも、fitty.observeWindowやfitty.observeWindowDelayなどのオプションや、fitといったイベントなども用意されています。

動作は、モダンブラウザ、IE 10+でテスト済みとのこと。また、ライセンスはMITになります。

Fitty

関連記事

  1. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  2. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

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

  3. elmenu

    JavaScript

    レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」

    elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装す…

  4. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  5. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  6. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP