質問編集履歴

2

現状報告を追記しました。

2022/09/28 14:06

投稿

iisaniisan
iisaniisan

score75

test CHANGED
File without changes
test CHANGED
@@ -228,3 +228,9 @@
228
228
 
229
229
  下記で現状の動きが確認できます。
230
230
  https://iisaniisan.github.io/test/
231
+
232
+ 追記:
233
+ 確認したところ、jQueryのvar heightの値はちゃんと取れていることがわかりました。
234
+ 最後の
235
+ $("body").css("margin-top", height);
236
+ のbodyのところが間違っていると思うので、bodyのところをクリックした先に変更したいです。

1

現状がわかるように追記しました。

2022/09/28 08:31

投稿

iisaniisan
iisaniisan

score75

test CHANGED
File without changes
test CHANGED
@@ -6,22 +6,95 @@
6
6
  どうしたら良いでしょうか?
7
7
 
8
8
  ```HTML
9
+ <!doctype html>
10
+ <html lang="ja">
11
+ <head>
12
+ <!-- Required meta tags -->
13
+ <meta charset="utf-8">
14
+ <title>タイトル</title>
15
+ <meta name="description" content="説明が入ります。">
16
+ <meta name="viewport" content="width=device-width, initial-scale=1">
17
+
18
+ <!-- CSSスタイルシート -->
19
+ <link rel="stylesheet" href="css/bootstrap.min.css">
20
+ <link rel="stylesheet" href="css/style.css">
21
+ </head>
22
+ <body>
23
+
9
24
  <header id="header" class="header sticky-top">
10
25
  <div class="d-flex justify-content-between px-4 py-2">
26
+ <a class="navbar-brand" href="index.html">
27
+ <img src="img/logo.png" alt="ロゴ">
28
+ </a>
29
+ <div>
30
+ <button type="button" class="btn px-4">
31
+ <a class="text-dark text-decoration-none" href="">予約</a>
32
+ </button>
33
+ <button type="button" class="btn line px-4">
34
+ <a class="text-dark text-decoration-none" href="">問合せ</a>
35
+ </button>
36
+ </div>
37
+ </div>
38
+ <div class="nav container-field py-2">
39
+ <div class="row w-100 m-0">
40
+ <li class="nav-item col-20">
41
+ <a class="nav-link px-4" href="">概要</a>
42
+ </li>
43
+ <li class="nav-item col-20">
44
+ <a class="nav-link px-4" href="index.html#concept">コンセプト</a>
45
+ </li>
46
+ <li class="nav-item col-20">
47
+ <a class="nav-link px-4" href="index.html#title2">タイトル2</a>
48
+ </li>
49
+ <li class="nav-item col-20">
50
+ <a class="nav-link px-4" href="index.html#title3">タイトル3</a>
51
+ </li>
52
+ <li class="nav-item col-20">
53
+ <a class="nav-link px-4" href="index.html#shop">店舗一覧</a>
54
+ </li>
55
+ </div>
11
56
  </div>
12
57
  </header>
58
+
13
59
  <section id="concept" class="py-3">
14
60
  <div class="container p-5">
61
+ <h3 class="text-center pb-5">コンセプト</h3>
62
+ <div>
63
+ <p>
64
+ コメントが入ります。コメントが入ります。コメントが入ります。
65
+ </p>
15
- </div>
66
+ </div>
67
+ </div>
16
- </section>
68
+ </section>
69
+ <section id="title2" class="py-3">
70
+ <div class="container p-5">
71
+ <h3 class="text-center pb-5">タイトル2</h3>
72
+ <div>
73
+ <p>
74
+ コメントが入ります。コメントが入ります。コメントが入ります。
75
+ </p>
76
+ </div>
77
+ </div>
78
+ </section>
79
+ <section id="title3" class="py-3">
80
+ <div class="container p-5">
81
+ <h3 class="text-center pb-5">タイトル3</h3>
82
+ <div>
83
+ <p>
84
+ コメントが入ります。コメントが入ります。コメントが入ります。
85
+ </p>
86
+ </div>
87
+ </div>
88
+ </section>
89
+
17
90
  <section id="shop" class="pt-3">
18
91
  <div class="container px-5 pt-5 pb-0">
19
92
  <h3 class="text-center pb-5">店舗一覧</h3>
20
93
  <div class="d-flex justify-content-between shopContainer p-lg-5 p-3">
21
94
  <div id="oosaka" class="shopContents w-50 my-3">
22
95
  <h2>大阪店</h2>
23
- <img class="snsIcon mr-2" src="sns1.png" alt="">
24
- <img class="snsIcon mr-2" src="sns2.png" alt="">
96
+ <a href="https://www.youtube.com/" target="_blank"><img class="snsIcon mr-2" src="img/youtube.png" alt=""></a>
97
+ <a href="https://www.instagram.com/" target="_blank"><img class="snsIcon mr-2" src="img/instagram.png" alt=""></a>
25
98
  <table class="table table-bordered bg-white">
26
99
  <tbody>
27
100
  <tr>
@@ -42,32 +115,116 @@
42
115
  </tr>
43
116
  </tbody>
44
117
  </table>
118
+ <button type="button" class="btn px-4"><a class="text-white text-decoration-none" href="" target="_blank">地図</a></button>
119
+ <button type="button" class="btn px-4"><a class="text-white text-decoration-none" href="">予約</a></button>
45
120
  </div>
46
121
  <div class="shopImage my-3">
47
122
  <img class="shopPicture" src="img/shop1.png" />
48
123
  <img class="shopPicture" src="img/shop2.png" />
49
- <img class="shopPicture" src="img/shop3.png" />
124
+ <img class="shopPicture" src="img/shop1.png" />
50
- </div>
125
+ </div>
51
- </div>
126
+ </div>
52
- </div>
127
+ </div>
53
- </section>
128
+ </section>
129
+ <section id="info" class="py-3">
130
+ <div class="container p-md-5 p-4">
131
+ <h3 class="text-center pb-5">お知らせ</h3>
132
+ <div class="accordion" id="accordionExample">
133
+ <div class="card">
134
+ <div class="card-header bg-white py-1" id="headingOne">
135
+ <h5 class="mb-0">
136
+ <button class="btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
137
+ <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ
138
+ </button>
139
+ </h5>
140
+ </div>
141
+ <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
142
+ <div class="card-body pl-5">
143
+ お知らせ内容が入ります。
144
+ テキストが入ります。テキストが入ります。テキストが入ります。
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <div class="card">
149
+ <div class="card-header bg-white py-1" id="headingTwo">
150
+ <h5 class="mb-0">
151
+ <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
152
+ <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ
153
+ </button>
154
+ </h5>
155
+ </div>
156
+ <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
157
+ <div class="card-body pl-5">
158
+ お知らせ内容が入ります。
159
+ テキストが入ります。テキストが入ります。テキストが入ります。
160
+ </div>
161
+ </div>
162
+ </div>
163
+ <div class="card">
164
+ <div class="card-header bg-white py-1" id="headingThree">
165
+ <h5 class="mb-0">
166
+ <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
167
+ <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ
168
+ </button>
169
+ </h5>
170
+ </div>
171
+ <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
172
+ <div class="card-body pl-5">
173
+ お知らせ内容が入ります。
174
+ テキストが入ります。テキストが入ります。テキストが入ります。
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </section>
181
+
54
182
  <footer class="footer text-white">
183
+ <nav class="nav-bar py-md-5 text-nowrap">
184
+ <div class="container d-flex justify-content-between">
55
- <ul id="footerShop" class="nav flex-column">
185
+ <ul id="footerShop" class="nav flex-column">
56
186
  <p class="pt-2">店舗一覧</p>
57
187
  <li class="nav-item">
58
188
  <a class="nav-link text-white" href="index.html#oosaka">大阪店</a>
59
189
  </li>
60
- </ul>
190
+ </ul>
191
+ <ul id="footerMainMenu" class="nav flex-column">
192
+ <li class="nav-item">
193
+ <a class="nav-link text-white" href="">お問い合わせ</a>
194
+ </li>
195
+ <li class="nav-item">
196
+ <a class="nav-link text-white" href="">お客様の声</a>
197
+ </li>
198
+ <li class="nav-item">
199
+ <a class="nav-link text-white" href="index.html#info">お知らせ</a>
200
+ </li>
201
+ <li class="nav-item">
202
+ <a class="nav-link text-white" href="">採用情報/求人</a>
203
+ </li>
204
+ </ul>
205
+ </div>
206
+ </nav>
207
+ <div id="copyright" class="bg-white">
208
+ <p class="text-center text-dark mb-0 py-md-3 py-1">&copy; ホニャララ</p>
209
+ </div>
61
210
  </footer>
211
+
212
+ <script src="js/jquery-3.6.1.min.js"></script>
213
+ <script src="js/bootstrap.bundle.min.js"></script>
214
+ <script src="js/script.js"></script>
215
+ </body>
216
+ </html>
62
217
  ```
63
218
 
64
219
  ```JS
65
220
  $(function () {
66
- $('[href*="#"]').click(function(){
221
+ $('[href*="#"]').click(function(){
67
- alert(1);
222
+ alert(1);
68
- var height=$("#header").height();
223
+ var height=$("#header").height();
69
- $("body").css("margin-top", height);
224
+ $("body").css("margin-top", height);
70
- });
225
+ });
71
226
  });
72
227
  ```
73
228
 
229
+ 下記で現状の動きが確認できます。
230
+ https://iisaniisan.github.io/test/