teratail
回答率
85.47%
質問するログイン新規登録
トップCSS3に関する質問ヘッダーに画像が被ってしまう

編集履歴

質問編集履歴

2

再度コードの修正を行いました。（CSSに被ってしまう箇所のコード、.fixed箇所の追加、jquery部の書き直し

2022/09/12 08:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -3,7 +3,7 @@
3
3
  こんばんは。いつもお世話になっております。
4
4
 
5
5
  今回お聞きしたいことは
6
- 「htmlの一部の要素が、flexで固定しているヘッダーに被ってしまう。」
6
+ 「htmlの一部の要素が、fixedで固定しているヘッダーに被ってしまう。」
7
7
  ということを質問させていただきます。
8
8
 
9
9
  課題に取り組み中なのですが、ヘッダーの一部の画像を「opacity: 0.8;」とを適用し薄くしているんですが、それを行うとhtmlの一部がスクロールする際になぜかスクロールで固定しているリストにかかってしまいます。
@@ -46,7 +46,7 @@
46
46
  </div>
47
47
  </header>
48
48
 
49
- <!-- ここから下が上にかぶさってしまう場所 -->
49
+ <!-- ここから下が上にかぶさってしまう場所 GoToEats -->
50
50
  <div class="GoToEats">
51
51
  <div class="GoToEats_list">
52
52
  <h3><b>Go To Eats</b></h3>
@@ -148,33 +148,68 @@
148
148
  flex: 25%;
149
149
  justify-content: flex-end;
150
150
  }
151
+
152
+ /* トップナビのスクロール固定 */
153
+ .fixed {
154
+ background-color: black;
155
+ transition: all 0.5s ease;
156
+ width: 100%;
157
+ padding-bottom: 15px;
158
+ position: fixed;
159
+ top: 0;
160
+ animation: all 0.2s ease;
161
+ z-index: 99;
162
+ }
163
+
164
+ /* GoToEats */
165
+ .GoToEats {
166
+ position: relative;
167
+ }
168
+
169
+ .GoToEats_list {
170
+ position: absolute;
171
+ top: 50px;
172
+ left: 50px;
173
+ background-color: rgba(255, 255, 255, 0.4);
174
+ padding: 10px;
175
+ }
176
+
177
+ .GoToEats_list h3 {
178
+ margin: 0;
179
+ font-size: 32px;
180
+
181
+ }
182
+
183
+ .GoToEats_list p {
184
+ margin: 0;
185
+ font-weight: 100;
186
+ background-color: rgba(255, 255, 255, 0.5);
187
+ font-size: 13px;
188
+ }
189
+
190
+ .GoToEats_img img {
191
+ width: 100%;
192
+ border-radius: 15px;
193
+ }
194
+
151
195
  ```
152
196
 
153
197
 
154
198
 
155
199
  ```jquery
200
+
156
- function PageTopAnime() {
201
+ $(function () {
202
+ var elemTop = $('#menus').offset().top;
157
203
  var scroll = $(window).scrollTop();
204
+ $(window).scroll(function(){
158
- if (scroll >= 200){//上から200pxスクロールしたら
205
+ if($(this).scrollTop() > 50){
159
- $('#jump_top').removeClass('DownMove');//#page-topについているDownMoveというクラス名を除く
160
- $('#jump_top').addClass('UpMove');//#page-topについているUpMoveというクラス名を付与
206
+ $("#menus").addClass('fixed');
161
- } else {
207
+ } else {
162
- if($('#jump_top').hasClass('UpMove')){//すでに#page-topにUpMoveというクラス名がついていたら
163
- $('#jump_top').removeClass('UpMove');//UpMoveというクラス名を除き
208
+ $("#menus").removeClass('fixed');
164
- $('#jump_top').addClass('DownMove');//DownMoveというクラス名を#page-topに付与
165
- }
209
+ }
166
- }
210
+ });
167
- }
168
-
169
- // 画面をスクロールをしたら動かしたい場合の記述
170
- $(window).scroll(function () {
171
- PageTopAnime();/* スクロールした際の動きの関数を呼ぶ*/
172
211
  });
173
212
 
174
- // ページが読み込まれたらすぐに動かしたい場合の記述
175
- $(window).on('load', function () {
176
- PageTopAnime();/* スクロールした際の動きの関数を呼ぶ*/
177
- });
178
213
  ```
179
214
 
180
215
  ### 試したこと
@@ -187,3 +222,7 @@
187
222
  すみません。全体的に改善する前のものを提示していました。
188
223
  全体的にコードを直しています。
189
224
 
225
+
226
+ ご指摘ありがとうございます。配慮が足りずすみません。
227
+ 再度修正致しましたので、確認していただければと思います。
228
+
CSS3jQuery

1

コード全体が一週間ほど前のもので、今のものに訂正する前でした。

2022/09/12 05:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
  「htmlの一部の要素が、flexで固定しているヘッダーに被ってしまう。」
7
7
  ということを質問させていただきます。
8
8
 
9
- ヘッダーの一部の画像を「opacity: 0.8;」とを適用し薄くしているんですが、それを行うとhtmlの一部がスクロールする際になぜかスクロールで固定しているリストにかかってしまいます。
9
+ 課題に取り組み中なのですが、ヘッダーの一部の画像を「opacity: 0.8;」とを適用し薄くしているんですが、それを行うとhtmlの一部がスクロールする際になぜかスクロールで固定しているリストにかかってしまいます。
10
10
 
11
11
  こちらを解決したいので、知恵をお貸しいただけたらと思います。
12
12
 
@@ -26,34 +26,66 @@
26
26
  <header>
27
27
  <nav id="menus">
28
28
  <div id="menu_logos">
29
- <a href="#" class="menu_logo"><img src="./img/logo.png"></a>
29
+ <a href="#" class="menu_logo"><img src="./cafe/img/logo.png"></a>
30
30
  </div>
31
+
32
+ <!-- ここが画面をスクロールすれば丈夫に固定されるようにしていますが、下記の位置で被ってしまう箇所です -->
31
33
  <div class="nav_list">
34
+ <!-- <a href="/index.php#cafes_access" class="menu">はじめに</a> -->
32
- <a href="#" class="menu">はじめに</a>
35
+ <a href="#" class="menu menu_info">はじめに</a>
36
+ <!-- <a href="./index.php#cafe_make" class="menu">体験</a> -->
33
- <a href="#" class="menu">体験</a>
37
+ <a href="#" class="menu menu_cafe">体験</a>
34
- <a href="#" class="menu">お問合せ</a>
38
+ <a href="./contact.php" class="menu">お問合せ</a>
35
39
  </div>
36
40
  <div class="menu_sinin">
37
41
  <a href="#" class="sinin_text">サインイン</a>
38
42
  </div>
39
43
  </nav>
40
44
  <div class="top_h1">
41
- <hi class="menu_toptext"><b>あなたと<br>今日を生きる</b></h1>
45
+ <hi class="menu_toptext"><b>あなたの<br>好きな空間を作る</b></h1>
42
46
  </div>
43
47
  </header>
48
+
49
+ <!-- ここから下が上にかぶさってしまう場所 -->
50
+ <div class="GoToEats">
51
+ <div class="GoToEats_list">
52
+ <h3><b>Go To Eats</b></h3>
53
+ <p>キャンペーンを利用して、全国で食事しよう。<br>いつもと違う景色に囲まれてカラダもココロもリフレッシュ。</p>
54
+ </div>
55
+ <div class="GoToEats_img">
56
+ <img src="./cafe/img/goto.jpg">
57
+ </div>
58
+ </div>
44
59
  ```
45
60
 
46
61
  ```css
62
+ body {
63
+ margin: 0px;
64
+ padding: 0px;
65
+ }
66
+
67
+ .top_text {
68
+ background-color: black;
69
+ text-align: center;
70
+ padding: 14px;
71
+ }
72
+
73
+
74
+ .top_text a {
75
+ font-size: 14px;
76
+ color: white;
77
+ }
78
+
47
79
  header {
48
80
  background-image: url('./cafe/img/eyecatch.jpg');
49
-
50
- //ここが変。ここをコメントアウトすると被さらない。
81
+ <!-- ここの箇所をコメントアウトするとうまくいく -->
51
- filter: opacity(80%);
82
+ opacity: 0.8;
52
83
 
53
84
  width: 100%;
54
85
  background-size: cover;
55
86
  background-position: center;
56
87
  height: 550px;
88
+ position: relative;
57
89
  }
58
90
 
59
91
  #menus {
@@ -64,6 +96,7 @@
64
96
  width: 100%;
65
97
  align-items: center;
66
98
  flex-wrap: wrap;
99
+ transition: all 0.5s ease;
67
100
  }
68
101
 
69
102
  #menu_logos {
@@ -99,9 +132,9 @@
99
132
  }
100
133
 
101
134
  .menu_toptext {
102
- position: relative;
135
+ position: absolute;
103
136
  width: 90%;
104
- top: 150px;
137
+ top: 200px;
105
138
  left: 30px;
106
139
  font-size: 64px;
107
140
  color: rgba(255, 255, 255, 0.85);
@@ -115,24 +148,32 @@
115
148
  flex: 25%;
116
149
  justify-content: flex-end;
117
150
  }
118
-
119
- .tennki {
120
- color: aqua;
121
- }
122
151
  ```
123
152
 
124
153
 
125
154
 
126
155
  ```jquery
127
- $(function () {
156
+ function PageTopAnime() {
128
- var scroll_text = $(#menus).offset().top;
157
+ var scroll = $(window).scrollTop();
129
- $(window).scroll(function(){
130
- if($(this).scrollTop() > scroll_text){
158
+ if (scroll >= 200){//上から200pxスクロールしたら
159
+ $('#jump_top').removeClass('DownMove');//#page-topについているDownMoveというクラス名を除く
131
- $("#menus").addClass('lord_menu');
160
+ $('#jump_top').addClass('UpMove');//#page-topについているUpMoveというクラス名を付与
132
- } else {
161
+ } else {
162
+ if($('#jump_top').hasClass('UpMove')){//すでに#page-topにUpMoveというクラス名がついていたら
133
- $("#menus").removeClass('lord_menu');
163
+ $('#jump_top').removeClass('UpMove');//UpMoveというクラス名を除き
164
+ $('#jump_top').addClass('DownMove');//DownMoveというクラス名を#page-topに付与
134
- }
165
+ }
166
+ }
167
+ }
168
+
169
+ // 画面をスクロールをしたら動かしたい場合の記述
170
+ $(window).scroll(function () {
171
+ PageTopAnime();/* スクロールした際の動きの関数を呼ぶ*/
135
- });
172
+ });
173
+
174
+ // ページが読み込まれたらすぐに動かしたい場合の記述
175
+ $(window).on('load', function () {
176
+ PageTopAnime();/* スクロールした際の動きの関数を呼ぶ*/
136
177
  });
137
178
  ```
138
179
 
@@ -143,5 +184,6 @@
143
184
 
144
185
  ### 補足情報（FW/ツールのバージョンなど）
145
186
 
187
+ すみません。全体的に改善する前のものを提示していました。
146
- ここにより詳細な情報を記載してください。
188
+ 全体的にコードを直しています。
147
189
 
CSS3jQuery