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

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  2. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

  3. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  4. Simple Lightbox
  5. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  6. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

最近の記事

  1. ハムエッグホットサンドとドリップコーヒー
  2. 高輪ゲートウェイ駅のスタバ
  3. 新幹線
  4. リッチモンドホテル
  5. ハーブバターチキン 石窯フィローネとドリップコーヒー

アーカイブ

PAGE TOP