HTML_CSS
Googleでログイン問題11：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¥
期待する画面
解答ソースコード
<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;
transition: 1s;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ .img-area img {
width: 100%;
}
¥CSS¥
補足
inputタグをCSSで指定する際は、角括弧を使用してtype属性まで記述しなければいけません。inputだけでは動作しませんので、気を付けましょう!
クリックされたときのスタイルの指定方法はこのように記述しました。
input[type="checkbox"]:checked ~ .img-area img
「~」でセレクタを指定すると同階層の後ろに並ぶ要素を指定することができます。
つまり今回で言うと、checkboxがチェックされている時のimg-area要素内のimgということになります。
クリックされたときのスタイルの指定方法はこのように記述しました。
input[type="checkbox"]:checked ~ .img-area img
「~」でセレクタを指定すると同階層の後ろに並ぶ要素を指定することができます。
つまり今回で言うと、checkboxがチェックされている時のimg-area要素内のimgということになります。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
チェックボックスにて行います。
:checkedがついたらアニメーションをつけながら
width: 80% → 100%に幅を大きくしましょう。
また、inputとlabelタグはセットで使うことで
inputタグをdisplay: none;してもcheckedが付く状態にできますので
覚えて置きましょう。