<body> <div class="container"> <div class="row"> <button class="btn-s">小</button> <button class="btn-m">中</button> <button class="btn-l">大</button> </div> <div class="row"> <div class="col"> <p>ボタンクリックで文字の大きさが変わります</p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script> $(function(){ $('.btn-s').click(function(){ $("p").css('font-size','0.5em'); }); $('.btn-m').click(function(){ $("p").css('font-size','1em'); }); $('.btn-l').click(function(){ $("p").css('font-size','1.5em'); }); }) </script> </body>
なんか難しいことやってるのかと思ったら、割と単純でワロタw