空白のボタンをクリック時に色を変える方法 - ブログ

ちょっと、そこ！空白ボタンのサプライヤーとして、私は空白ボタンをクリックすると色を変える方法についてよく質問されます。これは、Web サイト、アプリ、さらにはカスタムインターフェイスなど、プロジェクトに多くのインタラクティブ性を追加できる非常に優れた効果です。このブログ投稿では、そのプロセスを段階的に説明します。

クリック時にボタンの色が変わるのはなぜですか?

ハウツーの説明に入る前に、空白のボタンをクリックすると色が変わる理由について説明しましょう。まず第一に、ユーザーに即座にフィードバックを提供します。ユーザーはボタンをクリックすると何かが起こることを期待しており、色の変化はユーザーのアクションが登録されたことを示すシンプルかつ効果的な方法です。また、視覚的な面白さも加わり、インターフェイスがより魅力的なものになります。

前提条件

このチュートリアルを進めるには、HTML、CSS、JavaScript の基本を理解している必要があります。これらのテクノロジーを初めて使用する場合でも心配しないでください。すべてを平易な英語で説明します。コードを作成するためのテキストエディターと、コードをテストするための Web ブラウザーも必要です。

ステップ 1: HTML 構造を作成する

まずはボタンの基本的な HTML 構造を作成しましょう。テキストエディタを開いて新しいファイルを作成します。で保存します.htmlたとえば、拡張子ボタンの色の変更.html。コードは次のとおりです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,Initial-scale=1.0"> <title>ボタンの色の変更</title> <link rel="stylesheet" href="styles.css"> </head> <body> <button id="myButton">クリックしてください</button> <script src="script.js"></script> </body> </html>

このコードでは、ボタンのある単純な HTML ページを作成しました。ボタンには、IDの私のボタンこれを後で JavaScript でターゲットにするために使用します。という外部 CSS ファイルもリンクしました。スタイル.cssと呼ばれる JavaScript ファイルスクリプト.js。

ステップ 2: CSS を使用してボタンのスタイルを設定する

それでは、作成しましょうスタイル.cssファイルを使用してボタンのスタイルを設定します。テキストエディタで新しいファイルを作成し、名前を付けて保存します。スタイル.cssHTML ファイルと同じディレクトリにあります。コードは次のとおりです。

Rounded Corners Safety Pin Back suppliers

#myButton {背景色: #3498db;色: 白;パディング: 10px 20px;境界線: なし。境界半径: 5px;カーソル: ポインタ;トランジション: 背景色 0.3 秒の容易さ。 #myButton:hover {背景色: #2980b9; }

この CSS コードでは、青色の背景色、白色のテキスト、およびパディングを使用してボタンのスタイルを設定しています。また、境界線の半径を追加して角を丸くしました。の遷移プロパティは、ボタンの背景色が変化したときに滑らかなアニメーションを追加します。の:ホバーpseudo-class は、ユーザーがボタンの上にマウスを置くと背景色を変更します。

ステップ 3: JavaScript を追加してクリック時に色を変更する

最後に、クリック時にボタンの色を変更する JavaScript コードを追加しましょう。テキストエディタで新しいファイルを作成し、名前を付けて保存します。スクリプト.jsHTML および CSS ファイルと同じディレクトリにあります。コードは次のとおりです。

const button = document.getElementById('myButton'); button.addEventListener('click', function () { button.style.backgroundColor = '#e74c3c'; });

この JavaScript コードでは、まずボタンを使用してボタンを選択します。IDそれを変数に保存しますボタン。次に、ボタンにイベントリスナーを追加して、クリックイベント。ボタンをクリックすると、イベントリスナー内の関数が実行され、ボタンの背景色が赤に変わります。

コードをテストする

HTML、CSS、および JavaScript コードを作成したので、今度はそれをテストします。 Web ブラウザで HTML ファイルを開きます。「Click Me」というテキストが表示された青いボタンが表示されます。ボタンの上にマウスを置くと、ボタンの色が濃い青に変わります。ボタンをクリックすると赤くなります。