Q&A
ご提示のコードを試してみましたが、問題が再現しませんでした。
ご提示いただいていない部分に原因があるか、環境の問題かと思います。
HTML、CSSを勉強中です。
ナビゲーションのコードを書いた後にメインビジュアルのコードを追記したのですが、
レイアウトが崩れ、ナビもスタイルがあたらなくなりました。
発生している問題・エラーメッセージ
ナビのstyleがあたらなくなった。（リンクボタンが反応しない、プルダウンナビが表示されない）
左側の画像からはみ出ている文字のレイアウトが崩れている。
該当のソースコード
HTML
1 2<!doctype html> 3<html> 4<head> 5<meta charset="utf-8"> 6<title>無題ドキュメント</title> 7</head> 8 9<style> 10 .menu li { 11 position: relative; 12 float: right; 13} 14.menu li a { 15 display: block; 16 text-decoration: none; 17 color: #333; 18 width: 120px; 19 padding: 10px; 20} 21.menu li a:hover { 22 color: #fff; 23 background: #e8002a; 24} 25.menu li:hover > ul { 26 display: block; 27} 28.menu ul { 29 display: none; 30 position: absolute; 31 top: 40px; 32 width: 140px; 33} 34 35.kv { 36 height: 100vh; 37 position: relative; 38} 39.bg { 40 height: 100%; 41 background: url("../Downloads/PAK86_komorebitohizashi.jpg") no-repeat center/cover; 42} 43.text-block { 44 width: 100%; 45 position: absolute; 46 bottom: 100px; 47 left: 50%; 48 transform: translateX(-50%); 49} 50.text-black { 51 display: none; 52} 53.text { 54 font-size: 4.0rem; 55 font-weight: 600; 56 text-align: center; 57 letter-spacing: .02em; 58} 59.text-white .text { 60 color: #fff; 61} 62.text-black .text { 63 color: #000; 64} 65 66@media screen and (min-width: 560px) { 67.text-black { 68 display: block; 69} 70.text-inner { 71 width: 50%; 72 overflow: hidden; 73} 74.text { 75 font-size: 40px; 76} 77.text-black .text { 78 width: 200%; 79} 80} 81 82@media screen and (min-width: 960px) { 83.bg { 84 width: 80%; 85 height: 80%; 86 position: relative; 87 overflow: hidden; 88 margin-left: auto; 89 z-index: 1; 90} 91.text-block { 92 transform: none; 93} 94.text-white { 95 bottom: 12.5%; 96 left: -12.5%; 97} 98.text-black { 99 width: auto; 100 bottom: 30%; 101 left: 10%; 102} 103.text-inner { 104 width: 100%; 105} 106.text { 107 font-size: 54px; 108 text-align: left; 109 letter-spacing: .1em; 110} 111.text-black .text { 112 width: 100%; 113} 114} 115</style> 116 117<body> 118 <header class="header"> 119 <nav> 120 <ul class="menu"> 121 <li><a href="">NAVI</a></li> 122 <li><a href="">NAVI</a> 123 <ul> 124 <li><a href="">NAVI2</a></li> 125 <li><a href="">NAVI2</a></li> 126 <li><a href="">NAVI2</a></li> 127 <li><a href="">NAVI2</a></li> 128 <li><a href="">NAVI2</a></li> 129 <li><a href="">NAVI2</a></li> 130 </ul> 131 </li> 132 <li><a href="index.html">NAVI</a></li> 133 </ul> 134 </nav> 135</header> 136<div class="kv"> 137 <div class="bg"> 138 <div class="text-block text-white"> 139 <p class="text">Sample text<br> 140 noname site</p> 141 </div> 142 </div> 143 <div class="text-block text-black"> 144 <div class="text-inner"> 145 <p class="text" aria-hidden="true">Sample text<br> 146 noname site</p> 147 </div> 148 </div> 149</div> 150</body> 151</html>
試したこと
・要素がかぶっているのかと思い、ナビ下にmarginを入れたが変化なし
・.text-innerの位置を下げようとmarginを入れたが変化なし
補足情報（FW/ツールのバージョンなど）
AdobeのDreamWeber v21.1を使用。
そんなことはありません。
DreamWeberでコードをかいて、Google chrome、インターネットエクスプローラー、Egeのブラウザで確認するとスタイルがあたっていません。
よろしくお願いいたします。
ええ、そうですね。
jam27 さんの環境で問題が起きていない、とまでは私も申し上げていないです。
私の環境では問題が起きない、と申し上げています。
ですので、ご提示いただいていない部分に原因があるか、環境の問題か、あるいは問題が共有できていないか、のいずれかだと思います。
すみません、全て共有しているので、環境に問題があるかもしれません。
知識不足で申し訳ございませんが、環境の問題はどう解決できるのでしょうか。
これではクライアント様も私と同じような見え方になるかもしれません。
とりあえず、コードと問題の共有をお互いにしっかりしていきましょう。
まず、コードをMarkdownのコードブロックで装飾してください。
次に、「ナビのstyleがあたらなくなった」について、具体的に何が起きているのか教えてください。
以下のヘルプが役に立つかもしれませんのでご一読ください。
3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7
結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1
Markdownでコードを整形することを要求しているのは、単純に読みにくいからだけではなく、文字が化けたりスペースがトリムされたり、元のコードと違うものになる可能性があるからです。
質問の編集を拝読。
Markdownの使い方は、そうではないです。
https://teratail.com/help/question-tips#:~:text=teratail%E3%81%A6%E3%82%99%E3%81%AF%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%88%E3%82%99%E3%82%92%E3%82%B7%E3%83%B3%E3%82%BF%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8B%E3%82%99%E3%81%A6%E3%82%99%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
https://teratail-v2.storage.googleapis.com/uploads/contributed_images/
ありがとうございます。
Markdownでコードブロックを活用しました。。
行き違いました、ご対応ありがとうございます。
なるほど、問題が把握できてきました。
もしかして、「文字のレイアウト崩れ」は白黒の文字が元々はくっついていたのですか？
はい、白黒の文字は問題なく読める状態でした。（ナビゲーションを非表示にしたところ、くっついていました）
回答1件
0
ベストアンサー
こちらを追加してみてください。
css
1 .header { 2 display: flow-root; 3 }
投稿2021/09/29 06:53
総合スコア36163
ありがとうございます。
メインビジュアルの文字のズレ、リンクボタンのスタイルが表示されました。
しかし、プルダウンナビが画像の下に表示されてしまいます。
重ね合わせ順の問題ですので、z-index で調整してください。
ありがとうございます。解決しました。
ご解決されて何よりです。
あなたの回答
tips
プレビュー
