ボタンクリックで背景カラーを動的に変えるやつ。
ボタンクリックで背景カラーを動的に変えるやつ。とりあえず簡単なものから出していく。 #ウェブ開発 #キャリアチェンジ #プログラミング学習
Web開発において、ユーザーインタラクションを向上させるために、背景色を変える機能は非常に効果的です。この記事では、ボタンクリックで背景色を変えるシンプルなJavaScriptのコードをご紹介します。 以下のコードは、HTMLとJavaScriptを使用して、ボタンをクリックすることで背景色を変更する仕組みを実装しています。特に、背景色の変化はユーザーに視覚的なフィードバックを提供し、Webページをより魅力的にする手段の一つです。 ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色変更ボタン</title> <style> body { text-align: center; padding-top: 50px; transition: background-color 0.5s; } button { padding: 10px 20px; font-size: 16px; } </style> </head> <body> <button onclick="changeBackgroundColor()">背景色を変える</button> <script> function changeBackgroundColor() { const colors = ['#FFB6C1', '#87CEFA', '#32CD32', '#FFA500', '#8A2BE2']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; document.body.style.backgroundColor = randomColor; } </script> </body> </html> ``` この簡単なプログラムを基に、さらなる機能の追加やカスタマイズを行うことで、より高度なインターフェイスを構築することも可能です。例えば、ユーザーに色を選ばせる機能や、アニメーション効果を付け加えることも検討してみてください。このような技術は、フロントエンド開発に興味がある方には特におすすめです。初心者の方でも簡単に理解できる内容ですので、ぜひ試してみてください。
