”css"CSSのスライド画像にリンクがうまく反映されない

CSSのスライド画像にリンクをつけたい

ゴール：<img src="xxx.png" alt=""> のxxx.pngにリンクをつける
現状：スライドの画像は反映されるが、クリックを押せない状態（現状、a href=" "にはリンクを入れてる状態です）

参考質問：
https://teratail.com/questions/219254

他の方の同様質問もみましたが解決されず新規質問です。何卒、ご教示お願いいたします！

html


    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>テスト</h1>
          <h2>テスト</h2>
        </div>
      </div>
      <div class="image">
       <a href="https://xxxxxxxxxxxx" target="_blank" class="main_img"><img src="xxx.png" alt=""></a>
      </div>
    </div>

css

#slider{
  width:98%;
  height:420px;
  position:relative;
  overflow:hidden;
}
@keyframes load{
  from{left:-100%;}
  to{left:0;}
}
.slides{
  width:400%;
  height:100%;
  position:relative;
  -webkit-animation:slide 30s infinite;
  -moz-animation:slide 30s infinite;
  animation:slide 30s infinite;
}
.slider{
  width:25%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.slide img{
  width:100%;
  height:100%;
}

.image{
  width:100%;
  height:100%;
  display:block;
}
.image img{
  width:100%;
  height:100%;

}




/* Legend */
.legend{
  border:500px solid transparent;
  border-left:800px solid rgba(52, 73, 94, .7);
  border-bottom:0;
  position:absolute;
  bottom:0;
}

/* Contents */
.content{
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
}
.content-txt{
  width:400px;
  height:150px;
  float:left;
  position:relative;
  top:300px;
  -webkit-animation:content-s 7.5s infinite;
  -moz-animation:content-s 7.5s infinite;
  animation:content-s 7.5s infinite;
}
.content-txt h1{
  font-size:30px;
  color:#fff;
  text-align:left;
  margin-left:30px;
 
}
.content-txt h2{
  font-weight:normal;
  font-size:22px;
  color:#fff;
  text-align:left;
  margin-left:30px;
}



/* Animation */
@-webkit-keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}
@-moz-keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}
@keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}

@-webkit-keyframes content-s{
  0%{left:-420px;}
  10%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}
@-moz-keyframes content-s{
  0%{left:-420px;}
  10%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}
@keyframes content-s{
  0%{left:-420px;}
  10%{left:20px;}
  15%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}

@-webkit-keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}

@-moz-keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}

@keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}

試したこと

display:block;
を該当箇所にいれました。

補足情報

code pen を参考させていただいたものです。
https://codepen.io/vavik96/pen/dvpWKQ

m.ts10806

2021/04/29 07:57

> リンクがうまく反映されない > リンクをつけたいこれでは他者にはサッパリです。何をしたらどうなるのをゴールとして明記し、現状で何が起きるのが具体的に記載してください。なので >他の方の同様質問もみましたがこちらも「具体的に何をしたくて何が起きて何を解決したいのか」という前提がないまま「見た」だけ書かれても結局他者には伝わりません。どの質問を参考にし、それを元に何をしたのか具体的に記載してください。

hanamin

2021/04/29 08:12

ゴール：<img src="#" alt="">の#にリンクをつける現状：スライドの画像は反映されるが、クリックを押せない状態（a href="#"にはリンク入れてる）参考質問：

hanamin

2021/04/29 08:13

https://teratail.com/questions/219254

m.ts10806

2021/04/29 08:14

質問本文に追記してください。 # だけだと「リンク入れてる」と誰も認識しないので、仮のものでも良いので差し替えてください。

hanamin

2021/04/29 08:20

ありがとうございます。入れました。

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

回答1件

ベストアンサー

原因は「sliderがimageクラスを振った要素の上に乗ってるから」なんですけどね。

あんまりやりたくないけど、「上にのせてる要素（もしくは全体）を囲う」ようにしたらとりあえず押せるのは押せます。

html
1<a href="hogehoge" target="_blank" class="main_img">
2  <div class="slider">
3    <div class="legend"></div>
4    <div class="content">
5      <div class="content-txt">
6        <h1>テスト</h1>
7        <h2>テスト</h2>
8      </div>
9    </div>
10    <div class="image">
11      <img src="image.jpg" alt="">
12    </div>
13  </div>
14</a>

main_imgというクラスに特別な意味を持たせるのでないなら、aタグ廃して.sliderに対してクリックイベント振ってJavaScriptで画面遷移させたほうが良いように思います。

投稿2021/04/29 08:30

m.ts10806

総合スコア80861

hanamin

2021/04/29 09:47

ありがとうございます。お陰様でうまくいき、構造の理解もでき、質問の仕方も学びました。大変助かりました。

m.ts10806

2021/04/29 09:49

aの中にdiv（というかブロック要素）はHTML構文的にはNGなので、やはりJavaScriptにしたほうがいいですね。

kei344

2021/04/29 09:52

> aの中にdiv（というかブロック要素）はHTML構文的にはNG 要出典。記憶が出典元なら確認してください。【<a>: アンカー要素 - HTML: HyperText Markup Language | MDN】 https://developer.mozilla.org/ja/docs/Web/HTML/Element/a#properties

m.ts10806

2021/04/29 10:00

kei344さんありがとうございます。構文チェッカー（IDEとWeb上の）でした。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html <DIV> を 5行目の <A>〜</A> 内に書くことはできません。<DIV>〜</DIV> 内に <A> を書くことはできます。 http://openlab.ring.gr.jp/k16/htmllint/explain.html#excluded-element

kei344

2021/04/29 11:33

リンクで提示したとおり、HTML5では a要素は対話型コンテンツを除くフローコンテンツ (divも含む)を許容します。チェッカーをHTML5に対応したものに変えることをお勧めします。また、HTML5では「ブロック要素」「インライン要素」という区分がなくなっています。（教える上ではわかりやすい概念ではありますが）【ブロックレベル要素 - HTML: HyperText Markup Language | MDN】 https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements#block-level_vs._inline > ブロックレベル要素とインライン要素という区分は、 HTML 4.01 までの仕様書で使用されていました。 HTML5 ではこの二つの区分が、より複雑なコンテンツカテゴリの組み合わせに置き換えられました。

m.ts10806

2021/04/29 11:35

承知いたしました。でもまだ違和感ありますね。

kei344

2021/04/29 14:23

> でもまだ違和感ありますね。何についてでしょうか。仕様についてであればMDNかそこにリンクされている仕様を確認し、その挙動について違和感があれば慣れるか仕様の策定にかかわる以外方法はありません。

m.ts10806

2021/04/29 20:33

個人的な感覚なので「慣れるしかない」という点で承知しています。

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