10月の終わりがあと残り8日…

朝の5時ぐらいに起きると、外の景色はまだまだ日が上がるころの景色に変化してきましたね。

朝起きると寒くなってきました。

風邪ひかんように体調管理をしっかりしとかないとだめだなぁと感じました。

漢字健忘にならないようにしっかりと「スキマ時間」を使って漢字の復習、英語の文法、単語の勉強をしてます。

さてと、話題を取り戻して…

技術の忘備録～Webブラウザでのフォントの大きさを自由自在に変更する～

>ul<
	>li class="size-btn small"<>button<小>/button<>/li<
	>li class="size-btn medium"<>button<中>/button<>/li<
	>li class="size-btn large"<>button<大>/button<>/li<
>/ul<

ただ、注意事項があります。

文字の大きさを可変するためには、フォントサイズを「PX」単位を使用しない方がいいです。

こちらも試行錯誤しましたが、「PX」単位を使ったら大きさも反映できませんでした。

大きさを反映できるとしたら、「REM」or「%」のどちらかを使うことを推奨します。

さてと、javascriptの記述を載せておきますね。

$(function(){
	$('.small').click(function(){
		$('html').css('font-size', '30%');
	});
	$('.medium').click(function(){
		$('html').css('font-size', '60%');
	});
	$('.large').click(function(){
		$('html').css('font-size', '100%');
	});
});

またまた、注意事項があります。

絶対に親要素に、フォントサイズを必ず「REM」or「%」と記述してください。

計算方法は、意外と面白いんですね。

例えば、親要素が「font-size:1.6rem;」を指定したとした場合。

Smallのフォントが30%の場合

16px（デフォルトの文字サイズ） * 30%（スモールサイズで設定した比率） * 1.6（親要素のフォント設定） = 7.68px

になります。

このシステムの仕組みを知ったのが、役所のWebページを見て参考になりました。

役所のWebページって高齢者がみる人がいるため、わかりやすく作っているんやなぁと。

もっと、高齢者の人にも見せてもらえるようにユーザービリティを磨かないとだめですなぁ！

では、また！