質問編集履歴
6
誤字の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -250,7 +250,10 @@
|
|
|
250
250
|
</nav>
|
|
251
251
|
</header>
|
|
252
252
|
|
|
253
|
+
```
|
|
254
|
+
|
|
253
|
-
```
|
|
255
|
+
```CSS
|
|
256
|
+
|
|
254
257
|
/*================================================
|
|
255
258
|
* 一般・共通設定
|
|
256
259
|
================================================*/
|
5
ご指摘いただいたコードを記載しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,8 +13,10 @@
|
|
|
13
13
|
|
|
14
14
|
印刷に関するコードと思しき箇所を載せさせていただきます。
|
|
15
15
|
情報が足りない場合は追加で載せさせていただきますので、ご指示いただければと思います。
|
|
16
|
+
|
|
16
|
-
※ご指摘いただきましたコードをCSSの次に記載させていただきました。
|
|
17
|
+
※1ご指摘いただきましたコードをCSSの次に記載させていただきました。
|
|
18
|
+
※2CSSにおけるヘッダーについての記載と思しき箇所についてhtml5のコードの次に掲載させていただきました。
|
|
17
|
-
改めて、よろしくお願いいたします。
|
|
19
|
+
わかりづらくて申し訳ございませんが、改めて、よろしくお願いいたします。
|
|
18
20
|
```CSS
|
|
19
21
|
/*================================================
|
|
20
22
|
* グローバルナビゲーション
|
|
@@ -248,7 +250,119 @@
|
|
|
248
250
|
</nav>
|
|
249
251
|
</header>
|
|
250
252
|
|
|
253
|
+
```css
|
|
254
|
+
/*================================================
|
|
255
|
+
* 一般・共通設定
|
|
256
|
+
================================================*/
|
|
257
|
+
|
|
258
|
+
header {
|
|
259
|
+
box-sizing: border-box;
|
|
260
|
+
z-index: 10;
|
|
261
|
+
position: fixed;
|
|
262
|
+
top: 0;
|
|
263
|
+
left: 0;
|
|
264
|
+
width: 100%;
|
|
265
|
+
background: #fcfcfc;
|
|
266
|
+
}
|
|
267
|
+
/*================================================
|
|
268
|
+
* ヘッダー
|
|
269
|
+
================================================*/
|
|
270
|
+
header {
|
|
271
|
+
background: #fff;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
header > .inner {
|
|
275
|
+
box-sizing:border-box;
|
|
276
|
+
display: -ms-flexbox;
|
|
277
|
+
display: -webkit-box;
|
|
278
|
+
display: -webkit-flex;
|
|
279
|
+
display: flex;
|
|
280
|
+
-ms-flex-align: center;
|
|
281
|
+
-webkit-box-align: center;
|
|
282
|
+
-webkit-align-items: center;
|
|
283
|
+
align-items: center;
|
|
284
|
+
-ms-flex-pack: justify;
|
|
285
|
+
-webkit-box-pack: justify;
|
|
286
|
+
-webkit-justify-content: censpace-betweenter;
|
|
287
|
+
justify-content: space-between;
|
|
288
|
+
padding: 20px 0;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.summary {
|
|
292
|
+
position: relative;
|
|
293
|
+
margin: 0;
|
|
294
|
+
padding-bottom: 5px;
|
|
295
|
+
font-size: 12px;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
.header_nav {
|
|
300
|
+
display: -ms-flexbox;
|
|
301
|
+
display: -webkit-box;
|
|
302
|
+
display: -webkit-flex;
|
|
303
|
+
display: flex;
|
|
304
|
+
|
|
305
|
+
-ms-flex-align: center;
|
|
306
|
+
-webkit-box-align: center;
|
|
307
|
+
-webkit-align-items: center;
|
|
308
|
+
align-items: center;
|
|
309
|
+
|
|
310
|
+
-ms-flex-pack: justify;
|
|
311
|
+
-webkit-box-pack: justify;
|
|
312
|
+
-webkit-justify-content: censpace-betweenter;
|
|
313
|
+
justify-content: space-between;
|
|
314
|
+
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.header_tel {
|
|
318
|
+
line-height: 1.2;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.header_tel .phonenumber {
|
|
322
|
+
font-size: 24px;
|
|
323
|
+
font-weight: bold;
|
|
324
|
+
line-height: 1.0;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.header_tel .open {
|
|
328
|
+
font-size: 12px;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.header_require {
|
|
332
|
+
margin: 0 20px;
|
|
333
|
+
}
|
|
334
|
+
.header_require a {
|
|
335
|
+
display: block;
|
|
336
|
+
padding: 10px 20px;
|
|
337
|
+
color: #fff;
|
|
338
|
+
font-weight: bold;
|
|
339
|
+
border: 2px solid #3ebf96;
|
|
340
|
+
border-radius: 5px;
|
|
341
|
+
text-decoration: none;
|
|
342
|
+
background: #3ebf96;
|
|
343
|
+
}
|
|
344
|
+
.header_require a:hover {
|
|
345
|
+
color: #999;
|
|
346
|
+
border: 2px solid #3ebf96;
|
|
347
|
+
background: none;
|
|
348
|
+
}
|
|
349
|
+
.header_contact a {
|
|
350
|
+
display: block;
|
|
351
|
+
padding: 10px 20px;
|
|
352
|
+
color: #fff;
|
|
353
|
+
font-weight: bold;
|
|
354
|
+
border: 2px solid #008000;
|
|
355
|
+
border-radius: 5px;
|
|
356
|
+
text-decoration: none;
|
|
357
|
+
background: #008000;
|
|
358
|
+
}
|
|
359
|
+
.header_contact a:hover {
|
|
360
|
+
color: #999;
|
|
361
|
+
border: 2px solid #3ebf96;
|
|
362
|
+
background: none;
|
|
363
|
+
}
|
|
251
364
|
```
|
|
365
|
+
|
|
252
366
|
以上になります。
|
|
253
367
|
一部伏字にさせて頂きましたが、コードとは関係ない箇所です。
|
|
254
368
|
|
4
htmlのheader部分のコードを追記いたしました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
|
|
14
14
|
印刷に関するコードと思しき箇所を載せさせていただきます。
|
|
15
15
|
情報が足りない場合は追加で載せさせていただきますので、ご指示いただければと思います。
|
|
16
|
+
※ご指摘いただきましたコードをCSSの次に記載させていただきました。
|
|
17
|
+
改めて、よろしくお願いいたします。
|
|
16
18
|
```CSS
|
|
17
19
|
/*================================================
|
|
18
20
|
* グローバルナビゲーション
|
|
@@ -193,6 +195,63 @@
|
|
|
193
195
|
|
|
194
196
|
```
|
|
195
197
|
|
|
198
|
+
```html5
|
|
199
|
+
<header>
|
|
200
|
+
<div class="inner">
|
|
201
|
+
<div class="header_left">
|
|
202
|
+
<p class="summary">
|
|
203
|
+
</p>
|
|
204
|
+
<h1><a href="index.html" class="auto-style1">
|
|
205
|
+
<img src="image.png" alt="" style="width: 80%"></h1>
|
|
206
|
+
</div><!-- /.header_left -->
|
|
207
|
+
<div class="header_right">
|
|
208
|
+
<div class="header_nav">
|
|
209
|
+
<div class="header_tel" style="width: 200px">
|
|
210
|
+
<span class="phonenumber">
|
|
211
|
+
</span>
|
|
212
|
+
<span class="phonenumber">
|
|
213
|
+
<a href="tel:○○○○" class="auto-style3"><em>TEL:○○○○</em></a><br></span>
|
|
214
|
+
<span class="open" style="font-size: 11pt">○○○○</span>
|
|
215
|
+
</div><!-- /.header_tel -->
|
|
216
|
+
<div class="header_contact">
|
|
217
|
+
<a href="contact.html" class="auto-style4" style="width: 80%">○○○○</a></div> <!-- /.header_require -->
|
|
218
|
+
</div><!-- /.header_nav -->
|
|
219
|
+
</div><!-- /.header_right -->
|
|
220
|
+
</div><!-- /.inner -->
|
|
221
|
+
<div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div>
|
|
222
|
+
<nav>
|
|
223
|
+
<div class="inner">
|
|
224
|
+
<ul class="gnav">
|
|
225
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
226
|
+
<li class="subnav"><a href="○○○○.html" class="auto-style5">○○○○</a>
|
|
227
|
+
<ul>
|
|
228
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
229
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
230
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
231
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
232
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
233
|
+
</ul>
|
|
234
|
+
</li>
|
|
235
|
+
<li class="subnav"><a href="○○○○.html" class="auto-style5">○○○○</a>
|
|
236
|
+
<ul>
|
|
237
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
238
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
239
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
240
|
+
</ul>
|
|
241
|
+
</li>
|
|
242
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
243
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a>
|
|
244
|
+
</li>
|
|
245
|
+
<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
|
|
246
|
+
</ul>
|
|
247
|
+
</div><!-- /.inner -->
|
|
248
|
+
</nav>
|
|
249
|
+
</header>
|
|
250
|
+
|
|
251
|
+
```
|
|
252
|
+
以上になります。
|
|
253
|
+
一部伏字にさせて頂きましたが、コードとは関係ない箇所です。
|
|
254
|
+
|
|
196
255
|
### 試したこと
|
|
197
256
|
|
|
198
257
|
固定されていることが問題だとしたら、
|
3
誤字修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
印刷時に固定されたヘッダーでコンテンツが隠れてしまうの解消したい
|
|
1
|
+
印刷時に固定されたヘッダーでコンテンツが隠れてしまうのを解消したい
|
body
CHANGED
|
File without changes
|
2
誤字修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,9 +8,6 @@
|
|
|
8
8
|
|
|
9
9
|
現在、ホームページを作成しており、印刷プレビューで確認してみたところ、ヘッダーが固定されているためなのか、出力時、2ページ目以降、コンテンツと重なってしまい、一部分が全く見えない状況になっています。
|
|
10
10
|
|
|
11
|
-
```
|
|
12
|
-
エラーメッセージ
|
|
13
|
-
```
|
|
14
11
|
|
|
15
12
|
### 該当のソースコード
|
|
16
13
|
|
1
実現したいことを明確に記載しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
固定されたヘッダー
|
|
3
|
+
印刷時に固定されたヘッダーで、一部のコンテンツが隠れてしまうのを解消したいです。
|
|
4
|
-
まだまだ未熟ものなので、いろいろ調べてみましたが、「コンテンツがしっかり見えるようにする」、あるいは、「印刷時のみ固定を解除できる」等の解決策がかわからず質問せていただくことにしました。
|
|
4
|
+
まだまだ未熟ものなので、いろいろ調べてみましたが、「コンテンツが印刷時でもしっかり見えるようにする」、あるいは、「印刷時のみ固定を解除できる」等の解決策がかわからず質問せていただくことにしました。
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
### 発生している問題・エラーメッセージ
|