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

Skitter豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」前のページ

オシャレで多彩なホバーエフェクト実装「Inspiration for Menu Hover Effects」次のページInspiration for Menu Hover Effects

関連記事

  1. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

  2. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  3. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

  4. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  5. SweetModal

    JavaScript

    シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」

    SweetModalは、アラートやダイアログなどをシンプルでエレガント…

  6. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP