フォントサイズを画面幅にあわせて変えたい件

サイトを作っていると、画面幅に連動してフォントサイズを自動で可変したいときが時々あります。

特に最近では、レスポンシブに対応したサイトが人気の傾向にあります。

画像や背景はCSSを使って可変にする事は簡単なのですが、文字はそうもいきません。

そこで、これらを簡単に実現してくれるのが「FitText」なのです！

何て偉そうに言っていますが、別に私が作った訳ではありませんが…。ｗ

この「FitText」ですが、指定した部分を非常に簡単に可変文字にすることができます。

やり方はというと…。

まずは、こちらのサイトからファイル一式をダウンロードします。

http://fittextjs.com



そんでもって、ここから！



開くと色々とファイルが入ってますが、必要なのは「jquery.fittext.js」だけです。

あとは、この「jquery.fittext.js」とjqueryを読み込む設定をページに書き込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
  $("#fittext1").fitText();
  $("#fittext2").fitText(1.2);
  $("#fittext3").fitText(1.1, { minFontSize: '50px', maxFontSize: '75px' });
 </script>

ここで設定しているID、「#fittext1」とかですね。これが可変定義されたフォント領域となります。上記の様に複数追加して定義できます。

また、先ほどのダウンロードファイル内に「example.html」というHTMLがありますので、こちら、参考ページとなっていますのでソースを確認してみてください。

ページ内、全ての文字が可変となると、これはちょっと読みにくいのですが、ポイントとなる部分で使うと、とても効果的な見せ方ができるかと思います。

画面幅で文字の可変を実現されたい方は、一度試してみては如何でしょうか！ｗ

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで 著：山田 祥寛 参考価格：\3,218 価格：\1,120 OFF : \2,098 (65%)