aタグを使わずに、画像にリンクを付与する方法

html
1<main>
2<div class = "works1">
3  <a href = "練習.html"><img src = "work_portfolio1.png"/></a>
4  <img src = "base.jpg" alt="picure"/>
5</div>
6</main>

css
1main img{
2  width:40%;
3  margin:1%;
4}
5main div.works1{
6  width:80%;
7  margin:auto;
8  display:flex;
9  flex-wrap:wrap;
10  justify-content:center;
11  align-items: center;
12}

上記のように、works1というclassの中をflexにして横並びにしたいのですが、一枚目のimgにaタグを用いてリンクを付与すると干渉してしまうのか、works1が横並びにレイアウトできません。

解決法をご教授ください。

kei344

2020/06/18 13:59

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

yshk0402

2020/06/18 14:04

忘れてました、ご指摘ありがとうございます

行動規範の内容に同意します

回答1件

ベストアンサー

セレクタが正しく想定のものにあたってないからでしょう。
main img だと main のすべての子孫img要素にあたってしまいます。

また、width: 40%; は親要素を100%基準にして幅が決まります。

上記を考慮して、下記でどうでしょうか。

css
1.works1 > a, .works1 > img{
2  width: 40%;
3  margin: 1%;
4 line-height: 0; /* これがないと高さがずれる */
5}
6
7.works1 > a > img {
8  width: 100%;
9}
10main div.works1{
11  width:80%;
12  margin:auto;
13  display:flex;
14  flex-wrap:wrap;
15  justify-content:center;
16  align-items: center;
17}