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. jQuery Quick Modal
  2. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  3. jQuery ui material design datepicker
  4. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

  5. no-image

    JavaScript

    jQueryとCSS3を使った縦型アコーディオン「Accordion-menu」

    Accordion-menuは、jQueryとCSS3を使ったシンプル…

  6. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP