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が苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

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

プロフィールはこちら