質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

hideto1106
hideto1106

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

240閲覧

投稿2022/08/15 05:01

前提

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

実現したいこと

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

該当のソースコード

HTML

<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- CSSの読み込み --> <link rel="stylesheet" href="test.css"> <!-- ビューポートの設定 --> <meta name="viewport" content="width=device-width,initial-scale=1"> <title> Document </title> </head> <body> <!-- ヘッダー開始 --> <header> <!-- ハンバーガーメニュー開始 --> <input id="test" type="checkbox" /> <label for="test"> <svg class="burger" width="100" height="80" viewbox="0 0 150 150"> <g stroke-width="12"> <line x1="6" y1="6" x2="80" y2="6"></line> <line x1="6" y1="28" x2="80" y2="28"></line> <line x1="6" y1="50" x2="80" y2="50"> </line> </g> </svg> <svg class="close" width="100" height="80" viewbox="0 0 150 150"> <g stroke-width="12"> <line x1="42" y1="6" x2="42" y2="80"></line> <line x1="6" y1="42" x2="80" y2="42"></line> </g> </svg> </label> <div class="menu"> <div>Home</div> <div>About</div> <div>infomation</div> <div>Online STORE</div> </div> <!-- ハンバーガーメニュー終了 --> <h1> GLASSES COLLECTION </h1> </header> <!-- ヘッダー終了 --> <!-- メインとサイドバーを囲むラッパー開始 --> <div class="wrapper"> <!-- スライドショー開始 --> <div class="class1"> <img src="images/main_picture.jpg"> </div> <!-- スライドショー終了 --> <!-- About開始 --> <h2> <section id="About"> <p class="btn_About_more">more</p> </section> </h2> <!-- About終了 --> <!-- SNS開始 --> <ul class="SNS_logo"> <li><a href="https://www.instagram.com/"><img class="Instagram_logo" src="images/Instagram_logo.png"></a></li> <li><a href="https://twitter.com/?lang=ja"><img class="Twitter_logo" src="images/Twitter_logo.png"></a></li> <li><a href="https://ja-jp.facebook.com/"><img class="Facebook_logo" src="images/Facebook_logo.png"></a></li> </ul> <!-- SNS終了 --> <!-- フッター開始 --> <footer> <div class="finish">@ 2022 hideto1106</div> </footer> <!-- フッター終了 --> </body> </html> </html>

CSS

header { position: fixed; width: 100%; height: 100px; margin-left: auto; margin-right: auto; top:0; } h1 { text-align: center; font-size: 3vw; } h2 { font-size: 18px; } .class1 { padding-top: 130px; margin: 0 auto; } .class1 img { width: 100%; height: 100%; } /* SNS開始 */ ul { margin-left: auto; margin-right: auto; width: 300px; } .SNS_logo { display: flex; margin-top: 50px; padding : 0; justify-content: space-around; list-style-type: none } .SNS_logo li { padding: 10px 10px; } .Instagram_logo { width: 30px; height: 30px; } .Twitter_logo { width: 30px; height: 30px; } .Facebook_logo { width: 30px; height: 30px; } /* SNS終了 */ .finish { width: 100%; text-align: center; margin: 0 auto; height: 30px; } /* ハンバーガー開始 */ label { position: fixed; z-index: 1; } input { display: none; } input:checked ~ label { right: 0; } .burger { position: fixed; padding-top: 42px; cursor: pointer; } .burger g { stroke: #333333; transition: stroke 0.25s ease-in-out; } .burger g:hover { stroke: darken(#333333, 20%); } input:checked ~ label .burger { opacity: 0; } .close { position: fixede; padding-top: 42px; cursor: pointer; opacity: 0; } ose g:hover { stroke: darken(#333333, 20%); } .close g { stroke: #333333; transition: stroke 0.25s ease-in-out; transform: rotateZ(45deg); transform-origin: 50%; } .close line { transform-origin: 0%; } input:checked ~ label .close { opacity: 1; } .menu { display: flex; flex-direction: column; align-items: center; justify-content: space-around; position: absolute; opacity: 0; width: 100vw; height: 100vh; background-color: #ffd700; transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); color: #ffffff; text-transform: uppercase; font-size: 20px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } input:checked ~ .menu { opacity: 1; } .menu div { margin-top: 50px; transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } input:checked ~ .menu div { margin-top: 0px; } /* ハンバーガー終了 */ .btn_About_more { display: block; border: 1px solid #000; font-weight: bold; text-align: center; height: 30px; line-height: 30px; margin-left: auto; margin-right: auto; margin-top: 50px; width: 125px; }

試したこと

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

vbnbfe

2022/08/15 05:09 編集

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

2022/08/15 06:04

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。