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. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP