textfit.js

JavaScript

コンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」

textfit.jsは、コンテナ内に表示するテキストをフィットさせることができるjQueryプラグインです。ブラウザサイズを縮小してもテキストのレイアウトを保持したまま縮小されるので、デザインをできるだけ統一させつつレスポンシブに対応したい人には最適ですね。

textfit.js

デモ

デモページではタイトルに「textfit.js」、サブタイトルに「Fit text within its container」と表示されており、ブラウザ幅を縮小してもテキストが折り返されることなく、そのままの位置を保ちながら最適化されます。

常にコンテナ内にフィットするような仕組みなので、文字の位置などをそのままにしながらブラウザサイズに合わせて可変させたいという場面にはピッタリのプラグインといえますね。

HTMLタグ内には「data-textfit-min」と「data-textfit-max」の数値を指定することができます。data-textfit-minが最小値(ピクセル)、data-textfit-maxが最大値(ピクセル)です。ほかにも、「data-textfit-adjust」という項目も用意されています。

というわけで、ブラウザサイズを可変してもコンテナ内にうまくフィットさせれるテキストを実装したい人は、ぜひ「textfit.js」をチェックしてみてください。

textfit.js

flexible-bootstrap-carouselフレキシブルなカルーセルスライダーを実装できる「flexible-bootstrap-carousel」前のページ

音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」次のページRythim.js

関連記事

  1. PleaseWait

    JavaScript

    ローディングアイコンをオシャレに実装することができる「PleaseWait」

    PleaseWaitはローディングアイコンをオシャレに見せることができ…

  2. funnyText.js
  3. Choice.js
  4. table-dragger

    JavaScript

    ドラッグ&ドロップでテーブルを並べ替えられる「table-dragger」

    table-draggerはドラッグ&ドロップでテーブルの並べ替えを可…

  5. Hamburger Icon Menu
  6. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP