病院や学校のウェブサイトなどで、ユーザー側でフォントサイズを変更できるUIを見かけることがあります。

今回はjQueryとセレクトボックスを使ってフォントサイズを変更するUIを作る方法をご紹介します。

jQueryとセレクトボックスでフォントサイズを変更するUIのソース

HTML

<select name="fontSize">
  <option value="87.5">文字サイズ：小</option>
  <option value="100">文字サイズ：中</option>
  <option value="120">文字サイズ：大</option>
</select>

HTMLはこんな感じ。

ここでは、selectタグのname属性にfontSizeと指定しました。

optionタグのvalueには大・中・小それぞれのフォントサイズ(数値のみ)を入力しておきます。

今回は%で指定しますので、上記のようになっていますが、pxですることもできます。

CSS

body {
  font-size: 100%;
}

bodyタグのスタイルには、基準となるフォントサイズを指定しておきます。

今回は「中」のサイズを基準にしたいのでそこに合わせていますが、「小」を基準にしたりなどお好みで変更してください。

jQuery

$(function(){
  //フォントサイズ変更
  $("[name='fontSize']").change(function(){
    var size = $(this).val();
  $("body").css("fontSize",size+"%");
  })
});

selectタグをname属性で抽出し、optionのvalue属性に指定した値をbodyタグのフォントサイズとして入れています。

フォントサイズをpxで指定したい場合は、上記ソースの「%」を「px」に変更してください。