jQueryでサイト全体の文字サイズを変更する

2021/2/21 2021/3/3

こんにちは、ゆんつです。

WEBサイトを閲覧していて文字の大きさを変更する場合。

各ブラウザに搭載されている文字の拡大表示機能などを使うことで文字の大きさを変更することができます。

ただし、そのような方法で文字サイズを変更するのは、普段からパソコンを操作している人にとっては簡単ですが、そうでない人にとっては解りづらいです。

そこでたまに見かけるのが「大」「中」「小」などの文字サイズを変更するボタンを設けているWEBサイトです。

これによりパソコンを普段使わない人でも、文字の大きさを簡単に変更することができます。

この仕掛けはjQueryを使って簡単に実装することができます。

今日はjQueryを使って文字のサイズを変更する方法について書きたいと思います。

1 文字サイズを変更する
2 まとめ

文字サイズを変更する

デモを用意したので、試しにボタンをクリックしてみてください。

See the Pen font-size-change by konpure (@yuntu) on CodePen.

ボタンに応じて「この文字の大きさは変わる」という文字のサイズが変更されるはずです。

仕組みを説明していきます。

まずCSSの抜粋をご覧ください。

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

htmlのfont-sizeは62.5%。

これはブラウザで閲覧したときにデフォルトで表示される文字サイズは16pxなので、そのデフォルトの文字サイズを扱いやすい10px（16px * 62.5% = 10px）にするための設定です。

そしてbodyにfont-size: 1.6remを設定しています。

remはhtmlのフォントサイズを基準とする相対単位なので、「1.6rem = 16px」がサイトのデフォルトの文字の大きさとなります。

全体的に文字の大きさを変更したい場合。

remの基準となっているhtmlの62.5%を小さくすれば、remでfont-sizeを設定している要素の文字は全て小さくなりますし、逆に62.5%よりも大きくすればremでfont-sizeを設定している要素の文字は全て大きくなります。

ですので、「大」「中」「小」のボタンをクリックしたときに、htmlのfont-sizeが変更されるようにjQueryを記述すればいいだけです。

以下がjQueryのコードになります。

//各サイズのボタンをクリックするとベースとなるhtmlのfont-sizeが変わる
$(function(){
  $('.small').click(function(){
    $('html').css('font-size', '37.5%');
  });
  $('.medium').click(function(){
    $('html').css('font-size', '62.5%');
  });
  $('.large').click(function(){
    $('html').css('font-size', '100%');
  });
});

これによりhtmlのfont-sizeは