CSS で Onclick イベントをシミュレートする

1. CSS でチェックボックスハックを使用して Onclick イベントをシミュレートする
2. CSS で:target 疑似クラスを使用して Onclick イベントをシミュレートする
3. CSS で:focus 疑似クラスと tabindex 属性を使用して Onclick イベントをシミュレートする

この記事では、CSS で onclick イベントをシミュレートする方法を紹介します。

CSS でチェックボックスハックを使用して Onclick イベントをシミュレートする

CSS で正確な JavaScriptonclick イベントを実現することはできません。ただし、CSS トリックを使用して onclick イベントをシミュレートできます。このトリックの背後にある中心的な概念は、チェックボックスとラベルタグの使用です。チェックボックスの id 属性と label の for 属性に同じ値を使用してそれらをアタッチできます。ラベルをクリックすると、チェックボックスがオンまたはオフになります。したがって、:checked セレクターを使用して、チェックボックスがクリックされたときにチェックボックスを選択できます。隣接する兄弟セレクター+ を使用して、チェックボックスとともにラベル内の img タグを選択します。したがって、チェックボックスをオンにすると、画像を選択してそのサイズを変更できます。したがって、CSS を使用して onclick 機能を実現できます。

たとえば、<input> タグからチェックボックスを作成します。チェックボックスの id を btn として設定します。その下に、<label> タグを記述し、for 属性の値と同じ値 btn を記述します。ラベルタグ内に画像を挿入します。次に、CSS で、CSS セレクターを使用して ID btn を選択し、display を none に設定します。続いて、btn ID の:checked セレクターを #btn:checked として使用します。+ 演算子を使用して、label タグ内の img タグを選択します。選択後、高さと幅を 75px に設定します。

ここで、画像をクリックすると、画像のサイズが小さくなります。最初、画像は 100px サイズです。このように、CSS を使用して onclick 機能を実現しました。

サンプルコード：

<input type="checkbox" id="btn"/>
<label for="btn">
    <img src="/img/DelftStack/logo.png" />
</label>

#btn{
    display: none;
}
#btn:checked + label > img {
    width: 75px;
    height: 75px;
}

CSS で:target 疑似クラスを使用して Onclick イベントをシミュレートする

:target 疑似クラスを使用して、CSS のみを使用して onlick イベントをシミュレートできます。疑似クラスは、CSS でアクティブな要素のスタイルを設定するのに役立ちます。この方法の中心的な概念は、要素の display プロパティを変更することです。要素が非アクティブの場合、display を none に設定し、要素が:target 疑似クラスで選択されている場合は block に変更できます。id が URL のフラグメントと一致する要素を:target 疑似クラスでスタイル設定できます。

たとえば、URL#day を使用して anchor タグを記述します。テキストを書く What day is today? タグの内側。その下に、ID が day の div 要素を作成します。div 内に Sunday というテキストを書きます。CSS で、id セレクターを使用して id``day を選択し、display プロパティを none に設定します。次に、:target 疑似クラスで同じ id を選択し、display プロパティを block に設定します。

以下の例では、What day is today? というテキストをクリックすると、Sunday が表示されます。:target クラスを使用して、非表示の要素の表示を表示に変更しました。このようにして、CSS で onclick イベントをシミュレートできます。

サンプルコード：

<a href="#day">What day is today?</a>
<div id="day">Sunday</div>

#day {
    display: none;
}
#day:target {
    display: block;
}

CSS で:focus 疑似クラスと tabindex 属性を使用して Onclick イベントをシミュレートする

img タグの tabindex 属性と:focus 疑似クラスを使用して、CSS で onclick イベントをシミュレートできます。たとえば、ID が pic で tabindex の値が 0 の img タグを使用して画像を挿入します。CSS で、:focus 疑似クラスを使用して pic ID を選択します。次に、画像の高さと幅を 75px に変更します。画像の初期サイズは 100px でした。ここで、画像をクリックすると、画像のサイズが 75px に変わります。したがって、CSS のみを使用して onclick イベントを実現できます。

サンプルコード：

 <img id="pic" tabindex="0" src="/img/DelftStack/logo.png" />

#pic:focus{
    width: 75px;
    height: 75px
 }