要素内にあるアンカー<a>タグをクリックして別HTMLページに飛ぶようにしたいがクリックすら出来ない。

前提・実現したいこと

下記、work-font要素内にあるアンカー<a>タグをクリックして別HTMLページに飛ぶようにしたいがクリックすら出来ない。

<div class="work-font font-title"> - List of works - <a href="#" class="works-link"><i class="work-arrow fas fa-chevron-right"></i></a> </div>

どなたかご教示頂けませんでしょうか。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
6    <link
7      href="https://fonts.googleapis.com/css?family=Caveat"
8      rel="stylesheet"
9    />
10    <link
11      href="https://use.fontawesome.com/releases/v5.10.2/css/all.css"
12      rel="stylesheet"
13    />
14    <link
15      href="https://fonts.googleapis.com/css?family=Homemade+Apple"
16      rel="stylesheet"
17    />
18    <link
19      href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700"
20      rel="stylesheet"
21    />
22    <link rel="stylesheet" href="css/portfolio.css" />
23    <link rel="stylesheet" href="css/slick.css" />
24    <link rel="stylesheet" href="css/slick-theme.css" />
25    <title>TOMOYA TANI PORTFOLIO</title>
26  </head>
27  <body>
28    <h2 class="works-title fade-in-bottom flex font-title animate" id="works">WORKS</h2>
29    <div class="works-inner flex">
30      <div class="works-inner-items flex">
31        <div class="slider flex">
32          <div><img src="./img/Namba.jpg" alt="Namba" /></div>
33          <div><img src="./img/Shibuya.jpg" alt="Shibuya" /></div>
34          <div><img src="./img/Yokohama.jpg" alt="Yokohama" /></div>
35          <div><img src="./img/Kyoto.jpg" alt="Kyoto" /></div>
36          <div><img src="./img/Fukuoka.jpg" alt="Fukuoka" /></div>
37        </div>
38        <div class="work-font font-title">
39          - List of works - <a href="#" class="works-link"><i class="work-arrow fas fa-chevron-right"></i></a>
40        </div>
41      </div>
42    </div>
43    <script src="https://unpkg.com/scrollreveal"></script>
44    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
45    <script src="js/slick.min.js"></script>
46    <script src="js/portfolio.js"></script>
47  </body>
48  <footer>
49  </footer>
50</html>
51

CSS
1/* <====== 全体共通 ======> */
2
3* {
4  margin: 0;
5  padding: 0;
6  box-sizing: border-box;
7}
8
9html {
10  scroll-behavior: smooth;
11  font-size: 16px;
12}
13
14p {
15  line-height: 2rem;
16  font-size: 0.875rem;
17}
18
19ul li {
20  list-style: none;
21  padding: 0.5rem;
22}
23
24a {
25  text-decoration: none;
26  color: #fff;
27}
28
29h2 {
30  font-size: 2rem;
31}
32
33.flex {
34  display: flex;
35  justify-content: center;
36  align-items: center;
37}
38
39.font-title {
40  font-family: "Caveat", cursive;
41}
42
43
44/* <====== works ======> */
45h2#works {
46  padding-top: 12rem;
47  margin-top: -8rem;
48}
49
50.works-inner {
51  width: 100%;
52  height: 45rem;
53  -webkit-box-orient: vertical;
54  -webkit-box-direction: normal;
55      -ms-flex-direction: column;
56          flex-direction: column;
57}
58
59.works-inner .works-inner-items {
60  width: 90%;
61  height: 40rem;
62  margin-top: 8rem;
63  position: relative;
64  z-index: -1;
65  -webkit-box-orient: vertical;
66  -webkit-box-direction: normal;
67      -ms-flex-direction: column;
68          flex-direction: column;
69}
70
71.works-inner .works-inner-items::after {
72  width: 100%;
73  height: 40rem;
74  content: "";
75  position: absolute;
76  left: 0rem;
77  top: 1rem;
78  -webkit-transform: skewY(-5deg);
79          transform: skewY(-5deg);
80  -webkit-transform-origin: bottom left;
81          transform-origin: bottom left;
82  z-index: -1;
83  background: black;
84}
85
86.works-inner .works-inner-items .work-font {
87  font-size: 1.5rem;
88  color: white;
89}
90
91.works-inner .works-inner-items .work-font a {
92  position: relative;
93  z-index: 10000;
94}
95
96.works-inner .works-inner-items .work-font .work-arrow {
97  color: white;
98  padding: 1rem;
99}
100
101.work-hover:hover {
102  cursor: pointer;
103}
104
105}

試したこと

1.work-inner要素以外の場所で試してみるとクリックすることが出来る。ポインターも正常に出ます。
2.背景に平行四辺形のBOXを作っているのでそれが被さってると考えた為（position:absoluteの指示とz-index:-1の指示がある為）
position:relativeを記述してみましたが変化なし。

m.ts10806

2021/02/04 11:44

SCSS由来の問題でないのでしたら、コンパイル後のCSSを提示されたほうが良いかと。あと今どういう画面表示になっていますか？当該箇所はhrefに#しか指定されてないので、クリックできたとしてもどこにも遷移しないはずですが。

TMTN

2021/02/04 12:00

大変申し訳ございません。コンパイル後のCSSに変更しました。画面としては平行四辺形のBOXを背景として、Slickを使用して写真をスライドショーとして、その下に - List of works - と書いて、アイコンで「＞」のような画像を右に配置させてます。その「＞」を押すと指定した特定ページに飛ぶようにしたいです。「＃」はあえてそうしてます。飛ぶ指定方法は分かるのですが、そもそもその「＞」にカーソルを合わせても何も変化ない状態です。

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

回答2件

何故マイナスなのかは分かりませんが

css
1.works-inner .works-inner-items {
2  z-index: 0;
3}

投稿2021/02/04 13:01

yuki84web

総合スコア1857

ベストアンサー

下記のz-index: -1;を削除すればクリックできるようになると思います。

css
1.works-inner .works-inner-items {
2  width: 90%;
3  height: 40rem;
4  margin-top: 8rem;
5  position: relative;
6/*  z-index: -1;  削除 */
7  -webkit-box-orient: vertical;
8  -webkit-box-direction: normal;
9      -ms-flex-direction: column;
10          flex-direction: column;
11}

z-index: -1;を設定すると .works-inner-items要素は .works-inner要素の背面に隠れます。.works-inner-items要素の子孫要素も一体として背面に隠れてしまうので、クリックできなくなります。
今回は、ここにz-index: -1;を設定する必要性はないと思います。

投稿2021/02/04 12:50