Google今回は親要素の大きさに合わせてテキストをフィットさせるJavaScriptライブラリ[Fitty]の使い方を紹介します。レスポンシブにも対応して、親要素とテキストのサイズを自動で計算して大きさを調整してくれます。サンプルをご覧ください。https://on-ze.com/demo/js-fitty/同じことをCSSのみで実装するとなると、white-space:nowrap;や、font-sizeの単位を「vw」にするなどのテクニックを駆使して調整していくことになります。その点、この[Fitty]を使えば複雑な計算を自動で処理してくれるのでスゴく便利です。以下、実装方法を詳しく紹介していきます。最初に必要なファイルをダウンロードします。ZIP」とクリックするとダウンロードがはじまります。https://github.com/rikschennink/fittyいくつかのファイルが梱包されていますが、実際に使うのは「fitty.min.js」という本体ファイルのみ。1つのファイルで、しかも容量も4KB未満と超軽量です。このファイルをHTMLの<body>要素の最下部で読み込みましょう。src="fitty.min.js"></script></body>続いて[Fitty]を効かせるテキストを作ります。World</div>ここでは仮に親要素に「id="sample"」と名付けました。最後に[Fitty]を初期化するコードを記述します。<script>fitty('#sample');</script>これは先ほど読み込んだFittyの本体ファイルの下に記述します。すべてのコードをまとめると次のとおり。src="fitty.min.js"></script><script>fitty('#sample');</script>これで作業完了ですが、スタイルシート側で親要素の大きさを指定しておくことを忘れずに。https://on-ze.com/demo/js-fitty/オプション設定さて。続いては[Fitty]に用意されているオプション設定を説明していきます。基本的なオプションは次の4つ。最小のフォントサイズ。最大のフォントサイズ。最小フォントサイズを使用する場合に改行する。各要素をモニタリングして、サイズの変更があった場合にメソッド「MutationObserverInit」を使う。各オプションを指定したい場合は次のように引数として記述します。300});他にも「observeMutations」等を利用した細かい設定が可能ですが、より詳しくは公式サイトよりどうぞ。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【JavaScript】単体で使える超軽量スライダー[Siema]は初心者の方にオススメです。【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。各種プログラム言語でのコメントタグ(コメントアウト)表記のまとめ。【JavaScript】超軽量スムーススクロール『MoveTo』をご紹介!【JavaScript】ウィンドウを閉じるリンクを実装する方法。【JavaScript】超軽量・超高速のJavaScriptフレームワーク[Vanilla.js]をオススメします。