文字サイズ変更

全体の変更

ページ全体を変更します。

<script>
  let x = 100;
  function larger()  { x *= 1.2; document.body.style.fontSize = x + '%'; }
  function smaller() { x /= 1.2; document.body.style.fontSize = x + '%'; }
</script>

<div>
  <button type="button" onclick="smaller()">小さく</button>
  <button type="button" onclick="larger()">大きく</button>
</div>

部分的な変更

特定の部分だけ文字サイズを変更します。

ほげほげほげ

<script>
  let y = 100;
  function larger()  { y *= 1.2; document.getElementById('resizable').style.fontSize = y + '%'; }
  function smaller() { y /= 1.2; document.getElementById('resizable').style.fontSize = y + '%'; }
</script>

<div>
  <button type="button" onclick="smaller()">小さく</button>
  <button type="button" onclick="larger()">大きく</button>
</div>

<p id="resizable">ほげほげほげ</p>

ボタンのデザイン

デフォルトのボタン（<button type="button">ボタン</button>）はボタンであることがわかりにくいデザインなので，CSSでデザインを工夫します。例：

button {
  font-weight: bold;
  padding: 0.5em 1em;
  background-color: #EEE;
  border-radius: 0.7em
}

（蛇足）文字サイズ変更ボタンを付けるべきか

最近のブラウザには自由に文字サイズを変えられる機能がありますので，文字サイズ変更ボタンの意味はあまりありません。むしろ，ブラウザで文字サイズを変えたときに文字どうしが重なって読めなくならないように注意するほうが意味があるでしょう。同様なことが，ページを声で読み上げる仕組みについても言えます。