🌊

BootstrapのRangeでフォントサイズを変更

2021/02/18に公開

Bootstrap

HTML

jQuery

tech

概要

ここでは、Bootstrap v5.0のRangeを変更するとjQuery v3.5.1を使ってフォントサイズを変更する方法を記載しています。
正直、どんな需要があるかは分かりませんが、どなたかのご参考になれば幸いです。

Rangeについて

コード

index.html

<!doctype html>
<html lang="ja">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
	<title>Change Font-Size with Range</title>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="js/jquery_12.js"></script>
</head>
<body>
	<div class="container">
		<h1>Hello, world!</h1>
		<p>Range: <span id="scale">0%</span></p>

		<label for="customRange1" class="form-label">Example range</label>
		<input type="range" class="form-range" id="customRange1">
	</div>
	<!-- Option 1: Bootstrap Bundle with Popper -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

jquery.js

$(function () {

	$('#customRange1').change(function () {
		var n = $('#customRange1').val() / 2.5 + 80 + '%';
		$('#scale').text(n);
		$('html').css('font-size', `${n}`);
	})

})

Folder
├js
│└jquery.js
└index.html

もしくは、構成に合う様にコードを書き換えてください。
書き換える場所が不明な場合には、コメントください。

コードについて説明

htmlについては、Bootstrapのサイトにあるテンプレートを採用して作成しました。

また、jquery.jsファイルが利用可能となる様に、jQueryの読み込みを行っています。

工夫したところ

bodyのフォントサイズを変更しようとするとh1タグ部分に効果がない為、htmlのフォントサイズを変更しています。
その関係でRangeについても大きさが変わってしまう為、本番環境等で実装しようと思った時には、少しデザインを調整しないといけないと感じました。

また、Rangeの幅が0%~100%となっている為、そのまま反映するとフォントサイズが小さくなり過ぎてしまう為、計算式で80%~120%になる様にしています。

概要

Rangeについて

コード

コードについて説明

工夫したところ

Discussion