MENU

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

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

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

具体的に言うと:
カード(親)にカーソルを当てたときに次の2点が同時にできるようにしたい
①画像(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;
}

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

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

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

この記事が気に入ったら
フォローしてね!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる