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

2018.02.24 2018.03.26jQuery
jQueryとセレクトボックスでフォントサイズを変更するUIを作る

病院や学校のウェブサイトなどで、ユーザー側でフォントサイズを変更できる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」に変更してください。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

柴田 竹思

柴田 竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら