初心者でも簡単！jQuery.fontFlex.jsで実現するレスポンシブなフォントサイズ調整術｜DAD UNION

今回は、ブラウザのサイズに応じてフォントサイズを変更する方法を、初心者でも理解しやすく解説します。使うのはjQuery.fontFlex.jsという便利なライブラリです。CSSのメディアクエリを使う方法もありますが、jQuery.fontFlex.jsを利用すると、より簡単に、しかも直感的にフォントサイズを調整できます。

Contents

フォントサイズを変更するためのCSSの設定
jQuery.fontFlex.jsを使ったJavaScriptの設定
HTMLの設定
jQuery.fontFlex.jsを使ってブラウザサイズに応じてフォントサイズを変更するデモページ
参考ソース元：jQuery.fontFlex
まとめ

フォントサイズを変更するためのCSSの設定

まずは基本となるCSSを設定します。このCSSは、ブラウザのサイズに関わらず基本的なフォントの設定を行います。以下のコードを参考にしてください。（必要に応じてカスタマイズしてください）

<style type="text/css">
<!--
    body {
        font-size: 15px;
        font-weight: normal;
        line-height: normal;
        margin: 5%;
        padding: 0;
        -webkit-font-smoothing: antialiased;
    }
    div {
        position: fixed;
        z-index: 2;
        top: calc(50% - 30px);
        left: calc(50% - 90px);
        width: 180px;
        height: 60px;
        line-height: 61px;
        text-align: center;
        border-radius: 60px;
        background: #000;
        color: #fff;
        font-weight: bold;
    }
    h1 {
        font-weight: 300;
        line-height: 150%;
        color: #777;
    }
-->
</style>

jQuery.fontFlex.jsを使ったJavaScriptの設定

次に、jQuery.fontFlex.jsを利用して、ブラウザのサイズに応じてフォントサイズを動的に変更するJavaScriptを記述します。まずは、必要なライブラリjquery.min.js（1.8.0）、jQuery.fontFlex.jsファイルを読み込みます。その後、対象のHTML要素（この例ではh1タグ）に対して、fontFlexメソッドを適用します。
$(指定タグ).fontFlex(可変フォントサイズ)で指定タグのフォントサイズをブラウザサイズ毎に変更します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="jQuery.fontFlex.js"></script>
<script type="text/javascript">
    $(function() {
        $('div').delay(1000).fadeOut(800);
        $('h1').fontFlex(20,60,40);
    });
</script>

HTMLの設定

ここでは、実際にフォントサイズを変更したいHTML要素を設定します。この例では、h1タグに対してfontFlexメソッドを適用しています。

    <h1><b>jQuery.fontFlex</b>を使ってブラウザサイズに応じてフォントサイズを変更します。ブラウザをリサイズしてみてください。$(指定タグ).fontFlex(可変フォントサイズ)で指定したフォントサイズ毎に変更されます。jQuery.fontFlex.jsファイルサイズは1KB以下なので軽量です。正直jQuery.fontFlex.jsを使わなくてもメディアクエリでフォントサイズを変更すれば良いのですが、これはタグを指定するだけで1行で記述できるので簡単ですね。</h1>

    <div>ブラウザをリサイズ</div>