問題
11label要素を使ってクリックイベントを作ろう
実はCSSでも、inputタグとアニメーションをうまく使う事で JavaScriptのようにクリックをした際に動きを持たせることができます。 その方法について、実践的に学んでいきましょう!
HTML/CSSの問題に挑戦しよう！
問題
「label要素を使ってクリックイベントを作ろう」
クリックイベントのようにしてCSSのみで画像を大きくしてみよう!
見本動画を参考にして実装してください。
あらかじめエディタに書くコード
<input type="checkbox" id="image" name="head">
<label for="image">クリックしてください</label>
<div class="img-area">
<img src="https://ninjacode.work/assets/img/kv.png">
</div>
¥HTML¥
.img-area {
background-color: #000;
display: inline-block;
}
.img-area img {
width: 80%;
display: block;
margin: auto;
}
¥CSS¥
期待する画面
解答と解説（label要素を使ってクリックイベントを作ろう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
まず、jsのクリックイベントのようなものはinputタグの
チェックボックスにて行います。
:checkedがついたらアニメーションをつけながら
width: 80% → 100%に幅を大きくしましょう。
また、inputとlabelタグはセットで使うことで
inputタグをdisplay: none;してもcheckedが付く状態にできますので
覚えて置きましょう。
補足
inputタグをCSSで指定する際は、角括弧を使用してtype属性まで記述しなければいけません。inputだけでは動作しませんので、気を付けましょう!
クリックされたときのスタイルの指定方法はこのように記述しました。
input[type="checkbox"]:checked ~ .img-area img
「~」でセレクタを指定すると同階層の後ろに並ぶ要素を指定することができます。
つまり今回で言うと、checkboxがチェックされている時のimg-area要素内のimgということになります。
