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. no-image

    JavaScript

    スライダータイプの質問フォーム実装「jquery.formslider」

    jquery.formsliderはスライダータイプによる質問フォーム…

  2. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  3. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

  4. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  5. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  6. Basic Metro Dynamic jQuery Tab Menu

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP