JavaScript

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

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

フォントサイズを変更するための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>

jQuery.fontFlex.jsを使ってブラウザサイズに応じてフォントサイズを変更するデモページ

実際にどのように動作するかを見たい場合は、以下のデモページをご覧ください。

縦長のtable(表)にスクロールバーを表示・非表示するデモページ

参考ソース元:jQuery.fontFlex

jQuery.fontFlex.jsの詳細については、以下のGitHubページを参照してください。

jQuery.fontFlex

まとめ

今回紹介したjQuery.fontFlex.jsを使えば、CSSのメディアクエリを駆使することなく、簡単にフォントサイズのレスポンシブ対応が可能です。特に初心者の方には、このシンプルな方法が大変役立つでしょう。

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。