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」に変更してください。

柴田竹思

柴田竹思

ベトナム在住Web系フリーランス。有名企業から個人事業まで、いろんなウェブサイトを制作してます。これまで400弱くらい作りました。一年中WordPressばっかりいじってます。

プロフィールはこちら