問題

11
HTML_CSS

label要素を使ってクリックイベントを作ろう

実は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¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用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ということになります。

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET