<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button class="small">小</button>
  <button class="medium">中</button>
  <button class="large">大</button>
  <p>ボタンを押すとフォントサイズが変わります</p>

  <script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"></script>
  <script>
    $(function(){
      $('.small').click(function(){
        $("p").css('font-size','0.5rem');
      })
      $('.medium').click(function(){
        $("p").css('font-size','1rem');
      })
      $('.large').click(function(){
        $("p").css('font-size','1.5rem');
      })
    });

  </script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.