JavaScript

ブラウザサイズに応じてフォントサイズを変更する方法【jQuery.fontFlex.js】

jQuery.fontFlex.jsを使ってブラウザサイズに応じてフォントサイズを変更する方法をご紹介します。
メディアクエリでフォントサイズを変更すれば良いのですが、これはタグを指定するだけで1行で記述できるので簡単です。

ソース元:jQuery.fontFlex

以下がソース元です。
jQuery.fontFlex

ブラウザサイズに応じてフォントサイズを変更する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.min.js、jQuery.fontFlex.jsファイルを読み込みます。$(指定タグ).fontFlex(可変フォントサイズ)で指定タグのフォントサイズをブラウザサイズ毎に変更します。今回はh1タグのフォントサイズをブラウザサイズに応じて変更します。

<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の記述

※h1タグのフォントサイズをブラウザサイズに応じて変更します。必要に応じて変更して下さい。

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

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

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

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

 

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