BigText

JavaScript

テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

BigTextは、テキストの行を、指定した幅にフィットさせるために必要なフォントサイズと文字間に計算してフィットさせることができるjQueryプラグインです。テキストの行を均一にカッコよくしたいというシーンで役立ちますね。

BigText

デモ

上記のページには、実際のコードやテキストをフィットさせた時の画像も載っているので、具体的にどのような感じになるのかを確認できます。

特定の幅にテキストがフィットするように、それぞれの行に表示されたテキストのフォントサイズや文字間が自動で計算されるのはとても便利ですね。

テキストをフィットさせる幅は、「bigtext」というidを付与した親要素(サンプルではdiv)に「style=”width:300px”」というように設定してあげればOKです。使い方もとってもシンプルでわかりやすく、手軽に実装できるかと思います。

また、maxfontsizeやminfontsizeといった項目を使用して、フォントサイズの最大値・最小値を指定することも可能です。ほかにも、いろいろカスタマイズできるので、気になる人はぜひチェックしてみてはいかがでしょうか?

BigText

関連記事

  1. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  2. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  3. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  4. no-image
  5. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  6. Bootstrap Photo Gallery jQuery plugin

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP