【HTML&CSS】課題サイト④カード全体をクリックできる

今回のテーマは、『カード全体をクリックできるようにする』コードの書き方です。PC表示でカードにカーソルを当てたとき、以下の動画のような表示になるようにします。

具体的に言うと：
カード（親）にカーソルを当てたときに次の２点が同時にできるようにしたい
①画像（card_img）を透過する
②リンクボタンの色を変える

それではカードのHTML＆CSSを見ていきます。★が今回のポイントです。

【HTML】（下の画像のイメージ）
<div class=”works_card”>
　<a class=”card_link” href=””>　←★divタグの中をaタグで囲んでしまう
　　<p><img class=”card_img” src=”画像”></p>　
　　<p class=”card_text”>説明文が入ります。説明文が入ります。説明文が入ります。</p>
　　<p class=”card_btn”>詳細を見る</p>
　</a>
</div>

【CSS】
.works_card {
　overflow: hidden;　←画像・テキストを丸みのある枠に合わせる
　flex-basis: 32%;
　margin-bottom: 60px;
　padding-bottom: 16px;
　transition: .2s;
　text-align: center;
　border: 1px solid #ccc;
　border-radius: 20px;
}
.works_card:hover {
　opacity: .8;　←ホバーしたときに画像を透過する
}
.works_card:hover .card_image {　←★カードと画像のホバーを連動させる
　box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}
.works_card:hover .card_button {　←★カードとボタンのホバーを連動させる
　color: #fff;
　background: #333;
}
.card_link {
　text-decoration: none;　←aタグの調整をする
　color: inherit;
}

１回目に自分でコーディングをやってみたときは、画像とボタンの動きがバラバラで、どうしたもんか…？と悩んでいたのですが、「aタグで囲んでしまう」のは目から鱗でした。

ユーザーの立場で考えたとき、こういうカードは全体がどこでもクリックできてリンク先に飛べたほうが使いやすいですね。実際のサイトもこのような仕様が多いと思うので、しっかり覚えておきたいと思います。

今回は短いですが、ここまで。
お読みいただきありがとうございました◎