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

関連記事

  1. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  2. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

  3. Square Menu
  4. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

  5. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  6. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP