質問編集履歴

6

HTMLとCSSを編集

2019/07/12 08:34

投稿

taka_oct092018
taka_oct092018

スコア133

test CHANGED
File without changes
test CHANGED
@@ -14,460 +14,464 @@
14
14
 
15
15
 
16
16
 
17
+
18
+
19
+ ```ここに言語を入力
20
+
21
+ <!DOCTYPE html>
22
+
23
+ <html lang="ja">
24
+
25
+ <head>
26
+
27
+ <meta charset="UTF-8">
28
+
29
+ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0">
30
+
31
+ <title>結婚式場のコンセプト|HOTEL IMPERIAL RESORT TOKYO</title>
32
+
33
+ <link rel="stylesheet" href="css/normalize.css">
34
+
35
+ <link rel="stylesheet" href="css/style.css">
36
+
37
+ </head>
38
+
39
+
40
+
41
+ <body id="base">
42
+
43
+ <header id="top" class="hdr"><!-- 【ヘッダー】 -->
44
+
45
+ <h1><a href="index.html"><img src="img/logo_01.png" alt="HOTEL IMPERIAL RESORT TOKYO"></a></h1>
46
+
47
+ </header><!-- /#top .hdr -->
48
+
49
+ <nav class="gnav" aria-label="グローバルナビゲーション"><!-- グローバルナビゲーション -->
50
+
51
+ <ul class="wrap-list">
52
+
53
+ <li id="nav_concept"><a href="concept.html">結婚式場のコンセプト</a></li>
54
+
55
+ <li id="nav_plan"><a href="plan.html">プランのご案内</a></li>
56
+
57
+ <li id="nav_fair"><a href="fair.html">ブライダルフェア</a></li>
58
+
59
+ <li id="nav_contact"><a href="contact.html">お問い合わせ</a></li>
60
+
61
+ </ul><!-- /.wrap-list -->
62
+
63
+ </nav><!-- /.gnav -->
64
+
65
+ <div id="breadcrumb">
66
+
67
+ <ul>
68
+
69
+ <li><a href="index.html">ホーム</a></li>
70
+
71
+ <li>結婚式場のコンセプト</li>
72
+
73
+ </ul>
74
+
75
+ </div><!-- /#breadcrumb -->
76
+
77
+ <div class="contents"><!-- 【コンテンツ】 -->
78
+
79
+ <section class="contents-main"><!-- 【メインコンテンツ】 -->
80
+
81
+ <article>
82
+
83
+ <h2>結婚式場のコンセプト</h2>
84
+
85
+ </article>
86
+
87
+ </section><!-- /.contents-main -->
88
+
89
+
90
+
91
+ <div class="contents-sub"><!-- 【サブコンテンツ】 -->
92
+
93
+ <aside>
94
+
95
+ <div class="bnr-inner">
96
+
97
+ <a href="plan.html">
98
+
99
+ <dl>
100
+
101
+ <dt><img src="img/bnr_contents_sub_plan_01.jpg" alt="プランのご案内"></dt>
102
+
103
+ <dd>標準のプランをご紹介いたします。</dd>
104
+
105
+ </dl>
106
+
107
+ </a>
108
+
109
+ </div><!-- /.bnr-inner -->
110
+
111
+ <div class="bnr_inner">
112
+
113
+ <a href="contact.html">
114
+
115
+ <p><img src="img/bnr_contents_sub_contact_01.png" alt="お問い合わせ"></p>
116
+
117
+ </a>
118
+
119
+ </div><!-- /.bnr-inner -->
120
+
121
+ </aside>
122
+
123
+ </div><!-- /.contents-sub -->
124
+
125
+ </div><!-- /.contents -->
126
+
127
+
128
+
129
+ <footer class="ftr"><!-- 【フッター】 -->
130
+
131
+ <div id="topPage">
132
+
133
+ <a href="#top"><img class="icon-arrow"></a>
134
+
135
+ <p ><a href="#top">ページの先頭へ戻る</a></p>
136
+
137
+ </div>
138
+
139
+ <address>東京都千代田区X-X-X 電話 0120-000-XXXX 営業時間 11:00~20:00(水曜日定休日)</address>
140
+
141
+ <p id="copyright"><small>Copyright &copy;2014 HOTEL IMPERIA RESORT TOKYO All rights reserved.</small></p>
142
+
143
+ </footer><!-- /.ftr -->
144
+
145
+ </body><!-- /#base -->
146
+
147
+ </html>
148
+
17
149
  ```
18
150
 
19
- <!DOCTYPE html>
20
-
21
- <html lang="ja">
22
-
23
- <head>
24
-
25
- <meta charset="UTF-8">
26
-
27
- <meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0">
28
-
29
- <title>結婚式場のコンセプト|HOTEL IMPERIAL RESORT TOKYO</title>
30
-
31
- <link rel="stylesheet" href="css/normalize.css">
32
-
33
- <link rel="stylesheet" href="css/style.css">
34
-
35
- </head>
36
-
37
-
38
-
39
- <body id="base">
40
-
41
- <header id="top" class="hdr"><!-- 【ヘッダー】 -->
42
-
43
- <h1><a href="index.html"><img src="img/logo_01.png" alt="HOTEL IMPERIAL RESORT TOKYO"></a></h1>
44
-
45
- </header><!-- /#top .hdr -->
46
-
47
- <nav class="gnav" aria-label="グローバルナビゲーション"><!-- グローバルナビゲーション -->
48
-
49
- <ul class="wrap-list">
50
-
51
- <li id="nav_concept"><a href="concept.html">結婚式場のコンセプト</a></li>
52
-
53
- <li id="nav_plan"><a href="plan.html">プランのご案内</a></li>
54
-
55
- <li id="nav_fair"><a href="fair.html">ブライダルフェア</a></li>
56
-
57
- <li id="nav_contact"><a href="contact.html">お問い合わせ</a></li>
58
-
59
- </ul><!-- /.wrap-list -->
60
-
61
- </nav><!-- /.gnav -->
62
-
63
- <div id="breadcrumb">
64
-
65
- <ul>
66
-
67
- <li><a href="index.html">ホーム</a></li>
68
-
69
- <li>結婚式場のコンセプト</li>
70
-
71
- </ul>
72
-
73
- </div><!-- /#breadcrumb -->
74
-
75
- <div class="contents"><!-- 【コンテンツ】 -->
76
-
77
- <section class="contents-main"><!-- 【メインコンテンツ】 -->
78
-
79
- <article>
80
-
81
- <h2>結婚式場のコンセプト</h2>
82
-
83
- </article>
84
-
85
- </section><!-- /.contents-main -->
86
-
87
-
88
-
89
- <div class="contents-sub"><!-- 【サブコンテンツ】 -->
90
-
91
- <aside>
92
-
93
- <div class="bnr-inner">
94
-
95
- <a href="plan.html">
96
-
97
- <dl>
98
-
99
- <dt><img src="img/bnr_contents_sub_plan_01.jpg" alt="プランのご案内"></dt>
100
-
101
- <dd>標準のプランをご紹介いたします。</dd>
102
-
103
- </dl>
104
-
105
- </a>
106
-
107
- </div><!-- /.bnr-inner -->
108
-
109
- <div class="bnr_inner">
110
-
111
- <a href="contact.html">
112
-
113
- <p><img src="img/bnr_contents_sub_contact_01.png" alt="お問い合わせ"></p>
114
-
115
- </a>
116
-
117
- </div><!-- /.bnr-inner -->
118
-
119
- </aside>
120
-
121
- </div><!-- /.contents-sub -->
122
-
123
- </div><!-- /.contents -->
124
-
125
-
126
-
127
- <footer class="ftr"><!-- 【フッター】 -->
128
-
129
- <div id="topPage">
130
-
131
- <a href="#top"><img class="icon-arrow"></a>
132
-
133
- <p ><a href="#top">ページの先頭へ戻る</a></p>
134
-
135
- </div>
136
-
137
- <address>東京都千代田区X-X-X 電話 0120-000-XXXX 営業時間 11:00~20:00(水曜日定休日)</address>
138
-
139
- <p id="copyright"><small>Copyright &copy;2014 HOTEL IMPERIA RESORT TOKYO All rights reserved.</small></p>
140
-
141
- </footer><!-- /.ftr -->
142
-
143
- </body><!-- /#base -->
144
-
145
- </html>
151
+ ```ここに言語を入力
152
+
153
+ @charset "utf-8";
154
+
155
+
156
+
157
+ /* 【共通箇所・基本設定:ページ全体】 ここから↓ */
158
+
159
+ /* フォントサイズ */
160
+
161
+ html { font-size: 62.5%; } /* 62.5%:1em:10px */
162
+
163
+ body { font-size: 1.4rem; } /* =14px <p>や<a>などの設定。 */
164
+
165
+ h1 { font-size: 2.8rem; } /* =28px */
166
+
167
+ h2 { font-size: 2.1rem; } /* =21px */
168
+
169
+ h3 { font-size: 1.6rem; } /* =16px */
170
+
171
+ h4 { font-size: 1.4rem; } /* =14px <p>と同じ大きさ。 */
172
+
173
+
174
+
175
+ body {
176
+
177
+ background-color:#f3f2e9;
178
+
179
+ color: #5f5039;
180
+
181
+ line-height:1.5;
182
+
183
+ margin: 0 auto;
184
+
185
+ width: 84rem;
186
+
187
+ }
188
+
189
+
190
+
191
+ li {
192
+
193
+ list-style : none;
194
+
195
+ }
196
+
197
+
198
+
199
+
200
+
201
+ /* 【ヘッダー】 ここから↓ */
202
+
203
+ header h1 {
204
+
205
+ margin: 0 0 2.6rem 0;
206
+
207
+ padding-top: 2.8rem ;
208
+
209
+ text-align: center;
210
+
211
+ }
212
+
213
+
214
+
215
+
216
+
217
+ /* 【グローバルナビゲーション】 ここから↓
218
+
219
+  リストを横に並べる。 */
220
+
221
+ .wrap-list {
222
+
223
+ margin : 0 0 2rem 0;
224
+
225
+ overflow : hidden;
226
+
227
+ padding : 0;
228
+
229
+ }
230
+
231
+
232
+
233
+ .gnav li {
234
+
235
+ float : left;
236
+
237
+ width : 21rem;
238
+
239
+ }
240
+
241
+
242
+
243
+ /* グローバルナビゲーションのリンクに画像を指定する。 */
244
+
245
+ #nav_concept a {
246
+
247
+ background-image:url(../img/gnav_01.png);
248
+
249
+ }
250
+
251
+
252
+
253
+ #nav_plan a {
254
+
255
+ background-image:url(../img/gnav_02.png);
256
+
257
+ }
258
+
259
+
260
+
261
+ #nav_fair a {
262
+
263
+ background-image:url(../img/gnav_03.png);
264
+
265
+ }
266
+
267
+
268
+
269
+ #nav_contact a {
270
+
271
+ background-image:url(../img/gnav_04.png);
272
+
273
+ }
274
+
275
+
276
+
277
+ .gnav a {
278
+
279
+ overflow:hidden;
280
+
281
+ display:block;
282
+
283
+ padding-top:4.4rem;
284
+
285
+ height:0;
286
+
287
+ }
288
+
289
+
290
+
291
+ /* CSSスプライト */
292
+
293
+ #concept #nav_concept a,
294
+
295
+ #plan #nav_plan a,
296
+
297
+ #fair #nav_fair a,
298
+
299
+ #contact #nav_contact a,
300
+
301
+ nav a:hover {
302
+
303
+ background-position:0 -4.5rem;
304
+
305
+ }
306
+
307
+ /* 【グローバルナビゲーション】 ここまで↑ */
308
+
309
+
310
+
311
+
312
+
313
+ /* 【パンくずリスト】 ここから↓ */
314
+
315
+ #breadcrumb ul {
316
+
317
+ overflow:hidden;
318
+
319
+ padding-left:0;
320
+
321
+ }
322
+
323
+
324
+
325
+ #breadcrumb li {
326
+
327
+ float:left
328
+
329
+ }
330
+
331
+
332
+
333
+ #breadcrumb li:first-child {
334
+
335
+ margin-right:1rem;
336
+
337
+ }
338
+
339
+ /* 【パンくずリスト】 ここまで↑ */
340
+
341
+ /* 【ヘッダー】 ここまで↑ */
342
+
343
+
344
+
345
+
346
+
347
+ /* 【コンテンツ】 ここから↓
348
+
349
+ メインコンテンツとサブコンテンツを横に並べる。 */
350
+
351
+ .contents {
352
+
353
+ overflow:hidden;
354
+
355
+ }
356
+
357
+
358
+
359
+ .contents-main {
360
+
361
+ float:left;
362
+
363
+ width:57rem;
364
+
365
+ }
366
+
367
+
368
+
369
+ .contents-sub {
370
+
371
+ float:right;
372
+
373
+ width:23rem;
374
+
375
+ }
376
+
377
+
378
+
379
+ .contents-main h2 {
380
+
381
+ margin: 0 0 3rem 0;
382
+
383
+ padding: 3.5rem 0 3.5rem 6rem;
384
+
385
+ font-size:140%;
386
+
387
+ background-image:url(../img/bg_h2_top_01.png),url(../img/bg_h2_bottom_01.png);
388
+
389
+ background-repeat:no-repeat,no-repeat;
390
+
391
+ background-position:left top, left bottom;
392
+
393
+ }
394
+
395
+ /* 【コンテンツ】 ここまで↑ */
396
+
397
+
398
+
399
+
400
+
401
+ /* 【サブコンテンツ】 ここから↓ */
402
+
403
+ .bnr_inner img:hover {
404
+
405
+ opacity:.8;
406
+
407
+ }
408
+
409
+
410
+
411
+ .bnr-inner dd {
412
+
413
+ margin-left: .5rem;
414
+
415
+ }
416
+
417
+ /* 【サブコンテンツ】 ここまで↑ */
418
+
419
+
420
+
421
+
422
+
423
+ /* 【フッター】 */
424
+
425
+ .ftr {
426
+
427
+ margin-top: 7rem;
428
+
429
+ }
430
+
431
+
432
+
433
+ /* 「ページの先頭へ戻る」
434
+
435
+ 右によせる。 */
436
+
437
+ #topPage {
438
+
439
+ float:right;
440
+
441
+ }
442
+
443
+
444
+
445
+ .ftr address {
446
+
447
+ clear:both;
448
+
449
+ }
450
+
451
+
452
+
453
+ /* 矢印の画像を配置する。 */
454
+
455
+
456
+
457
+ .icon-arrow {
458
+
459
+ background-image:url(../img/icon_ftr_arrow_01.png);
460
+
461
+ background-repeat:no-repeat;
462
+
463
+ width:2.1rem;
464
+
465
+ height:2.8rem;
466
+
467
+
468
+
469
+
470
+
471
+ }
472
+
473
+ /* 【フッター】 ここまで↑ */ 
474
+
475
+ /* 【共通箇所・基本設定:ページ全体】 ここまで↑ */
146
476
 
147
477
  ```
148
-
149
- ```
150
-
151
- @charset "utf-8";
152
-
153
-
154
-
155
- /* 【共通箇所・基本設定:ページ全体】 ここから↓ */
156
-
157
- /* フォントサイズ */
158
-
159
- html { font-size: 62.5%; } /* 62.5%:1em:10px */
160
-
161
- body { font-size: 1.4rem; } /* =14px <p>や<a>などの設定。 */
162
-
163
- h1 { font-size: 2.8rem; } /* =28px */
164
-
165
- h2 { font-size: 2.1rem; } /* =21px */
166
-
167
- h3 { font-size: 1.6rem; } /* =16px */
168
-
169
- h4 { font-size: 1.4rem; } /* =14px <p>と同じ大きさ。 */
170
-
171
-
172
-
173
- body {
174
-
175
- background-color:#f3f2e9;
176
-
177
- color: #5f5039;
178
-
179
- line-height:1.5;
180
-
181
- margin: 0 auto;
182
-
183
- width: 84rem;
184
-
185
- }
186
-
187
-
188
-
189
- li {
190
-
191
- list-style : none;
192
-
193
- }
194
-
195
-
196
-
197
-
198
-
199
- /* 【ヘッダー】 ここから↓ */
200
-
201
- header h1 {
202
-
203
- margin: 0 0 2.6rem 0;
204
-
205
- padding-top: 2.8rem ;
206
-
207
- text-align: center;
208
-
209
- }
210
-
211
-
212
-
213
-
214
-
215
- /* 【グローバルナビゲーション】 ここから↓
216
-
217
-  リストを横に並べる。 */
218
-
219
- .wrap-list {
220
-
221
- margin : 0 0 2rem 0;
222
-
223
- overflow : hidden;
224
-
225
- padding : 0;
226
-
227
- }
228
-
229
-
230
-
231
- .gnav li {
232
-
233
- float : left;
234
-
235
- width : 21rem;
236
-
237
- }
238
-
239
-
240
-
241
- /* グローバルナビゲーションのリンクに画像を指定する。 */
242
-
243
- #nav_concept a {
244
-
245
- background-image:url(../img/gnav_01.png);
246
-
247
- }
248
-
249
-
250
-
251
- #nav_plan a {
252
-
253
- background-image:url(../img/gnav_02.png);
254
-
255
- }
256
-
257
-
258
-
259
- #nav_fair a {
260
-
261
- background-image:url(../img/gnav_03.png);
262
-
263
- }
264
-
265
-
266
-
267
- #nav_contact a {
268
-
269
- background-image:url(../img/gnav_04.png);
270
-
271
- }
272
-
273
-
274
-
275
- .gnav a {
276
-
277
- overflow:hidden;
278
-
279
- display:block;
280
-
281
- padding-top:4.4rem;
282
-
283
- height:0;
284
-
285
- }
286
-
287
-
288
-
289
- /* CSSスプライト */
290
-
291
- #concept #nav_concept a,
292
-
293
- #plan #nav_plan a,
294
-
295
- #fair #nav_fair a,
296
-
297
- #contact #nav_contact a,
298
-
299
- nav a:hover {
300
-
301
- background-position:0 -4.5rem;
302
-
303
- }
304
-
305
- /* 【グローバルナビゲーション】 ここまで↑ */
306
-
307
-
308
-
309
-
310
-
311
- /* 【パンくずリスト】 ここから↓ */
312
-
313
- #breadcrumb ul {
314
-
315
- overflow:hidden;
316
-
317
- padding-left:0;
318
-
319
- }
320
-
321
-
322
-
323
- #breadcrumb li {
324
-
325
- float:left
326
-
327
- }
328
-
329
-
330
-
331
- #breadcrumb li:first-child {
332
-
333
- margin-right:1rem;
334
-
335
- }
336
-
337
- /* 【パンくずリスト】 ここまで↑ */
338
-
339
- /* 【ヘッダー】 ここまで↑ */
340
-
341
-
342
-
343
-
344
-
345
- /* 【コンテンツ】 ここから↓
346
-
347
- メインコンテンツとサブコンテンツを横に並べる。 */
348
-
349
- .contents {
350
-
351
- overflow:hidden;
352
-
353
- }
354
-
355
-
356
-
357
- .contents-main {
358
-
359
- float:left;
360
-
361
- width:57rem;
362
-
363
- }
364
-
365
-
366
-
367
- .contents-sub {
368
-
369
- float:right;
370
-
371
- width:23rem;
372
-
373
- }
374
-
375
-
376
-
377
- .contents-main h2 {
378
-
379
- margin: 0 0 3rem 0;
380
-
381
- padding: 3.5rem 0 3.5rem 6rem;
382
-
383
- font-size:140%;
384
-
385
- background-image:url(../img/bg_h2_top_01.png),url(../img/bg_h2_bottom_01.png);
386
-
387
- background-repeat:no-repeat,no-repeat;
388
-
389
- background-position:left top, left bottom;
390
-
391
- }
392
-
393
- /* 【コンテンツ】 ここまで↑ */
394
-
395
-
396
-
397
-
398
-
399
- /* 【サブコンテンツ】 ここから↓ */
400
-
401
- .bnr_inner img:hover {
402
-
403
- opacity:.8;
404
-
405
- }
406
-
407
-
408
-
409
- .bnr-inner dd {
410
-
411
- margin-left: .5rem;
412
-
413
- }
414
-
415
- /* 【サブコンテンツ】 ここまで↑ */
416
-
417
-
418
-
419
-
420
-
421
- /* 【フッター】 */
422
-
423
- .ftr {
424
-
425
- margin-top: 7rem;
426
-
427
- }
428
-
429
-
430
-
431
- /* 「ページの先頭へ戻る」
432
-
433
- 右によせる。 */
434
-
435
- #topPage {
436
-
437
- float:right;
438
-
439
- }
440
-
441
-
442
-
443
- .ftr address {
444
-
445
- clear:both;
446
-
447
- }
448
-
449
-
450
-
451
- /* 矢印の画像を配置する。 */
452
-
453
-
454
-
455
- .icon-arrow {
456
-
457
- background-image:url(../img/icon_ftr_arrow_01.png);
458
-
459
- background-repeat:no-repeat;
460
-
461
- width:2.1rem;
462
-
463
- height:2.8rem;
464
-
465
-
466
-
467
-
468
-
469
- }
470
-
471
- /* 【フッター】 ここまで↑ */ 
472
-
473
- /* 【共通箇所・基本設定:ページ全体】 ここまで↑ */

5

HTMLとCSSを編集

2019/07/12 08:33

投稿

taka_oct092018
taka_oct092018

スコア133

test CHANGED
File without changes
test CHANGED
@@ -144,10 +144,10 @@
144
144
 
145
145
  </html>
146
146
 
147
-
148
-
149
147
  ```
150
148
 
149
+ ```
150
+
151
151
  @charset "utf-8";
152
152
 
153
153
 
@@ -471,15 +471,3 @@
471
471
  /* 【フッター】 ここまで↑ */ 
472
472
 
473
473
  /* 【共通箇所・基本設定:ページ全体】 ここまで↑ */
474
-
475
-
476
-
477
- ```
478
-
479
-
480
-
481
-
482
-
483
-
484
-
485
- ```

4

HTMLとCSSを編集

2019/07/12 08:31

投稿

taka_oct092018
taka_oct092018

スコア133

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,8 @@
10
10
 
11
11
  2.<img>による記述
12
12
 
13
+ 3.HTMLとCSSを編集
14
+
13
15
 
14
16
 
15
17
  ```
@@ -124,7 +126,13 @@
124
126
 
125
127
  <footer class="ftr"><!-- 【フッター】 -->
126
128
 
129
+ <div id="topPage">
130
+
131
+ <a href="#top"><img class="icon-arrow"></a>
132
+
127
- <p id="topPage"><a href="#top">ページの先頭へ戻る</a></p>
133
+ <p ><a href="#top">ページの先頭へ戻る</a></p>
134
+
135
+ </div>
128
136
 
129
137
  <address>東京都千代田区X-X-X 電話 0120-000-XXXX 営業時間 11:00~20:00(水曜日定休日)</address>
130
138
 
@@ -136,335 +144,341 @@
136
144
 
137
145
  </html>
138
146
 
147
+
148
+
139
149
  ```
140
150
 
141
-
151
+ @charset "utf-8";
152
+
153
+
154
+
155
+ /* 【共通箇所・基本設定:ページ全体】 ここから↓ */
156
+
157
+ /* フォントサイズ */
158
+
159
+ html { font-size: 62.5%; } /* 62.5%:1em:10px */
160
+
161
+ body { font-size: 1.4rem; } /* =14px <p>や<a>などの設定。 */
162
+
163
+ h1 { font-size: 2.8rem; } /* =28px */
164
+
165
+ h2 { font-size: 2.1rem; } /* =21px */
166
+
167
+ h3 { font-size: 1.6rem; } /* =16px */
168
+
169
+ h4 { font-size: 1.4rem; } /* =14px <p>と同じ大きさ。 */
170
+
171
+
172
+
173
+ body {
174
+
175
+ background-color:#f3f2e9;
176
+
177
+ color: #5f5039;
178
+
179
+ line-height:1.5;
180
+
181
+ margin: 0 auto;
182
+
183
+ width: 84rem;
184
+
185
+ }
186
+
187
+
188
+
189
+ li {
190
+
191
+ list-style : none;
192
+
193
+ }
194
+
195
+
196
+
197
+
198
+
199
+ /* 【ヘッダー】 ここから↓ */
200
+
201
+ header h1 {
202
+
203
+ margin: 0 0 2.6rem 0;
204
+
205
+ padding-top: 2.8rem ;
206
+
207
+ text-align: center;
208
+
209
+ }
210
+
211
+
212
+
213
+
214
+
215
+ /* 【グローバルナビゲーション】 ここから↓
216
+
217
+  リストを横に並べる。 */
218
+
219
+ .wrap-list {
220
+
221
+ margin : 0 0 2rem 0;
222
+
223
+ overflow : hidden;
224
+
225
+ padding : 0;
226
+
227
+ }
228
+
229
+
230
+
231
+ .gnav li {
232
+
233
+ float : left;
234
+
235
+ width : 21rem;
236
+
237
+ }
238
+
239
+
240
+
241
+ /* グローバルナビゲーションのリンクに画像を指定する。 */
242
+
243
+ #nav_concept a {
244
+
245
+ background-image:url(../img/gnav_01.png);
246
+
247
+ }
248
+
249
+
250
+
251
+ #nav_plan a {
252
+
253
+ background-image:url(../img/gnav_02.png);
254
+
255
+ }
256
+
257
+
258
+
259
+ #nav_fair a {
260
+
261
+ background-image:url(../img/gnav_03.png);
262
+
263
+ }
264
+
265
+
266
+
267
+ #nav_contact a {
268
+
269
+ background-image:url(../img/gnav_04.png);
270
+
271
+ }
272
+
273
+
274
+
275
+ .gnav a {
276
+
277
+ overflow:hidden;
278
+
279
+ display:block;
280
+
281
+ padding-top:4.4rem;
282
+
283
+ height:0;
284
+
285
+ }
286
+
287
+
288
+
289
+ /* CSSスプライト */
290
+
291
+ #concept #nav_concept a,
292
+
293
+ #plan #nav_plan a,
294
+
295
+ #fair #nav_fair a,
296
+
297
+ #contact #nav_contact a,
298
+
299
+ nav a:hover {
300
+
301
+ background-position:0 -4.5rem;
302
+
303
+ }
304
+
305
+ /* 【グローバルナビゲーション】 ここまで↑ */
306
+
307
+
308
+
309
+
310
+
311
+ /* 【パンくずリスト】 ここから↓ */
312
+
313
+ #breadcrumb ul {
314
+
315
+ overflow:hidden;
316
+
317
+ padding-left:0;
318
+
319
+ }
320
+
321
+
322
+
323
+ #breadcrumb li {
324
+
325
+ float:left
326
+
327
+ }
328
+
329
+
330
+
331
+ #breadcrumb li:first-child {
332
+
333
+ margin-right:1rem;
334
+
335
+ }
336
+
337
+ /* 【パンくずリスト】 ここまで↑ */
338
+
339
+ /* 【ヘッダー】 ここまで↑ */
340
+
341
+
342
+
343
+
344
+
345
+ /* 【コンテンツ】 ここから↓
346
+
347
+ メインコンテンツとサブコンテンツを横に並べる。 */
348
+
349
+ .contents {
350
+
351
+ overflow:hidden;
352
+
353
+ }
354
+
355
+
356
+
357
+ .contents-main {
358
+
359
+ float:left;
360
+
361
+ width:57rem;
362
+
363
+ }
364
+
365
+
366
+
367
+ .contents-sub {
368
+
369
+ float:right;
370
+
371
+ width:23rem;
372
+
373
+ }
374
+
375
+
376
+
377
+ .contents-main h2 {
378
+
379
+ margin: 0 0 3rem 0;
380
+
381
+ padding: 3.5rem 0 3.5rem 6rem;
382
+
383
+ font-size:140%;
384
+
385
+ background-image:url(../img/bg_h2_top_01.png),url(../img/bg_h2_bottom_01.png);
386
+
387
+ background-repeat:no-repeat,no-repeat;
388
+
389
+ background-position:left top, left bottom;
390
+
391
+ }
392
+
393
+ /* 【コンテンツ】 ここまで↑ */
394
+
395
+
396
+
397
+
398
+
399
+ /* 【サブコンテンツ】 ここから↓ */
400
+
401
+ .bnr_inner img:hover {
402
+
403
+ opacity:.8;
404
+
405
+ }
406
+
407
+
408
+
409
+ .bnr-inner dd {
410
+
411
+ margin-left: .5rem;
412
+
413
+ }
414
+
415
+ /* 【サブコンテンツ】 ここまで↑ */
416
+
417
+
418
+
419
+
420
+
421
+ /* 【フッター】 */
422
+
423
+ .ftr {
424
+
425
+ margin-top: 7rem;
426
+
427
+ }
428
+
429
+
430
+
431
+ /* 「ページの先頭へ戻る」
432
+
433
+ 右によせる。 */
434
+
435
+ #topPage {
436
+
437
+ float:right;
438
+
439
+ }
440
+
441
+
442
+
443
+ .ftr address {
444
+
445
+ clear:both;
446
+
447
+ }
448
+
449
+
450
+
451
+ /* 矢印の画像を配置する。 */
452
+
453
+
454
+
455
+ .icon-arrow {
456
+
457
+ background-image:url(../img/icon_ftr_arrow_01.png);
458
+
459
+ background-repeat:no-repeat;
460
+
461
+ width:2.1rem;
462
+
463
+ height:2.8rem;
464
+
465
+
466
+
467
+
468
+
469
+ }
470
+
471
+ /* 【フッター】 ここまで↑ */ 
472
+
473
+ /* 【共通箇所・基本設定:ページ全体】 ここまで↑ */
142
474
 
143
475
 
144
476
 
145
477
  ```
146
478
 
147
- @charset "utf-8";
479
+
148
-
149
-
150
-
151
- /* 【共通箇所・基本設定:ページ全体】 ここから↓ */
480
+
152
-
153
- /* フォントサイズ */
481
+
154
-
155
- html { font-size: 62.5%; } /* 62.5%:1em:10px */
156
-
157
- body { font-size: 1.4rem; } /* =14px <p>や<a>などの設定。 */
158
-
159
- h1 { font-size: 2.8rem; } /* =28px */
160
-
161
- h2 { font-size: 2.1rem; } /* =21px */
162
-
163
- h3 { font-size: 1.6rem; } /* =16px */
164
-
165
- h4 { font-size: 1.4rem; } /* =14px <p>と同じ大きさ。 */
166
-
167
-
168
-
169
- body {
170
-
171
- background-color:#f3f2e9;
172
-
173
- color: #5f5039;
174
-
175
- line-height:1.5;
176
-
177
- margin: 0 auto;
178
-
179
- width: 84rem;
180
-
181
- }
182
-
183
-
184
-
185
- li {
186
-
187
- list-style : none;
188
-
189
- }
190
-
191
-
192
-
193
-
194
-
195
- /* 【ヘッダー】 ここから↓ */
196
-
197
- header h1 {
198
-
199
- margin: 0 0 2.6rem 0;
200
-
201
- padding-top: 2.8rem ;
202
-
203
- text-align: center;
204
-
205
- }
206
-
207
-
208
-
209
-
210
-
211
- /* 【グローバルナビゲーション】 ここから↓
212
-
213
-  リストを横に並べる。 */
214
-
215
- .wrap-list {
216
-
217
- margin : 0 0 2rem 0;
218
-
219
- overflow : hidden;
220
-
221
- padding : 0;
222
-
223
- }
224
-
225
-
226
-
227
- .gnav li {
228
-
229
- float : left;
230
-
231
- width : 21rem;
232
-
233
- }
234
-
235
-
236
-
237
- /* グローバルナビゲーションのリンクに画像を指定する。 */
238
-
239
- #nav_concept a {
240
-
241
- background-image:url(../img/gnav_01.png);
242
-
243
- }
244
-
245
-
246
-
247
- #nav_plan a {
248
-
249
- background-image:url(../img/gnav_02.png);
250
-
251
- }
252
-
253
-
254
-
255
- #nav_fair a {
256
-
257
- background-image:url(../img/gnav_03.png);
258
-
259
- }
260
-
261
-
262
-
263
- #nav_contact a {
264
-
265
- background-image:url(../img/gnav_04.png);
266
-
267
- }
268
-
269
-
270
-
271
- .gnav a {
272
-
273
- overflow:hidden;
274
-
275
- display:block;
276
-
277
- padding-top:4.4rem;
278
-
279
- height:0;
280
-
281
- }
282
-
283
-
284
-
285
- /* CSSスプライト */
286
-
287
- #concept #nav_concept a,
288
-
289
- #plan #nav_plan a,
290
-
291
- #fair #nav_fair a,
292
-
293
- #contact #nav_contact a,
294
-
295
- nav a:hover {
296
-
297
- background-position:0 -4.5rem;
298
-
299
- }
300
-
301
- /* 【グローバルナビゲーション】 ここまで↑ */
302
-
303
-
304
-
305
-
306
-
307
- /* 【パンくずリスト】 ここから↓ */
308
-
309
- #breadcrumb ul {
310
-
311
- overflow:hidden;
312
-
313
- padding-left:0;
314
-
315
- }
316
-
317
-
318
-
319
- #breadcrumb li {
320
-
321
- float:left
322
-
323
- }
324
-
325
-
326
-
327
- #breadcrumb li:first-child {
328
-
329
- margin-right:1rem;
330
-
331
- }
332
-
333
- /* 【パンくずリスト】 ここまで↑ */
334
-
335
- /* 【ヘッダー】 ここまで↑ */
336
-
337
-
338
-
339
-
340
-
341
- /* 【コンテンツ】 ここから↓
342
-
343
- メインコンテンツとサブコンテンツを横に並べる。 */
344
-
345
- .contents {
346
-
347
- overflow:hidden;
348
-
349
- }
350
-
351
-
352
-
353
- .contents-main {
354
-
355
- float:left;
356
-
357
- width:57rem;
358
-
359
- }
360
-
361
-
362
-
363
- .contents-sub {
364
-
365
- float:right;
366
-
367
- width:23rem;
368
-
369
- }
370
-
371
-
372
-
373
- .contents-main h2 {
374
-
375
- margin: 0 0 3rem 0;
376
-
377
- padding: 3.5rem 0 3.5rem 6rem;
378
-
379
- font-size:140%;
380
-
381
- background-image:url(../img/bg_h2_top_01.png),url(../img/bg_h2_bottom_01.png);
382
-
383
- background-repeat:no-repeat,no-repeat;
384
-
385
- background-position:left top, left bottom;
386
-
387
- }
388
-
389
- /* 【コンテンツ】 ここまで↑ */
390
-
391
-
392
-
393
-
394
-
395
- /* 【サブコンテンツ】 ここから↓ */
396
-
397
- .bnr_inner img:hover {
398
-
399
- opacity:.8;
400
-
401
- }
402
-
403
-
404
-
405
- .bnr-inner dd {
406
-
407
- margin-left: .5rem;
408
-
409
- }
410
-
411
- /* 【サブコンテンツ】 ここまで↑ */
412
-
413
-
414
-
415
-
416
-
417
- /* 【フッター】 */
418
-
419
- .ftr {
420
-
421
- margin-top: 7rem;
422
-
423
- }
424
-
425
-
426
-
427
- /* 「ページの先頭へ戻る」
428
-
429
- 右によせる。 */
430
-
431
- #topPage {
432
-
433
- float:right;
434
-
435
- }
436
-
437
-
438
-
439
- .ftr address {
440
-
441
- clear:both;
442
-
443
- }
444
-
445
-
446
-
447
- /* 矢印の画像を配置する。 */
448
-
449
- #topPage a {
450
-
451
- display:block;
452
-
453
- min-height:1.6rem;
454
-
455
- padding:.6rem 0 0 2.8rem;
456
-
457
- background-image:url(../img/icon_ftr_arrow_01.png);
458
-
459
- background-repeat:no-repeat;
460
-
461
- background-position:left bottom;
462
-
463
- }
464
-
465
- /* 【フッター】 ここまで↑ */ 
466
-
467
- /* 【共通箇所・基本設定:ページ全体】 ここまで↑ */
468
482
 
469
483
 
470
484
 

3

これまで試みた点

2019/07/12 08:28

投稿

taka_oct092018
taka_oct092018

スコア133

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,12 @@
4
4
 
5
5
 
6
6
 
7
+ これまで試みた点
8
+
9
+ 1.フレックスレイアウト
10
+
11
+ 2.<img>による記述
12
+
7
13
 
8
14
 
9
15
  ```

2

コードをファイルごとに分割した。

2019/07/11 03:54

投稿

taka_oct092018
taka_oct092018

スコア133

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
 
6
6
 
7
+
8
+
7
9
  ```
8
10
 
9
11
  <!DOCTYPE html>
@@ -130,6 +132,12 @@
130
132
 
131
133
  ```
132
134
 
135
+
136
+
137
+
138
+
139
+ ```
140
+
133
141
  @charset "utf-8";
134
142
 
135
143
 
@@ -194,7 +202,97 @@
194
202
 
195
203
 
196
204
 
197
-
205
+ /* 【グローバルナビゲーション】 ここから↓
206
+
207
+  リストを横に並べる。 */
208
+
209
+ .wrap-list {
210
+
211
+ margin : 0 0 2rem 0;
212
+
213
+ overflow : hidden;
214
+
215
+ padding : 0;
216
+
217
+ }
218
+
219
+
220
+
221
+ .gnav li {
222
+
223
+ float : left;
224
+
225
+ width : 21rem;
226
+
227
+ }
228
+
229
+
230
+
231
+ /* グローバルナビゲーションのリンクに画像を指定する。 */
232
+
233
+ #nav_concept a {
234
+
235
+ background-image:url(../img/gnav_01.png);
236
+
237
+ }
238
+
239
+
240
+
241
+ #nav_plan a {
242
+
243
+ background-image:url(../img/gnav_02.png);
244
+
245
+ }
246
+
247
+
248
+
249
+ #nav_fair a {
250
+
251
+ background-image:url(../img/gnav_03.png);
252
+
253
+ }
254
+
255
+
256
+
257
+ #nav_contact a {
258
+
259
+ background-image:url(../img/gnav_04.png);
260
+
261
+ }
262
+
263
+
264
+
265
+ .gnav a {
266
+
267
+ overflow:hidden;
268
+
269
+ display:block;
270
+
271
+ padding-top:4.4rem;
272
+
273
+ height:0;
274
+
275
+ }
276
+
277
+
278
+
279
+ /* CSSスプライト */
280
+
281
+ #concept #nav_concept a,
282
+
283
+ #plan #nav_plan a,
284
+
285
+ #fair #nav_fair a,
286
+
287
+ #contact #nav_contact a,
288
+
289
+ nav a:hover {
290
+
291
+ background-position:0 -4.5rem;
292
+
293
+ }
294
+
295
+ /* 【グローバルナビゲーション】 ここまで↑ */
198
296
 
199
297
 
200
298
 
@@ -365,7 +463,3 @@
365
463
 
366
464
 
367
465
  ```
368
-
369
-
370
-
371
- ```

1

コードをファイルごとに分割した。

2019/07/10 08:34

投稿

taka_oct092018
taka_oct092018

スコア133

test CHANGED
File without changes
test CHANGED
@@ -6,8 +6,6 @@
6
6
 
7
7
  ```
8
8
 
9
- (HTML)
10
-
11
9
  <!DOCTYPE html>
12
10
 
13
11
  <html lang="ja">
@@ -130,9 +128,7 @@
130
128
 
131
129
  </html>
132
130
 
133
-
134
-
135
- (CSS)
131
+ ```
136
132
 
137
133
  @charset "utf-8";
138
134
 
@@ -198,230 +194,158 @@
198
194
 
199
195
 
200
196
 
201
- /* 【グローバルナビゲーション】 ここから↓
197
+
202
-
203
-  リストを横に並べる。 */
198
+
204
-
205
- .wrap-list {
199
+
206
-
207
- margin : 0 0 2rem 0;
200
+
208
-
209
- overflow : hidden;
201
+
210
-
211
- padding : 0;
202
+
212
-
213
- }
214
-
215
-
216
-
217
- .gnav li {
218
-
219
- float : left;
220
-
221
- width : 21rem;
222
-
223
- }
224
-
225
-
226
-
227
- /* グローバルナビゲーションクに画像を指定する。 */
203
+ /* 【パくずスト】 ここから↓ */
228
-
229
- #nav_concept a {
204
+
230
-
231
- background-image:url(../img/gnav_01.png);
232
-
233
- }
234
-
235
-
236
-
237
- #nav_plan a {
205
+ #breadcrumb ul {
238
-
239
- background-image:url(../img/gnav_02.png);
240
-
241
- }
242
-
243
-
244
-
245
- #nav_fair a {
246
-
247
- background-image:url(../img/gnav_03.png);
248
-
249
- }
250
-
251
-
252
-
253
- #nav_contact a {
254
-
255
- background-image:url(../img/gnav_04.png);
256
-
257
- }
258
-
259
-
260
-
261
- .gnav a {
262
206
 
263
207
  overflow:hidden;
264
208
 
209
+ padding-left:0;
210
+
211
+ }
212
+
213
+
214
+
215
+ #breadcrumb li {
216
+
217
+ float:left
218
+
219
+ }
220
+
221
+
222
+
223
+ #breadcrumb li:first-child {
224
+
225
+ margin-right:1rem;
226
+
227
+ }
228
+
229
+ /* 【パンくずリスト】 ここまで↑ */
230
+
231
+ /* 【ヘッダー】 ここまで↑ */
232
+
233
+
234
+
235
+
236
+
237
+ /* 【コンテンツ】 ここから↓
238
+
239
+ メインコンテンツとサブコンテンツを横に並べる。 */
240
+
241
+ .contents {
242
+
243
+ overflow:hidden;
244
+
245
+ }
246
+
247
+
248
+
249
+ .contents-main {
250
+
251
+ float:left;
252
+
253
+ width:57rem;
254
+
255
+ }
256
+
257
+
258
+
259
+ .contents-sub {
260
+
261
+ float:right;
262
+
263
+ width:23rem;
264
+
265
+ }
266
+
267
+
268
+
269
+ .contents-main h2 {
270
+
271
+ margin: 0 0 3rem 0;
272
+
273
+ padding: 3.5rem 0 3.5rem 6rem;
274
+
275
+ font-size:140%;
276
+
277
+ background-image:url(../img/bg_h2_top_01.png),url(../img/bg_h2_bottom_01.png);
278
+
279
+ background-repeat:no-repeat,no-repeat;
280
+
281
+ background-position:left top, left bottom;
282
+
283
+ }
284
+
285
+ /* 【コンテンツ】 ここまで↑ */
286
+
287
+
288
+
289
+
290
+
291
+ /* 【サブコンテンツ】 ここから↓ */
292
+
293
+ .bnr_inner img:hover {
294
+
295
+ opacity:.8;
296
+
297
+ }
298
+
299
+
300
+
301
+ .bnr-inner dd {
302
+
303
+ margin-left: .5rem;
304
+
305
+ }
306
+
307
+ /* 【サブコンテンツ】 ここまで↑ */
308
+
309
+
310
+
311
+
312
+
313
+ /* 【フッター】 */
314
+
315
+ .ftr {
316
+
317
+ margin-top: 7rem;
318
+
319
+ }
320
+
321
+
322
+
323
+ /* 「ページの先頭へ戻る」
324
+
325
+ 右によせる。 */
326
+
327
+ #topPage {
328
+
329
+ float:right;
330
+
331
+ }
332
+
333
+
334
+
335
+ .ftr address {
336
+
337
+ clear:both;
338
+
339
+ }
340
+
341
+
342
+
343
+ /* 矢印の画像を配置する。 */
344
+
345
+ #topPage a {
346
+
265
347
  display:block;
266
348
 
267
- padding-top:4.4rem;
268
-
269
- height:0;
270
-
271
- }
272
-
273
- /* 【グローバルナビゲーション】 ここまで↑ */
274
-
275
-
276
-
277
-
278
-
279
- /* 【パンくずリスト】 ここから↓ */
280
-
281
- #breadcrumb ul {
282
-
283
- overflow:hidden;
284
-
285
- padding-left:0;
286
-
287
- }
288
-
289
-
290
-
291
- #breadcrumb li {
292
-
293
- float:left
294
-
295
- }
296
-
297
-
298
-
299
- #breadcrumb li:first-child {
300
-
301
- margin-right:1rem;
302
-
303
- }
304
-
305
- /* 【パンくずリスト】 ここまで↑ */
306
-
307
- /* 【ヘッダー】 ここまで↑ */
308
-
309
-
310
-
311
-
312
-
313
- /* 【コンテンツ】 ここから↓
314
-
315
- メインコンテンツとサブコンテンツを横に並べる。 */
316
-
317
- .contents {
318
-
319
- overflow:hidden;
320
-
321
- }
322
-
323
-
324
-
325
- .contents-main {
326
-
327
- float:left;
328
-
329
- width:57rem;
330
-
331
- }
332
-
333
-
334
-
335
- .contents-sub {
336
-
337
- float:right;
338
-
339
- width:23rem;
340
-
341
- }
342
-
343
-
344
-
345
- .contents-main h2 {
346
-
347
- margin: 0 0 3rem 0;
348
-
349
- padding: 3.5rem 0 3.5rem 6rem;
350
-
351
- font-size:140%;
352
-
353
- background-image:url(../img/bg_h2_top_01.png),url(../img/bg_h2_bottom_01.png);
354
-
355
- background-repeat:no-repeat,no-repeat;
356
-
357
- background-position:left top, left bottom;
358
-
359
- }
360
-
361
- /* 【コンテンツ】 ここまで↑ */
362
-
363
-
364
-
365
-
366
-
367
- /* 【サブコンテンツ】 ここから↓ */
368
-
369
- .bnr_inner img:hover {
370
-
371
- opacity:.8;
372
-
373
- }
374
-
375
-
376
-
377
- .bnr-inner dd {
378
-
379
- margin-left: .5rem;
380
-
381
- }
382
-
383
- /* 【サブコンテンツ】 ここまで↑ */
384
-
385
-
386
-
387
-
388
-
389
- /* 【フッター】 */
390
-
391
- .ftr {
392
-
393
- margin-top: 7rem;
394
-
395
- }
396
-
397
-
398
-
399
- /* 「ページの先頭へ戻る」
400
-
401
- 右によせる。 */
402
-
403
- #topPage {
404
-
405
- float:right;
406
-
407
- }
408
-
409
-
410
-
411
- .ftr address {
412
-
413
- clear:both;
414
-
415
- }
416
-
417
-
418
-
419
- /* 矢印の画像を配置する。 */
420
-
421
- #topPage a {
422
-
423
- display:block;
424
-
425
349
  min-height:1.6rem;
426
350
 
427
351
  padding:.6rem 0 0 2.8rem;
@@ -440,8 +364,8 @@
440
364
 
441
365
 
442
366
 
443
-
444
-
445
-
446
-
447
367
  ```
368
+
369
+
370
+
371
+ ```