【徹底解説】CSSでonclick効果を実現する方法！JavaScriptとの連携も紹介

CSSでonclick効果を実現する方法

方法

1. HTML

要素に onclick 属性を追加し、JavaScript関数を呼び出す。

<button onclick="myFunction()">ボタン</button>

1. JavaScript

myFunction 関数を作成し、クリック時に実行したい処理を記述する。

function myFunction() {
  // 要素の色を変える
  document.getElementById("button").style.color = "red";
}

1. CSS

必要に応じて、要素の初期状態をスタイルシートで設定する。

button {
  color: blue;
}

例

ボタンをクリックすると、ボタンの色が赤に変わる例。

<button onclick="myFunction()">ボタン</button>

function myFunction() {
  document.getElementById("button").style.color = "red";
}

button {
  color: blue;
}

その他のonclick効果

• 要素の表示/非表示を切り替える
• 要素の位置を変える
• アニメーションを再生する
• 音声を再生する

注意事項

• onclick属性は、ユーザー補助技術で認識されないため、アクセシビリティを考慮する場合は、他の方法も検討する必要があります。
• JavaScriptのセキュリティ対策を怠ると、クロスサイトスクリプティングなどの脆弱性が発生する可能性があります。

<button onclick="myFunction()">ボタン</button>

function myFunction() {
  document.getElementById("button").style.color = "red";
}

button {
  color: blue;
}

動作

1. ユーザーがボタンをクリックします。
2. myFunction 関数が呼び出されます。
3. ボタンの color プロパティが "red" に設定されます。
4. ボタンの色が赤に変わります。

応用

このコードを応用することで、さまざまなonclick効果を実現することができます。

• ボタンをクリックすると、要素の表示/非表示を切り替える
• ボタンをクリックすると、アニメーションを再生する

onclick効果を実現する他の方法

• addEventListener() メソッドを使う
• onclick イベントハンドラを使う

• :hover 疑似クラスを使う
• @keyframes ルールを使う

<button id="button">ボタン</button>

<script>
document.getElementById("button").addEventListener("click", function() {
  this.style.color = "red";
});
</script>

<button id="button">ボタン</button>

<style>
#button:hover {
  color: red;
}
</style>

• 上記の方法にはそれぞれメリットとデメリットがあります。
• 使用する方法は、実現したい効果や状況によって異なります。

各方法の詳細

• addEventListener() メソッドは、要素にイベントリスナーを追加するメソッドです。
• onclick イベントハンドラは、要素がクリックされたときに呼び出される関数です。

• :hover 疑似クラスは、要素にマウスカーソルが乗っているときに適用されるスタイルです。
• @keyframes ルールは、アニメーションの動きを定義するルールです。