teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問外部から読み込んだhtmlに、更に外部htmlを読み込みたい。

編集履歴

質問編集履歴

1

htmlを追記しました。

2021/01/31 10:55

投稿

tk-tail
tk-tail

スコア1

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,9 @@
6
6
 
7
7
  料金表の読み込みは、以下のようなプログラムです。
8
8
 
9
+
10
+
9
- 、、、、、
11
+ ```jquery
10
12
 
11
13
  $(function(){
12
14
 
@@ -28,13 +30,15 @@
28
30
 
29
31
  });
30
32
 
31
- 、、、、、、
33
+ ```
32
34
 
33
35
 
34
36
 
35
37
  トップページに、201～223.htmlを表示するのは、全部書くと長いので一部ですが、以下のプログラムです。
36
38
 
39
+
40
+
37
- 、、、、、、、、、、
41
+ ```jquery
38
42
 
39
43
  var all_link=new Array(),
40
44
 
@@ -52,14 +56,268 @@
52
56
 
53
57
  }
54
58
 
59
+
60
+
61
+ ```
62
+
63
+
64
+
65
+ アドバイスありがとうございます。質問修正します。
66
+
67
+ トップページのhtmlは以下のようになっております。
68
+
69
+
70
+
71
+ ```html
72
+
73
+ <ul class="room-list">
74
+
75
+ <li><img src="images/room201_02_s.jpg" alt="201"><span>201</span></li>
76
+
77
+ <li><img src="images/room202_01_s.jpg" alt="202"><span>202</span></a></li>
78
+
79
+ <li><img src="images/room203_01_s.jpg" alt="203"><span>203</span></a></li>
80
+
81
+ <li><img src="images/room204_01_s.jpg" alt="204"><span>204</span></a></li>
82
+
83
+ <li><img src="images/room205_01_s.jpg" alt="205"><span>205</span></a></li>
84
+
85
+ <li><img src="images/room206_01_s.jpg" alt="206"><span>206</span></a></li>
86
+
87
+ <li><img src="images/room207_01_s.jpg" alt="207"><span>207</span></a></li>
88
+
89
+ <li><img src="images/room208_01_s.jpg" alt="208"><span>208</span></a></li>
90
+
91
+ <li><img src="images/room209_01_s.jpg" alt="209"><span>209</span></a></li>
92
+
93
+ <li><img src="images/room210_01_s.jpg" alt="210"><span>210</span></a></li>
94
+
95
+ <li><img src="images/room211_01_s.jpg" alt="211"><span>211</span></a></li>
96
+
97
+ <li><img src="images/room212_01_s.jpg" alt="212"><span>212</span></a></li>
98
+
99
+ <li><img src="images/room213_01_s.jpg" alt="213"><span>213</span></a></li>
100
+
101
+ <li><img src="images/room214_01_s.jpg" alt="214"><span>214</span></a></li>
102
+
103
+ <li><img src="images/room215_01_s.jpg" alt="215"><span>215</span></a></li>
104
+
105
+ <li><img src="images/room216_02_s.jpg" alt="216"><span>216</span></a></li>
106
+
107
+ <li><img src="images/room217_01_s.jpg" alt="217"><span>217</span></a></li>
108
+
109
+ <li><img src="images/room218_01_s.jpg" alt="218"><span>218</span></a></li>
110
+
111
+ <li><img src="images/room219_01_s.jpg" alt="219"><span>219</span></a></li>
112
+
113
+ <li><img src="images/room220_01_s.jpg" alt="220"><span>220</span></a></li>
114
+
115
+ <li><img src="images/room221_02_s.jpg" alt="221"><span>221</span></a></li>
116
+
117
+ <li><img src="images/room222_01_s.jpg" alt="222"><span>222</span></a></li>
118
+
119
+ <li><img src="images/room223_01_s.jpg" alt="223"><span>223</span></a></li>
120
+
121
+ </ul>
122
+
123
+ <div class="box">
124
+
125
+ <div class="box_inner">
126
+
127
+ <ul class="box_load">
128
+
129
+ <!-- ↓ここに.load_xxが入る -->
130
+
131
+ </ul>
132
+
133
+
134
+
135
+ <div class="close">×&nbsp;CLOSE</div>
136
+
137
+
138
+
139
+ <ul class="arrows">
140
+
141
+ <li class="arrow_left"><span class="arrow_span"><i class="fas fa-chevron-left"></i></span></li>
142
+
143
+ <li class="arrow_right"><span class="arrow_span"><i class="fas fa-chevron-right"></i></span></li>
144
+
145
+ </ul>
146
+
147
+ </div>
148
+
149
+ </div>
150
+
151
+ <div class="box_cover"></div>
152
+
153
+ ```
154
+
155
+ 201～203.htmlは以下で、料金によって<div id="standard-room">の部分のIDを変えています。
156
+
157
+ ```html
158
+
159
+ <div class="room-type-wrap">
160
+
161
+ <h3 class="room-type">201&nbsp;スタンダード</h3>
162
+
163
+ </div>
164
+
165
+
166
+
167
+ <div class="room-info-wrap responsive-wrap">
168
+
169
+ <div><img src="ホームページのURL/images/room201_01.jpg" alt="お部屋写真01"></div>
170
+
171
+ <div><img src="ホームページのURL/images/room201_02.jpg" alt="お部屋写真02"></div>
172
+
173
+ <div><img src="ホームページのURL/images/room201_03.jpg" alt="お部屋写真03"></div>
174
+
175
+
176
+
177
+ <div class="price-room-info-list">
178
+
179
+ <div id="standard-room">
180
+
181
+ <!-- standard-room.htmlが入る -->
182
+
183
+ </div>
184
+
185
+
186
+
187
+ <p class="room-facilities">ここは部屋の設備が入ります</p>
188
+
189
+
190
+
191
+ </div><!--price-room-info-list -->
192
+
193
+
194
+
195
+ </div><!-- room-info-wrap -->
196
+
197
+ ```
198
+
199
+
200
+
201
+ 料金表は以下のhtmlです
202
+
203
+ ```html
204
+
205
+ <h4>ショートタイム</h4>
206
+
55
- 、、、、、、、、、、
207
+ <ul>
208
+
209
+ <li>月～金曜日・祝前日</li>
210
+
211
+ <li>￥4,580</li>
212
+
213
+ </ul>
214
+
215
+ <ul>
216
+
217
+ <li>土・日・祝日</li>
218
+
219
+ <li>￥5,480</li>
220
+
221
+ </ul>
222
+
223
+
224
+
225
+ <h4>ご休憩</h4>
226
+
227
+ <ul>
228
+
229
+ <li>月～金・祝前日</li>
230
+
231
+ <li>￥5,000</li>
232
+
233
+ </ul>
234
+
235
+ <ul>
236
+
237
+ <li>土・日・祝日</li>
238
+
239
+ <li>￥5,700</li>
240
+
241
+ </ul>
242
+
243
+
244
+
245
+ <h4>サービスタイム</h4>
246
+
247
+ <ul>
248
+
249
+ <li>月～金・祝前日</li>
250
+
251
+ <li>￥5,000</li>
252
+
253
+ </ul>
254
+
255
+ <ul>
256
+
257
+ <li>土・日・祝日</li>
258
+
259
+ <li>￥5,700</li>
260
+
261
+ </ul>
262
+
263
+
264
+
265
+ <h4>ご宿泊</h4>
266
+
267
+ <ul>
268
+
269
+ <li>日～金・祝日</li>
270
+
271
+ <li>￥7,500</li>
272
+
273
+ </ul>
274
+
275
+ <ul>
276
+
277
+ <li>土・祝前日</li>
278
+
279
+ <li>￥10,000</li>
280
+
281
+ </ul>
282
+
283
+
284
+
285
+ <h4>ご延長</h4>
286
+
287
+ <ul>
288
+
289
+ <li>全日</li>
290
+
291
+ <li>￥1,800</li>
292
+
293
+ </ul>
294
+
295
+ ```
56
296
 
57
297
 
58
298
 
59
299
  201～223.htmlは、index.htmlと同じ階層に「room」フォルダを作って、その中に入れています。
60
300
 
301
+ 料金表は「room-type」のフォルダに入れています。
302
+
61
303
  トップページにも同じ料金表があって、そちらは表示されているので、動いてはいると思うのですが…。。。。
62
304
 
63
305
 
64
306
 
307
+ 今回の料金表や、ヘッダーもこの方法でインクルードしていますが、あまり良くないでしょうか？？
308
+
309
+ この方法でよいのか、SEOはどうなのか、ネットではいまいちわからず、詳しい人も周りにおらず、みんな共通部分の読み込みはどうしているのだろうと、色々悩みながら作っております。
310
+
311
+ できれば、metaタグなど<head></head>の部分もひとつで済むようにしたいのですが、今のやり方では無理そうです。
312
+
313
+
314
+
315
+ 他に何か良い方法があれば、ご教示頂けましたら幸いです。
316
+
317
+
318
+
319
+ ソースコードの書き方知らなかったので、この点は何だろう。と思いつつ「、、、」と手入力していました。すみません。
320
+
321
+
322
+
65
323
  よろしくお願いいたします。