- ベストアンサー
ヘッダーのa要素が消える問題の解決方法
- ヘッダーのa要素が消える問題について、HTMLとCSS、およびJavaScriptコードを確認しました。a要素のコメントが消えている原因を特定し、修正方法を探ります。
- ヘッダー内のメニューアイテムであるa要素が表示されない問題を解決するために、HTMLコードおよび関連するCSSとJavaScriptの設定を詳しく調査しました。
- ヘッダーのa要素がうまく表示されない問題に対処するため、特定のCSS設定やJavaScriptの影響を確認し、修正案を提案します。
- JackTheRipper99
- お礼率88% (648/730)
- CSS
- 回答数9
- ありがとう数8
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
>中々レイアウトの配置とclass属性の振り分けが細かくて難しいですね。 >出来たみたいです。 実際は、「わかんね～」って言ってる時間が一番楽しいので（ｗ） 気楽が一番ですよ。 （ちなみ、こちら単なる酔っ払いのおっさんです～） でも、ヘッダー直後のパーツにDIVなどの 囲いを入れることを強くお勧めしますよ！。 今回の問題点はそこなので！ 治し方は複数あるが、そうではなく、 問題点がそもそも起きない方法を取るべきだったのではないか？ そっちの方が大事ですね～ ひとまず、動いたみたいなので！ よかったよかった！
その他の回答 (8)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
注釈付き、実際の表示結果
- AsarKingChang
- ベストアンサー率46% (3467/7474)
/* CSS 追加*/ header li{ width: auto; ←これを追加でOK opacity: 1; visibility: visible; } header a{ display: block; /* 縦に並べる*/ list-style-type: none; padding: 0.5em; background: #ccc; ------------------------------------ なのですが、全体にheaderという「タグ」が 1回しか使われてないのに、class=headerがあり、 .header li { font-size: 15px; list-style-type: none; } .header a { color: #000; padding: 20px; } これと、上のheader liは同じ場所を指しています。 これは、header.header li {}を省略して書いただけの為。 なので、まとめちゃってもいいかと思います。 それと、 .header ul { display: flex; justify-content: center; } ～～～～～～～～～～～ ul{ display: flex; flex-wrap: wrap; } こういう場合、どちらもulを指しているが、上の方がCSS点数が高いので、逆に書いた方がいいです。 ul {}を先に書いてから、.header ul {}を後にする。 それと、今回みたいに1回しか使ってないのなら、 classでもidでもいいし、1回しかないならそもそも headerに対して設定でも構わない！ ただ、見やすさから考えると header#head {} などにして、 タグを <header id="head"> ←タグと同じ名前は使わない事と、 1度しか使わない物は、classではなくidで書くことで、 「それが1回しか使われてないよ！」という事を 教える効果もある。 この場合のCSS階層は、 <header id="head"> <ul> header#head ul {} で、他のulには一切影響を与えないというメリットが得られます。 今回の問題点は、無関係な同一名のタグが 同時に設定されていて、それを再上書きで対処しようとしてるために、 無駄にソースが長くなって、わかりにくなったことが原因ですので。 なので私なら、 <div> ←こいつを追加 <ul class="test-box"> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> 略 <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> </ul> </div> ←こいつを追加 で、このDIVをセレクタにしますね。。
お礼
回答ありがとうございます。 ひとまず出来たみたいです。 これを機にclass属性の使い方をもっと勉強しようと思います。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>メニューのテキストは表示されたのですが、なぜか縦並びになってしまいます。 原因わかりました。 li{ width: 50%; ←これ！ padding: 20px; 確かに、50％なら、横に2個並びそうだが、 運悪くパディングも20px。。当然100%の中に 50%+20pxが2個入るわけがない！ 結果、縦に並んでしまっている！ が原因。。 なんだけど。。。。。 治すのは簡単だが＾＾どうしようかな～ 質問者さんのレベ上げか、この件だけを直すかを 考え中～
お礼
回答ありがとうございます。 中々レベルが上がらないですが頑張りたいと思います。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>メニューのテキストは表示されたのですが、なぜか縦並びになってしまいます。 >アニメーションで表示される画像も縦並びで表示されているのですが、 >(その際に使っているdisplayタイプは,flexです。) こっちでやったときは、flexは解除されなかったので、 何かミスがありそう。 全ソース開示たのます～。
補足
回答ありがとうございます。 コードの補足です。 HTML:------------------------------------------------------------ <!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <head> <script src="code.jquery.com_jquery-3.7.0.min.js"></script> </head> <body> <header class="header"> <nav> <ul> <li><a href="/index.html" id="link_sample">ABOUT</a></li> <li><a href="#works" id="link_sample">WORKS</a></li> <li><a href="#gallery" id="link_sample">GALLERY</a></li> <li><a href="#service" id="link_sample">SERVICE</a></li> </ul> </nav> </header> <ul class="test-box"> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> <li class="js-scroll-animation"><img width="1600" height="900" src="sdfsafasfas.png" alt=""></li> </ul> <script>const animations = document.querySelectorAll('.js-scroll-animation'); function toggle() { animations.forEach((animation) => { //ウィンドウの高さを取得 const height = window.innerHeight; //スクロール量を取得 const scroll = window.scrollY; //要素の位置を取得 const target = scroll + animation.getBoundingClientRect().top; //スクロール位置を判定して要素にクラスを付与 if (scroll > target - height / 1.5) { animation.classList.add('is-active'); } }); } //ロード時に発火 window.addEventListener('load', toggle); //スクロール時に発火 window.addEventListener('scroll', toggle);</script> </body> </html> CSS: @charset"utf-8"; a.header { display: block; text-decoration: none; } .header { background-color: rgba(0,0,0,.1); margin: 0; } .header ul { display: flex; justify-content: center; } .header li { font-size: 15px; list-style-type: none; } .header li:not(:first-of-type) { margin-left: 1rem; } .header a { color: #000; padding: 20px; } ul{ display: flex; flex-wrap: wrap; } li{ width: 50%; padding: 20px; box-sizing: border-box; /* 透過・非表示 */ opacity: 0; visibility: hidden; /* 要素の位置指定・アニメーション */ translate: 0 20px; transition: 1s; } img{ width: 100%; height: auto; } /* クラス付与で表示する */ .is-active{ opacity: 1; visibility: visible; translate: 0 0; } ------------------------------------------------------------------- /* CSS 追加*/ header li{ opacity: 1; visibility: visible; } header a{ display: block; /* 縦に並べる*/ list-style-type: none; padding: 0.5em; background: #ccc; }
- AsarKingChang
- ベストアンサー率46% (3467/7474)
要するに！ li{ /* 透過・非表示 */ opacity: 0; visibility: hidden; } こうかくと、 body→header→nav→ul→li body→ul→li class="js-scroll-animation" どちらのliにも有効なんです。 2つ目の物は、言うなれば CSSで設定したもの「と」class="js-scroll-animation"が 2つ同時に設定されてしまうという具合 なので、CSSには点数があり、より高いものを優先するという ルールがあるので、点数上げをすればいいのですが、 ＃3番が指摘してる通り、 この2つの違いを見つけると、 headerまたはnavタグ内のliだということなので、 header li {} nav li {} のどちらかですが、フルで body header nav ul li {} でも構いません。 ただ、一番いいのは、 body直下になってしまっている、li class="js-scroll-animation" こいつを任意のタグで囲む方がお勧めですね。 body→div→ul→li class="js-scroll-animation" など。 こうしておけば、全く同じものを2個宣言したとき、 <div id=waa>～ <div id=gya>～ で分けることで、CSSは div#waa li {} div#gya li {} で、同じでも、独立したCSS空間に対して設定が可能になります。 今回の問題点は、 「ここからCSS：」の後に、 ul{} li{} これらが、「すべてのulタグとすべてのliタグに対して」 設定してしまっていることで、 結果 <header class="header">→<nav>この中のliも同じ設定を持った！ ＝つまり完全透明+非表示 これが原因。 なので可能な限り、 全タグに対してのCSS設定は慎重にすることと、 各パートはdivなどでセクション化（sectionってタグもあるが） しておき、それを軸に設定しておくこと！ この2点を注意すればOKですよ～。
- retorofan
- ベストアンサー率34% (435/1276)
＞ヘッダーに書いてあるテキストのコメントが消えてしまいます。 原因は、そうなるようなＣＳＳを記述しているからです。 次のＣＳＳコードを下部に追記してみてください。 <style> /* CSS 追加 */ header li { opacity: 1; visibility: visible; } </style>
お礼
回答ありがとうございます。 メニューのテキストは表示されたのですが、なぜか縦並びになってしまいます。 アニメーションで表示される画像も縦並びで表示されているのですが、 (その際に使っているdisplayタイプは, flexです。)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
おまけ <li><a href="/index.html" id="link_sample">ABOUT</a</li> アンカーの閉じタグが抜けてるので、一応注意を！ なので、 li か li -> a に対して、クラスオーバーライドすれば治りますよ。 （もう、最初の投稿で、あ～って気分なのはわかってますが）
お礼
回答ありがとうございます。 すみませんが、オーバーライドがまだよく解らず思考錯誤したり 色々ぐぐってみたのですが、よく解りませんでした。 ドットインストールでもそのような章はなく、まだそこまでのレベルではないようです；
- AsarKingChang
- ベストアンサー率46% (3467/7474)
実際に試しました。 原因は、 li{ /* 透過・非表示 */ opacity: 0; visibility: hidden; } ここでしょうね。 どこからもオーバーライドされてない様子で、 デフォルトの、完全透明+非表示のまま表示まで行ったようです。 ってのが原因です。 次にそれがなぜ起こったか？ animation.classList.add('is-active'); これです。 初期値は const animations = document.querySelectorAll('.js-scroll-animation'); ですので、元々、classのjs-scroll-animationには、 A（アンカータグ）は存在してないので、 <header class="header"> の方のアンカーには影響がない＝つまり完全透明+非表示 を維持していた！ってのが、原因です。 OKでしょうか？
お礼
回答ありがとうございます。 中々レイアウトの配置とclass属性の振り分けが細かくて難しいですね。 出来たみたいです。