BigText

JavaScript

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

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

BigText

デモ

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

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

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

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

BigText

jquery.resizeendウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」前のページ

クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」次のページAccordion.JS

関連記事

  1. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  2. infiniteSlider2.js
  3. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  4. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  5. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  6. jQuery Responsive Tabs

最近の記事

  1. COMOLI ベタシャンCPOシャツ(サックス)
  2. ハワイアナス ビーチサンダル
  3. 蓮の花
  4. チキンアラビアータ 石窯フィローネ
  5. ユニクロ ポロシャツ

アーカイブ

PAGE TOP