BigText

JavaScript

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

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

BigText

デモ

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

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

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

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

BigText

関連記事

  1. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  2. PopCircle
  3. How satisfied are you? Slider
  4. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

  5. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  6. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP