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. Jquery Line Progress Bar
  2. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

  3. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

  4. Letter Drop

    JavaScript

    雨のように文字が落ちてくるアニメーションのjQueryプラグイン「Letter Drop」

    Letter DropというjQueryプラグインを使えば、雨のように…

  5. no-image

    JavaScript

    シンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」

    umodalはスッキリしたシンプルで美しいモーダルウィンドウを実装でき…

  6. Vimeo Carousel Gallery

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP