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. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

  2. FancySelect

    JavaScript

    セレクトメニューをスタイリッシュに実装できるjQueryプラグイン「FancySelect」

    セレクトメニューをシンプルでスタイリッシュに実装することができるjQu…

  3. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  4. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  5. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  6. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP