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

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

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

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

CSS

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

Q&A

解決済

1回答

5191閲覧

aタグが一部反映されない

shibaco

総合スコア18

HTML

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

CSS

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

0グッド

1クリップ

投稿2018/12/16 01:13

aタグが一部反応しない現象

<nav><ul><li>内の<a>タグが一番始めのだけ反応しません。 いろいろ調べましたが、どうやらheader内で使用したjQueryが問題を起こしているようです。

*<header>直後の<div #demo-1>を削除するとうまく反応します。

発生している問題・エラーメッセージ

<nav><ul><li>内の<a>CONCPT</a>が右半分しか反応してくれない。

該当のソースコード

HTML

1<header> 2<div id="demo-1" data-zs-src='["img/main.png", "img/main-2.jpg", "img/main-3.jpg"]' data-zs-speed="8000" data-zs-switchSpeed="800" data-zs-interval="4500" data-zs-overlay="dots"> 3 4 <div id="g-nav"> 5 <div class="nav-logo"><p>LOGO</p></div> 6 <nav> 7 <ul> 8 <li><a href="#">CONCEPT</a></li> 9 <li><a href="#">MENU</a></li> 10 <li><a href="#">ACCESS</a></li> 11 </ul> 12 </nav> 13 <img src="img/nav-tel.png" alt="" class="tel"> 14 </div> 15 16 17 <div class="main-logo"> 18 <img src="img/logo.png" alt=""> 19 </div> 20 21</div> 22 23 24 25</header>

CSS

1body{ 2 color: #fff; 3} 4 5header{ 6 width:100%; 7 height: 100vh; 8 position: relative; 9} 10 11/*main 切り替え*/ 12#demo-1{ 13 overflow: hidden; 14 width: 100%; 15 height: 100vh; 16 background-color: #999; 17} 18/*main 切り替え終了*/ 19 20#g-nav{ 21 position: relative; 22 z-index: 1; 23} 24 25.nav-logo{ 26 font-size:50px; 27 margin-left:48px; 28 width:200px; 29 background-color:#C33E40; 30 position:absolute; 31 left:51px; 32 top:10px; 33 } 34 35nav{ 36 height: 70px; 37 display: flex; 38 justify-content:space-between; 39 position:absolute; 40 right:200px; 41 top:36px; 42 padding-left: 20px; 43} 44 45 46nav ul{ 47 width:430px; 48 display:flex; 49} 50 51nav ul li{ 52 font-size: 23px; 53 margin-right: 40px; 54} 55 56nav ul li a{ 57 color: #fff; 58 text-decoration: none; 59} 60 61

jQuery

1window.addEventListener('load', function () { 2 sliderStart(); 3}); 4 5function sliderStart() { 6 7 const slide = document.getElementById('slide_wrapp'); //スライダー親 8 const slideItem = slide.querySelectorAll('.slide_item'); //スライド要素 9 const totalNum = slideItem.length - 1; //スライドの枚数を取得 10 const FadeTime = 2000; //フェードインの時間 11 const IntarvalTime = 5000; //クロスフェードさせるまでの間隔 12 let actNum = 0; //現在アクティブな番号 13 let nowSlide; //現在表示中のスライド 14 let NextSlide; //次に表示するスライド 15 16 // スライドの1枚目をフェードイン 17 slideItem[0].classList.add('show_', 'zoom_'); 18 19 // 処理を繰り返す 20 setInterval(() => { 21 if (actNum < totalNum) { 22 23 let nowSlide = slideItem[actNum]; 24 let NextSlide = slideItem[++actNum]; 25 26 //.show_削除でフェードアウト 27 nowSlide.classList.remove('show_'); 28 // と同時に、次のスライドがズームしながらフェードインする 29 NextSlide.classList.add('show_', 'zoom_'); 30 //フェードアウト完了後、.zoom_削除 31 setTimeout(() => { 32 nowSlide.classList.remove('zoom_'); 33 }, FadeTime); 34 35 } else { 36 37 let nowSlide = slideItem[actNum]; 38 let NextSlide = slideItem[actNum = 0]; 39 40 //.show_削除でフェードアウト 41 nowSlide.classList.remove('show_'); 42 // と同時に、次のスライドがズームしながらフェードインする 43 NextSlide.classList.add('show_', 'zoom_'); 44 //フェードアウト完了後、.zoom_削除 45 setTimeout(() => { 46 nowSlide.classList.remove('zoom_'); 47 }, FadeTime); 48 49 }; 50 }, IntarvalTime); 51 52}

試したこと

<nav>はheaderに対してposition:relative; を使用しており、right値を下げると反応する幅は広がることから 何かしらが原因で<nav>内の反応エリアが限られてしまっているようですが原因がわかりません。

補足情報(FW/ツールのバージョンなど)

コーディング歴も勉強中の身でteratail初の投稿になります。
投稿内容に不備・失礼などありましたらご指摘いただけると幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2018/12/16 01:23

「CONCEPT」の最初の「C」で反応していますよ。
x_x

2018/12/19 09:33

Chromeは使っているでしょうか? 反応しないということろで右クリックして「検証」を選ぶと何が選ばれますか?
guest

回答1

0

自己解決

回答いただいたにもかかわらず、お返事できてなく申し訳ございません。
あれから自分で再度1からコーディング検証してみたところ、
メインに配置したロゴのMagrinが大きく、メニュー部分と重なっていたことがわかりました。
失礼いたしました。

回答いただきありがとうございました。

投稿2019/02/03 02:04

shibaco

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問