リンクタグが反応しない問題の原因

前提

フッター上部のSNSロゴ3つにリンクタグを設定したのですが、クリックしようとした際にリンクタグが効いていない状態になっています。

実現したいこと

リンクタグを適応させるためにはどうしたらよろしいでしょうか？
ご教授頂ければ幸いです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <!-- CSSの読み込み -->
7    <link rel="stylesheet" href="test.css">
8    <!-- ビューポートの設定 -->
9	<meta name="viewport" content="width=device-width,initial-scale=1">
10    <title> Document </title>
11</head>
12
13<body>
14
15<!-- ヘッダー開始 -->
16<header>
17<!-- ハンバーガーメニュー開始 -->
18  <input id="test" type="checkbox" />
19  <label for="test">
20      <svg class="burger" width="100" height="80" viewbox="0 0 150 150">
21          <g stroke-width="12">   
22              <line x1="6" y1="6" x2="80" y2="6"></line>
23              <line x1="6" y1="28" x2="80" y2="28"></line>
24              <line x1="6" y1="50" x2="80" y2="50"> </line>
25          </g>
26      </svg>
27      <svg class="close" width="100" height="80" viewbox="0 0 150 150">
28          <g stroke-width="12">   
29              <line x1="42" y1="6" x2="42" y2="80"></line>
30              <line x1="6" y1="42" x2="80" y2="42"></line>
31          </g>
32      </svg>
33  </label>
34  <div class="menu">
35      <div>Home</div>
36      <div>About</div>
37      <div>infomation</div>
38      <div>Online STORE</div>
39  </div>
40  <!-- ハンバーガーメニュー終了 -->
41  <h1>
42    GLASSES COLLECTION
43  </h1>
44</header>
45<!-- ヘッダー終了 -->
46
47<!-- メインとサイドバーを囲むラッパー開始 -->
48<div class="wrapper">
49
50  <!-- スライドショー開始 -->
51  <div class="class1">
52    <img src="images/main_picture.jpg">
53  </div>
54  <!-- スライドショー終了 -->
55
56<!-- About開始 -->
57<h2>
58<section id="About">
59<p class="btn_About_more">more</p>
60</section>
61</h2>
62<!-- About終了 -->
63
64  <!-- SNS開始 -->
65<ul class="SNS_logo">
66  <li><a href="https://www.instagram.com/"><img class="Instagram_logo" src="images/Instagram_logo.png"></a></li>
67  <li><a href="https://twitter.com/?lang=ja"><img class="Twitter_logo" src="images/Twitter_logo.png"></a></li>
68  <li><a href="https://ja-jp.facebook.com/"><img class="Facebook_logo" src="images/Facebook_logo.png"></a></li>
69</ul>
70<!-- SNS終了 -->
71  <!-- フッター開始 -->
72  <footer>
73      <div class="finish">@ 2022 hideto1106</div>
74  </footer>
75  <!-- フッター終了 -->
76</body>
77</html>
78</html>
79

CSS
1header {
2  position: fixed;
3  width: 100%;
4  height: 100px;
5  margin-left: auto;
6  margin-right: auto;
7  top:0;
8}
9h1 {
10  text-align: center;
11  font-size: 3vw;
12}
13h2 {
14  font-size: 18px;
15}
16  .class1 {
17    padding-top: 130px;
18    margin: 0 auto;
19  }
20
21  .class1 img {
22    width: 100%;
23    height: 100%;
24  }
25
26/* SNS開始 */
27ul {
28  margin-left: auto;
29  margin-right: auto;
30  width: 300px;
31}
32  .SNS_logo {
33    display: flex;
34    margin-top: 50px;
35    padding : 0;
36    justify-content: space-around;
37    list-style-type: none
38  }
39  .SNS_logo li {
40    padding: 10px 10px;
41}
42.Instagram_logo {
43  width: 30px;
44  height: 30px;
45}
46.Twitter_logo {
47  width: 30px;
48  height: 30px;
49}
50.Facebook_logo {
51  width: 30px;
52  height: 30px;
53}
54/* SNS終了 */
55  .finish {
56    width: 100%;
57    text-align: center;
58    margin: 0 auto;
59    height: 30px;
60  }
61
62/* ハンバーガー開始 */
63label {
64    position: fixed;
65    z-index: 1;
66}
67input {
68    display: none;
69}
70input:checked ~ label {
71    right: 0;
72}
73.burger {
74    position: fixed;
75    padding-top: 42px;
76    cursor: pointer;
77}
78.burger g {
79    stroke: #333333;
80    transition: stroke 0.25s ease-in-out;  
81}
82.burger g:hover {
83    stroke: darken(#333333, 20%);
84}
85input:checked ~ label .burger {
86    opacity: 0;
87}
88
89.close {
90    position: fixede;
91    padding-top: 42px;
92    cursor: pointer;
93    opacity: 0;
94}
95ose g:hover {
96    stroke: darken(#333333, 20%);
97}
98.close g {
99    stroke: #333333;
100    transition: stroke 0.25s ease-in-out;    
101    transform: rotateZ(45deg);
102    transform-origin: 50%;
103}
104.close line {
105    transform-origin: 0%;
106}
107
108input:checked ~ label .close {
109    opacity: 1;
110}
111
112.menu {
113    display: flex;
114    flex-direction: column;
115    align-items: center;
116    justify-content: space-around;
117    position: absolute;
118    opacity: 0;
119    width: 100vw;
120    height: 100vh;
121    background-color: #ffd700;
122    transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
123    color: #ffffff;
124    text-transform: uppercase;
125    font-size: 20px;
126    font-weight: bold;
127    font-family: Arial, Helvetica, sans-serif;
128}
129input:checked ~ .menu {
130    opacity: 1;
131}
132.menu div {
133    margin-top: 50px;
134    transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
135}
136input:checked ~ .menu div {
137    margin-top: 0px;
138}
139/* ハンバーガー終了 */
140
141.btn_About_more {
142  display: block;
143    border: 1px solid #000;
144    font-weight: bold;
145    text-align: center;
146    height: 30px;
147    line-height: 30px;
148    margin-left: auto;
149    margin-right: auto;
150    margin-top: 50px;
151    width: 125px;
152}

試したこと

色々調べて原因がわからなかったので、ハンバーガーメニューを削除したうえでリンクタグを設定すると、問題なく適応したのでハンバーガーメニューのCSSのコードに原因があるのではないかと思います。

vbnbfe

2022/08/15 05:09 編集

考えられることとしてはmarginやtransformで調整した要素がリンクの位置とかぶってクリックできない状態になってるのではないでしょうか違ってたらすみません

hideto1106

2022/08/15 06:04

ご回答ありがとうございます。 CSSのheader内に「 overflow:hidden;」を追記して「height」を600pxにしたところ、SNSのロゴ部分はリンクタグが効いたのですが,height600px内に被る「more」のボタンにリンクタグを設定してみるとリンクタグが効かなくなってしまうことから、ハンバーガーメニューを展開した際に表示される領域と被る領域に関してはリンクタグが効かなくなってしまうようです。ハンバーガーメニューを画面全体に表示させる設定でリンクタグが効くようにするには、どうコーディングすればよろしいでしょうか？ご教授頂けますと幸いです。

回答1件

ベストアンサー

.menu に pointer-events: none; を設定するとポインターイベントの対象外になるので、背面のリンクをクリックできるようになります。
.menuを表示させたときは、背面のリンクはクリックできないようpointer-events: auto;を設定します。

pointer-events - CSS: カスケーディングスタイルシート | MDN

css
1.menu {
2    display: flex;
3    flex-direction: column;
4    align-items: center;
5    justify-content: space-around;
6    position: absolute;
7    opacity: 0;
8    width: 100vw;
9    height: 100vh;
10    background-color: #ffd700;
11    transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
12    color: #ffffff;
13    text-transform: uppercase;
14    font-size: 20px;
15    font-weight: bold;
16    font-family: Arial, Helvetica, sans-serif;
17    pointer-events: none; /* 追加 */
18}
19input:checked ~ .menu {
20    opacity: 1;
21    pointer-events: auto; /* 追加 */
22}