teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問メインビジュアルのスタイル指定後にナビのスタイルがあたらなくなり、レイアウトも崩れました

編集履歴

質問編集履歴

6

文字を追記しました。

2021/09/29 06:43

投稿

jam27
jam27

スコア4

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  ### 発生している問題・エラーメッセージ
7
7
 
8
- ナビのstyleがあたらなくなった。
8
+ ナビのstyleがあたらなくなった。（リンクボタンが反応しない、プルダウンナビが表示されない）
9
9
  左側の画像からはみ出ている文字のレイアウトが崩れている。
10
10
 
11
11
  ### 該当のソースコード

5

コードを見やすくしました。

2021/09/29 06:43

投稿

jam27
jam27

スコア4

title CHANGED
File without changes
body CHANGED
@@ -12,89 +12,87 @@
12
12
  ```HTML
13
13
 
14
14
  <!doctype html>
15
- **<html>**
15
+ <html>
16
16
  <head>
17
17
  <meta charset="utf-8">
18
18
  <title>無題ドキュメント</title>
19
19
  </head>
20
20
 
21
-
22
- ### ナビゲーション　css
23
21
  <style>
24
- **.menu li** {
22
+ .menu li {
25
23
  position: relative;
26
24
  float: right;
27
25
  }
28
- **.menu li a** {
26
+ .menu li a {
29
27
  display: block;
30
28
  text-decoration: none;
31
29
  color: #333;
32
30
  width: 120px;
33
31
  padding: 10px;
34
32
  }
35
- **.menu li a:hover** {
33
+ .menu li a:hover {
36
34
  color: #fff;
37
35
  background: #e8002a;
38
36
  }
39
- **.menu li:hover > ul** {
37
+ .menu li:hover > ul {
40
38
  display: block;
41
39
  }
42
- **.menu ul** {
40
+ .menu ul {
43
41
  display: none;
44
42
  position: absolute;
45
43
  top: 40px;
46
44
  width: 140px;
47
45
  }
48
- ### メインビジュアル　css
46
+
49
- **.kv** {
47
+ .kv {
50
48
  height: 100vh;
51
49
  position: relative;
52
50
  }
53
- **.bg** {
51
+ .bg {
54
52
  height: 100%;
55
53
  background: url("../Downloads/PAK86_komorebitohizashi.jpg") no-repeat center/cover;
56
54
  }
57
- **.text-block** {
55
+ .text-block {
58
56
  width: 100%;
59
57
  position: absolute;
60
58
  bottom: 100px;
61
59
  left: 50%;
62
60
  transform: translateX(-50%);
63
61
  }
64
- **.text-black** {
62
+ .text-black {
65
63
  display: none;
66
64
  }
67
- **.text** {
65
+ .text {
68
66
  font-size: 4.0rem;
69
67
  font-weight: 600;
70
68
  text-align: center;
71
69
  letter-spacing: .02em;
72
70
  }
73
- **.text-white .text** {
71
+ .text-white .text {
74
72
  color: #fff;
75
73
  }
76
- **.text-black .text** {
74
+ .text-black .text {
77
75
  color: #000;
78
76
  }
79
- ### メインビジュアル　レスポンス　css
77
+
80
78
  @media screen and (min-width: 560px) {
81
- **.text-black** {
79
+ .text-black {
82
80
  display: block;
83
81
  }
84
- **.text-inner** {
82
+ .text-inner {
85
83
  width: 50%;
86
84
  overflow: hidden;
87
85
  }
88
- **.text** {
86
+ .text {
89
87
  font-size: 40px;
90
88
  }
91
- **.text-black .text** {
89
+ .text-black .text {
92
90
  width: 200%;
93
91
  }
94
92
  }
95
93
 
96
94
  @media screen and (min-width: 960px) {
97
- **.bg **{
95
+ .bg {
98
96
  width: 80%;
99
97
  height: 80%;
100
98
  position: relative;
@@ -102,49 +100,49 @@
102
100
  margin-left: auto;
103
101
  z-index: 1;
104
102
  }
105
- **.text-block** {
103
+ .text-block {
106
104
  transform: none;
107
105
  }
108
- **.text-white** {
106
+ .text-white {
109
107
  bottom: 12.5%;
110
108
  left: -12.5%;
111
109
  }
112
- **.text-black** {
110
+ .text-black {
113
111
  width: auto;
114
112
  bottom: 30%;
115
113
  left: 10%;
116
114
  }
117
- **.text-inner** {
115
+ .text-inner {
118
116
  width: 100%;
119
117
  }
120
- **.text** {
118
+ .text {
121
119
  font-size: 54px;
122
120
  text-align: left;
123
121
  letter-spacing: .1em;
124
122
  }
125
- **.text-black .text** {
123
+ .text-black .text {
126
124
  width: 100%;
127
125
  }
128
126
  }
129
127
  </style>
130
- ### HTML
128
+
131
129
  <body>
132
130
  <header class="header">
133
131
  <nav>
134
- **<ul class="menu">**
132
+ <ul class="menu">
135
- <li><a href="">NAVI</a></li>
133
+ <li><a href="">NAVI</a></li>
136
- <li><a href="">NAVI</a>
134
+ <li><a href="">NAVI</a>
137
135
  <ul>
138
136
  <li><a href="">NAVI2</a></li>
139
137
  <li><a href="">NAVI2</a></li>
140
138
  <li><a href="">NAVI2</a></li>
141
- <li><a href="">NAVI2</a></li>
139
+ <li><a href="">NAVI2</a></li>
142
- <li><a href="">NAVI2</a></li>
140
+ <li><a href="">NAVI2</a></li>
143
- <li><a href="">NAVI2</a></li>
141
+ <li><a href="">NAVI2</a></li>
144
- 　　</ul>
142
+ 　</ul>
145
143
  </li>
146
144
  <li><a href="index.html">NAVI</a></li>
147
- **</ul>**
145
+ </ul>
148
146
  </nav>
149
147
  </header>
150
148
  <div class="kv">

4

コードを見やすくしました。

2021/09/29 06:39

投稿

jam27
jam27

スコア4

title CHANGED
File without changes
body CHANGED
@@ -9,6 +9,7 @@
9
9
  左側の画像からはみ出ている文字のレイアウトが崩れている。
10
10
 
11
11
  ### 該当のソースコード
12
+ ```HTML
12
13
 
13
14
  <!doctype html>
14
15
  **<html>**
@@ -130,7 +131,7 @@
130
131
  <body>
131
132
  <header class="header">
132
133
  <nav>
133
- <ul class="menu">
134
+ **<ul class="menu">**
134
135
  <li><a href="">NAVI</a></li>
135
136
  <li><a href="">NAVI</a>
136
137
  <ul>
@@ -140,10 +141,10 @@
140
141
  <li><a href="">NAVI2</a></li>
141
142
  <li><a href="">NAVI2</a></li>
142
143
  <li><a href="">NAVI2</a></li>
143
- </ul>
144
+ 　　</ul>
144
145
  </li>
145
146
  <li><a href="index.html">NAVI</a></li>
146
- </ul>
147
+ **</ul>**
147
148
  </nav>
148
149
  </header>
149
150
  <div class="kv">
@@ -162,8 +163,8 @@
162
163
  </div>
163
164
  </body>
164
165
  </html>
166
+ ```
165
167
 
166
-
167
168
  ### 試したこと
168
169
 
169
170
  ・要素がかぶっているのかと思い、ナビ下にmarginを入れたが変化なし

3

コードを見やすくしました。

2021/09/29 06:35

投稿

jam27
jam27

スコア4

title CHANGED
File without changes
body CHANGED
@@ -11,86 +11,89 @@
11
11
  ### 該当のソースコード
12
12
 
13
13
  <!doctype html>
14
- <html>
14
+ **<html>**
15
15
  <head>
16
16
  <meta charset="utf-8">
17
17
  <title>無題ドキュメント</title>
18
18
  </head>
19
19
 
20
+
21
+ ### ナビゲーション　css
20
22
  <style>
21
- .menu li {
23
+ **.menu li** {
22
24
  position: relative;
23
25
  float: right;
24
26
  }
25
- .menu li a {
27
+ **.menu li a** {
26
28
  display: block;
27
29
  text-decoration: none;
28
30
  color: #333;
29
31
  width: 120px;
30
32
  padding: 10px;
31
33
  }
32
- .menu li a:hover {
34
+ **.menu li a:hover** {
33
35
  color: #fff;
34
36
  background: #e8002a;
35
37
  }
36
- .menu li:hover > ul {
38
+ **.menu li:hover > ul** {
37
39
  display: block;
38
40
  }
39
- .menu ul {
41
+ **.menu ul** {
40
42
  display: none;
41
43
  position: absolute;
42
44
  top: 40px;
43
45
  width: 140px;
44
46
  }
47
+ ### メインビジュアル　css
45
- .kv {
48
+ **.kv** {
46
49
  height: 100vh;
47
50
  position: relative;
48
51
  }
49
- .bg {
52
+ **.bg** {
50
53
  height: 100%;
51
54
  background: url("../Downloads/PAK86_komorebitohizashi.jpg") no-repeat center/cover;
52
55
  }
53
- .text-block {
56
+ **.text-block** {
54
57
  width: 100%;
55
58
  position: absolute;
56
59
  bottom: 100px;
57
60
  left: 50%;
58
61
  transform: translateX(-50%);
59
62
  }
60
- .text-black {
63
+ **.text-black** {
61
64
  display: none;
62
65
  }
63
- .text {
66
+ **.text** {
64
67
  font-size: 4.0rem;
65
68
  font-weight: 600;
66
69
  text-align: center;
67
70
  letter-spacing: .02em;
68
71
  }
69
- .text-white .text {
72
+ **.text-white .text** {
70
73
  color: #fff;
71
74
  }
72
- .text-black .text {
75
+ **.text-black .text** {
73
76
  color: #000;
74
77
  }
75
-
78
+ ### メインビジュアル　レスポンス　css
76
79
  @media screen and (min-width: 560px) {
77
- .text-black {
80
+ **.text-black** {
78
81
  display: block;
79
82
  }
80
- .text-inner {
83
+ **.text-inner** {
81
84
  width: 50%;
82
85
  overflow: hidden;
83
86
  }
84
- .text {
87
+ **.text** {
85
88
  font-size: 40px;
86
89
  }
87
- .text-black .text {
90
+ **.text-black .text** {
88
91
  width: 200%;
89
92
  }
90
93
  }
91
94
 
92
95
  @media screen and (min-width: 960px) {
93
- .bg {
96
+ **.bg **{
94
97
  width: 80%;
95
98
  height: 80%;
96
99
  position: relative;
@@ -98,31 +101,32 @@
98
101
  margin-left: auto;
99
102
  z-index: 1;
100
103
  }
101
- .text-block {
104
+ **.text-block** {
102
105
  transform: none;
103
106
  }
104
- .text-white {
107
+ **.text-white** {
105
108
  bottom: 12.5%;
106
109
  left: -12.5%;
107
110
  }
108
- .text-black {
111
+ **.text-black** {
109
112
  width: auto;
110
113
  bottom: 30%;
111
114
  left: 10%;
112
115
  }
113
- .text-inner {
116
+ **.text-inner** {
114
117
  width: 100%;
115
118
  }
116
- .text {
119
+ **.text** {
117
120
  font-size: 54px;
118
121
  text-align: left;
119
122
  letter-spacing: .1em;
120
123
  }
121
- .text-black .text {
124
+ **.text-black .text** {
122
125
  width: 100%;
123
126
  }
124
127
  }
125
128
  </style>
129
+ ### HTML
126
130
  <body>
127
131
  <header class="header">
128
132
  <nav>

2

文字が多かったので少し削除しました。

2021/09/29 06:31

投稿

jam27
jam27

スコア4

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ![イメージ説明](5b743af13d078c0bd6387719f719dabe.png)### 前提・実現したいこと
1
+ ![イメージ説明](5b743af13d078c0bd6387719f719dabe.png)
2
2
  HTML、CSSを勉強中です。
3
3
  ナビゲーションのコードを書いた後にメインビジュアルのコードを追記したのですが、
4
4
  レイアウトが崩れ、ナビもスタイルがあたらなくなりました。

1

実際に私が確認したブラウザ画面はこちらです。

2021/09/29 05:48

投稿

jam27
jam27

スコア4

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ### 前提・実現したいこと
1
+ ![イメージ説明](5b743af13d078c0bd6387719f719dabe.png)### 前提・実現したいこと
2
2
  HTML、CSSを勉強中です。
3
3
  ナビゲーションのコードを書いた後にメインビジュアルのコードを追記したのですが、
4
4
  レイアウトが崩れ、ナビもスタイルがあたらなくなりました。