【テクニック】文字サイズの変更ボタンを実装する方法

RELEASE / 2024.3.2 UPDATE / 2024.03.02

JavaScript

jQuery

localstorage

コピペ

WEBサイトを見ているとヘッダー部分に文字サイズを切り替える「大」「中」「小」のボタンが用意されていることがよくあります。
文字サイズが小さすぎて読みにくい場合などに活用することが出来ます。

今回の記事では文字サイズを変更する「大」「中」「小」ボタンの実装方法をご紹介したいと思います。

この記事の目次を表示

1 完成コード
2 コードの解説
- 2.1 localstorageを使用
3 まとめ

完成コード

まずは完成コードから見ていきましょう。

以下が文字サイズを切り替えるボタンのHTMLコードです。

<div class="fontsize-controller">
    <span class="fontsize-controller__button" data-size="base-large">大</span>
    <span class="fontsize-controller__button" data-size="base-medium">中</span>
    <span class="fontsize-controller__button" data-size="base-small">小</span>
</div>

以下が文字サイズを変更するCSSになります。

html.base-large{
    font-size: 72.5%;
}
html.base-medium{
    font-size: 62.5%;
}
html.base-small{
    font-size: 50%;
}
body{
    font-size: 1.6rem;
}

/*----- 以下はお好みで調整 */
.fontsize-controller{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.fontsize-controller__button{
    display: block;
    width: 5rem;
    height: 5rem;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

そして、以下が文字サイズを変更するjQueryのコードです。

$(window).on('load',function(){
	
    if (!localStorage.getItem('ドメイン名-fontsize'))
    {
        localStorage.setItem('ドメイン名-fontsize','base-medium');
    }
    $('html').addClass(localStorage.getItem('ドメイン名-fontsize'));

});

$(function(){

    $('.fontsize-controller__button').click(function(){

        let font_size = $(this).data('size');

        localStorage.setItem('ドメイン名-fontsize',font_size);

        $('html').removeClass();

        $('html').addClass(localStorage.getItem('ドメイン名-fontsize'));

    });

});

このコードをコピペするだけで実装可能です。

以下が実装サンプルです。再読み込みしても、その設定が残っていることが確認出来ます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説は以下をご覧ください。

コードの解説

WEBサイトで文字サイズを切り替えるだけであれば、上で紹介したHTML、CSSのコードの他に、以下のようなjQueryコードを記述することだけでも実装可能です。

$(window).on('load',function(){

    $('html').addClass('base-medium');

});

$(function(){

    $('.fontsize-controller__button').click(function(){

        let font_size = $(this).data('size');

        $('html').removeClass();

        $('html').addClass(font_size);

    });

});

しかし、このコードだとページ移動した場合に、常に「中」のサイズが反映された状態となってしまいます。
ユーザビリティの観点を考慮すると1回文字サイズを適切なサイズに調整したら、その後はページ移動をしてもその設定サイズが引き継がれる方がいいですよね。

その「ページ移動をしても文字サイズの設定を引き継ぐ」機能を加えたのが最初にご紹介したコードです。

localstorageを使用

「ページ移動をしても文字サイズの設定をを引き継ぐ」機能を実装するためには何かしらの方法で設定を保持する必要があります。
Cookieを利用する方法やURLにパラメーターを保持する方法など様々な方法が考えられますが、今回ご紹介するコードはlocalstorageを使用する方法です。

$(window).on('load',function(){
	
    if (!localStorage.getItem('ドメイン名-fontsize'))
    {
        localStorage.setItem('ドメイン名-fontsize','base-medium');
    }
    $('html').addClass(localStorage.getItem('ドメイン名-fontsize'));

});

ページを読み込んだ際、localstorageに「ドメイン名-fontsize」が存在しているか確認し、存在していなければ「base-medium」を「ドメイン名-fontsize」にセットします。
そして、「ドメイン名-fontsize」にセットしてある値をhtmlにclassとして設定します。

ここでポイントはlocalstorageの値を「ドメイン名-fontsize」としている点です。

localstorageはブラウザが保持する値のため、他のサイトを閲覧している時もその値を参照することが出来ます。
もし、同じ値がセットされていると、他のサイトでセットされた同名のlocalstorageが呼び出されてしまいます。

それを防ぐために「ドメイン名-fontsize」という名前を設定しています。

$(function(){

    $('.fontsize-controller__button').click(function(){

        let font_size = $(this).data('size');

        localStorage.setItem('ドメイン名-fontsize',font_size);

        $('html').removeClass();

        $('html').addClass(localStorage.getItem('ドメイン名-fontsize'));

    });

});

そして、上のコードはボタンをクリックした時の処理が書かれています。

ボタンをクリックした時、そのボタンにセットされているdata属性の値を取得し「ドメイン名-fontsize」にセットします。
この値はブラウザに保持される値のため、ページ移動をした際も呼び出すことが出来ます。
ボタンをクリックするたびに「ドメイン名-fontsize」の値を書き換えているため、最新の設定をページ移動した際もを引き継ぐことが出来ます。

まとめ

いかがでしたか？
このようにlocalstorageを使うことでページ移動をした際もその値を保持することが出来るため文字サイズの設定も引き継ぐことが出来ます。
最後にもう一度完成コードを記載しますのでコピペでご使用ください。

<div class="fontsize-controller">
    <span class="fontsize-controller__button" data-size="base-large">大</span>
    <span class="fontsize-controller__button" data-size="base-medium">中</span>
    <span class="fontsize-controller__button" data-size="base-small">小</span>
</div>

html.base-large{
    font-size: 72.5%;
}
html.base-medium{
    font-size: 62.5%;
}
html.base-small{
    font-size: 50%;
}
body{
    font-size: 1.6rem;
}

/*----- 以下はお好みで調整 */
.fontsize-controller{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.fontsize-controller__button{
    display: block;
    width: 5rem;
    height: 5rem;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

$(window).on('load',function(){
	
    if (!localStorage.getItem('ドメイン名-fontsize'))
    {
        localStorage.setItem('ドメイン名-fontsize','base-medium');
    }
    $('html').addClass(localStorage.getItem('ドメイン名-fontsize'));

});

$(function(){

    $('.fontsize-controller__button').click(function(){

        let font_size = $(this).data('size');

        localStorage.setItem('ドメイン名-fontsize',font_size);

        $('html').removeClass();

        $('html').addClass(localStorage.getItem('ドメイン名-fontsize'));

    });

});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.