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. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  2. vTicker

    JavaScript

    シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

    シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイ…

  3. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  4. uploadHBR

    JavaScript

    複数の画像選択に対応したjQueryファイルアップローダー「uploadHBR」

    uploadHBRは複数の画像選択に対応したファイルアップローダーを実…

  5. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  6. no-image

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP