jQuery.fontFlex

JavaScript

フォントサイズをブラウザ幅に合わせて自動で変更してくれるプラグイン「jQuery.fontFlex」

jQuery.fontFlexというプラグインを使えば、フォントサイズをブラウザ幅に合わせて自動で変更してくれる機能を実装することができます。レスポンシブWebデザインにもピッタリですね。軽量なところもグッドです。色んなデバイスのアクセスからでも最適なフォントサイズを表示することができるので、ユーザーにも優しい機能だと思います。

[ads_center]

jQuery.fontFlexの使い方

以下から実際のデモを確認することができます。

jQuery.fontFlex

デモ

使い方もシンプルです。head内にjQuery本体とプラグインを読み込みます。

<script src="jQuery.min.js"></script>  
<script src="jQuery.fontFlex.js"></script>

そしてプラグインを以下のようにセット。

$(function() {
    // すべての要素に設定
    $('body').fontFlex(14, 20, 70);

    // h1だけに設定
    $('h1').fontFlex(24, 36, 70);
});

fontFlexに指定している数値は、1番左がフォントサイズの最小値、そして真ん中がフォントサイズの最大値になります。

1番右の数値はミッドレンジバッファ(Mid-range buffer)になっており、60〜70までの値がベストな結果を生むとのこと。

  • Google Chrome
  • Safari(デスクトップ&モバイル)
  • Internet Explorer(9, 10, 11)
  • Firefox

jQuery.fontFlex

関連記事

  1. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

  2. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  3. FancySelect

    JavaScript

    セレクトメニューをスタイリッシュに実装できるjQueryプラグイン「FancySelect」

    セレクトメニューをシンプルでスタイリッシュに実装することができるjQu…

  4. Slight Submenu
  5. jQuery.GI.TheWall.js

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP