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

Rollerblade.js画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」前のページ

無料&有料のベストなWordPressテーマ集(2014年8月)次のページベストなWordPressテーマ集

最近の記事

  1. エッグペペ
  2. ダークチョコレート
  3. 朝のコーヒー
  4. ザンビア
  5. かほり梨
PAGE TOP