前提
フッター上部の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のコードに原因があるのではないかと思います。
考えられることとしてはmarginやtransformで調整した要素がリンクの位置とかぶってクリックできない状態になってるのではないでしょうか
違ってたらすみません
ご回答ありがとうございます。
CSSのheader内に「 overflow:hidden;」を追記して「height」を600pxにしたところ、SNSのロゴ部分はリンクタグが効いたのですが,height600px内に被る「more」のボタンにリンクタグを設定してみるとリンクタグが効かなくなってしまうことから、ハンバーガーメニューを展開した際に表示される領域と被る領域に関してはリンクタグが効かなくなってしまうようです。
ハンバーガーメニューを画面全体に表示させる設定でリンクタグが効くようにするには、どうコーディングすればよろしいでしょうか?
ご教授頂けますと幸いです。

回答1件
あなたの回答
tips
プレビュー