-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
483 lines (463 loc) · 48.3 KB
/
index.html
File metadata and controls
483 lines (463 loc) · 48.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<title>
作って学ぶ HTML＆CSSモダンコーディング
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha256-H0KfTigpUV+0/5tn2HXC0CPwhhDhWgSawJdnFd0CGCo=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.1.3/css/fork-awesome.min.css" integrity="sha256-ZhApazu+kejqTYhMF+1DzNKjIzP7KXu6AzyXcC1gMus=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" integrity="sha256-3iu9jgsy9TpTwXKb7bNQzqWekRX7pPK+2OLj3R922fo=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css" integrity="sha256-vtR0hSWRc3Tb26iuN2oZHt3KRUomwTufNIf5/4oeCyg=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github-gist.min.css" integrity="sha256-tAflq+ymku3Khs+I/WcAneIlafYgDiOQ9stIHH985Wo=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/css/basic/emojify.min.css" integrity="sha256-UOrvMOsSDSrW6szVLe8ZDZezBxh5IoIfgTwdNDgTjiU=" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400,700,900&display=swap" rel="stylesheet">
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,300italic,300,700|Source+Serif+Pro|Source+Code+Pro:400,300,500&subset=latin,latin-ext);.markdown-body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body:after,.markdown-body:before{display:table;content:""}.markdown-body:after{clear:both}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:#c00}.markdown-body .anchor{float:left;padding-right:4px;margin-left:-20px;line-height:1}.markdown-body .anchor:focus{outline:none}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body hr{height:.25em;padding:0;margin:24px 0;background-color:#e7e7e7;border:0}.markdown-body blockquote{padding:0 1em;color:#777;border-left:.25em solid #ddd}.night .markdown-body blockquote{color:#bcbcbc}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body .loweralpha{list-style-type:lower-alpha}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.night .markdown-body h1,.night .markdown-body h2,.night .markdown-body h3,.night .markdown-body h4,.night .markdown-body h5,.night .markdown-body h6{color:#ddd}.markdown-body h1 .fa-link,.markdown-body h2 .fa-link,.markdown-body h3 .fa-link,.markdown-body h4 .fa-link,.markdown-body h5 .fa-link,.markdown-body h6 .fa-link{color:#000;vertical-align:middle;visibility:hidden;font-size:16px}.night .markdown-body h1 .fa-link,.night .markdown-body h2 .fa-link,.night .markdown-body h3 .fa-link,.night .markdown-body h4 .fa-link,.night .markdown-body h5 .fa-link,.night .markdown-body h6 .fa-link{color:#fff}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .fa-link,.markdown-body h2:hover .anchor .fa-link,.markdown-body h3:hover .anchor .fa-link,.markdown-body h4:hover .anchor .fa-link,.markdown-body h5:hover .anchor .fa-link,.markdown-body h6:hover .anchor .fa-link{visibility:visible}.markdown-body h1 code,.markdown-body h1 tt,.markdown-body h2 code,.markdown-body h2 tt,.markdown-body h3 code,.markdown-body h3 tt,.markdown-body h4 code,.markdown-body h4 tt,.markdown-body h5 code,.markdown-body h5 tt,.markdown-body h6 code,.markdown-body h6 tt{font-size:inherit}.markdown-body h1{font-size:2em}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body h2{font-size:1.5em}.markdown-body h3{font-size:1.25em}.markdown-body h4{font-size:1em}.markdown-body h5{font-size:.875em}.markdown-body h6{font-size:.85em;color:#777}.markdown-body ol,.markdown-body ul{padding-left:2em}.markdown-body ol.no-list,.markdown-body ul.no-list{padding:0;list-style-type:none}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body li>p{margin-top:16px}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}.markdown-body table{display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table th{font-weight:700}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.night .markdown-body table tr{background-color:#5f5f5f}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.night .markdown-body table tr:nth-child(2n){background-color:#4f4f4f}.markdown-body img{max-width:100%;box-sizing:content-box;background-color:#fff}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{max-width:none;vertical-align:text-top;background-color:transparent}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid #ddd}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{display:block;padding:5px 0 0;clear:both;color:#333}.markdown-body span.align-center{display:block;overflow:hidden;clear:both}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{display:block;overflow:hidden;clear:both}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body code,.markdown-body tt{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.night .markdown-body code,.night .markdown-body tt{color:#eee;background-color:hsla(0,0%,90.2%,.36)}.markdown-body code:after,.markdown-body code:before,.markdown-body tt:after,.markdown-body tt:before{letter-spacing:-.2em;content:"\00a0"}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body pre{word-wrap:normal}.markdown-body pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}.markdown-body .highlight{margin-bottom:16px}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.markdown-body pre code,.markdown-body pre tt{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.markdown-body pre code:after,.markdown-body pre code:before,.markdown-body pre tt:after,.markdown-body pre tt:before{content:normal}.markdown-body .csv-data td,.markdown-body .csv-data th{padding:5px;overflow:hidden;font-size:12px;line-height:1;text-align:left;white-space:nowrap}.markdown-body .csv-data .blob-line-num{padding:10px 8px 9px;text-align:right;background:#fff;border:0}.markdown-body .csv-data tr{border-top:0}.markdown-body .csv-data th{font-weight:700;background:#f8f8f8;border-top:0}.markdown-body kbd{display:inline-block;padding:3px 5px;font-size:11px;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:1px solid;border-color:#ccc #ccc #bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}.news .alert .markdown-body blockquote{padding:0 0 0 40px;border:0}.activity-tab .news .alert .commits,.activity-tab .news .markdown-body blockquote{padding-left:0}.task-list-item{list-style-type:none}.task-list-item label{font-weight:400}.task-list-item.enabled label{cursor:pointer}.task-list-item+.task-list-item{margin-top:3px}.task-list-item-checkbox{float:left;margin:.31em 0 .2em -1.3em!important;vertical-align:middle;cursor:default!important}.markdown-body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;padding-top:40px;padding-bottom:40px;max-width:758px;overflow:visible!important}.markdown-body pre{border:inherit!important}.night .markdown-body pre{filter:invert(100%)}.markdown-body code{color:inherit!important}.markdown-body pre code .wrapper{display:-webkit-inline-flex;display:-moz-inline-flex;display:-ms-inline-flex;display:-o-inline-flex;display:inline-flex}.markdown-body pre code .gutter{float:left;overflow:hidden;-webkit-user-select:none;user-select:none}.markdown-body pre code .gutter.linenumber{text-align:right;position:relative;display:inline-block;cursor:default;z-index:4;padding:0 8px 0 0;min-width:20px;box-sizing:content-box;color:#afafaf!important;border-right:3px solid #6ce26c!important}.markdown-body pre code .gutter.linenumber>span:before{content:attr(data-linenumber)}.markdown-body pre code .code{float:left;margin:0 0 0 16px}.markdown-body .gist .line-numbers{border-left:none;border-top:none;border-bottom:none}.markdown-body .gist .line-data{border:none}.markdown-body .gist table{border-spacing:0;border-collapse:inherit!important}.night .markdown-body .gist table tr:nth-child(2n){background-color:#ddd}.markdown-body code[data-gist-id]{background:none;padding:0;filter:invert(100%)}.markdown-body code[data-gist-id]:after,.markdown-body code[data-gist-id]:before{content:""}.markdown-body code[data-gist-id] .blob-num{border:unset}.markdown-body code[data-gist-id] table{overflow:unset;margin-bottom:unset}.markdown-body code[data-gist-id] table tr{background:unset}.markdown-body[dir=rtl] pre{direction:ltr}.markdown-body[dir=rtl] code{direction:ltr;unicode-bidi:embed}.markdown-body .alert>p{margin-bottom:0}.markdown-body pre.abc,.markdown-body pre.flow-chart,.markdown-body pre.graphviz,.markdown-body pre.mermaid,.markdown-body pre.sequence-diagram{text-align:center;background-color:inherit;border-radius:0;white-space:inherit}.night .markdown-body pre.graphviz .graph>polygon{fill:#333}.night .markdown-body pre.mermaid .sectionTitle,.night .markdown-body pre.mermaid .titleText,.night .markdown-body pre.mermaid text{fill:#fff}.markdown-body pre.abc>code,.markdown-body pre.flow-chart>code,.markdown-body pre.graphviz>code,.markdown-body pre.mermaid>code,.markdown-body pre.sequence-diagram>code{text-align:left}.markdown-body pre.abc>svg,.markdown-body pre.flow-chart>svg,.markdown-body pre.graphviz>svg,.markdown-body pre.mermaid>svg,.markdown-body pre.sequence-diagram>svg{max-width:100%;height:100%}.night .markdown-body .abc path{fill:#eee}.night .markdown-body .abc path.note_selected{fill:##4DD0E1}.night tspan{fill:#fefefe}.night pre rect{fill:transparent}.night pre.flow-chart path,.night pre.flow-chart rect{stroke:#fff}.markdown-body pre>code.wrap{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.markdown-body .alert>p,.markdown-body .alert>ul{margin-bottom:0}.markdown-body summary{display:list-item}.markdown-body summary:focus{outline:none}.markdown-body details summary{cursor:pointer}.markdown-body details:not([open])>:not(summary){display:none}.markdown-body figure{margin:1em 40px}.markdown-body img{background-color:transparent}.vimeo,.youtube{cursor:pointer;display:table;text-align:center;background-position:50%;background-repeat:no-repeat;background-size:contain;background-color:#000;overflow:hidden}.vimeo,.youtube{position:relative;width:100%}.youtube{padding-bottom:56.25%}.vimeo img{width:100%;object-fit:contain;z-index:0}.youtube img{object-fit:cover;z-index:0}.vimeo iframe,.youtube iframe,.youtube img{width:100%;height:100%;position:absolute;top:0;left:0}.vimeo iframe,.youtube iframe{vertical-align:middle;z-index:1}.vimeo .icon,.youtube .icon{position:absolute;height:auto;width:auto;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;opacity:.3;-webkit-transition:opacity .2s;transition:opacity .2s;z-index:0}.vimeo:hover .icon,.youtube:hover .icon{opacity:.6;-webkit-transition:opacity .2s;transition:opacity .2s}.slideshare .inner,.speakerdeck .inner{position:relative;width:100%}.slideshare .inner iframe,.speakerdeck .inner iframe{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%}.MJX_Assistive_MathML{display:none}.ui-infobar{position:relative;z-index:2;max-width:758px;margin-top:25px;margin-bottom:-25px;color:#777}.toc .invisable-node{list-style-type:none}.ui-toc{position:fixed;bottom:20px;z-index:10000}.ui-toc-label{opacity:.3;background-color:#ccc;border:none}.ui-toc-label,.ui-toc .open .ui-toc-label{-webkit-transition:opacity .2s;transition:opacity .2s}.ui-toc .open .ui-toc-label{opacity:1;color:#fff}.ui-toc-label:focus{opacity:.3;background-color:#ccc;color:#000}.ui-toc-label:hover{opacity:1;background-color:#ccc;-webkit-transition:opacity .2s;transition:opacity .2s}.ui-toc-dropdown{margin-top:23px;margin-bottom:20px;padding-left:10px;padding-right:10px;max-width:45vw;width:25vw;max-height:70vh;overflow:auto;text-align:inherit}.ui-toc-dropdown>.toc{max-height:calc(70vh - 100px);overflow:auto}.ui-toc-dropdown[dir=rtl] .nav{padding-right:0;letter-spacing:.0029em}.ui-toc-dropdown a{overflow:hidden;text-overflow:ellipsis;white-space:pre}.ui-toc-dropdown .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}.ui-toc-dropdown .nav>li:first-child:last-child>ul,.ui-toc-dropdown .toc.expand ul{display:block}.ui-toc-dropdown .nav>li>a:focus,.ui-toc-dropdown .nav>li>a:hover{padding-left:19px;color:#000;text-decoration:none;background-color:transparent;border-left:1px solid #000}.night .ui-toc-dropdown .nav>li>a:focus,.night .ui-toc-dropdown .nav>li>a:hover{color:#fff;border-left-color:#fff}.ui-toc-dropdown[dir=rtl] .nav>li>a:focus,.ui-toc-dropdown[dir=rtl] .nav>li>a:hover{padding-right:19px;border-left:none;border-right:1px solid #000}.ui-toc-dropdown .nav>.active:focus>a,.ui-toc-dropdown .nav>.active:hover>a,.ui-toc-dropdown .nav>.active>a{padding-left:18px;font-weight:700;color:#000;background-color:transparent;border-left:2px solid #000}.night .ui-toc-dropdown .nav>.active:focus>a,.night .ui-toc-dropdown .nav>.active:hover>a,.night .ui-toc-dropdown .nav>.active>a{color:#fff;border-left:2px solid #fff}.ui-toc-dropdown[dir=rtl] .nav>.active:focus>a,.ui-toc-dropdown[dir=rtl] .nav>.active:hover>a,.ui-toc-dropdown[dir=rtl] .nav>.active>a{padding-right:18px;border-left:none;border-right:2px solid #000}.ui-toc-dropdown .nav .nav{display:none;padding-bottom:10px}.ui-toc-dropdown .nav>.active>ul{display:block}.ui-toc-dropdown .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}.night .ui-toc-dropdown .nav>li>a{color:#aaa}.ui-toc-dropdown[dir=rtl] .nav .nav>li>a{padding-right:30px}.ui-toc-dropdown .nav .nav>li>ul>li>a{padding-top:1px;padding-bottom:1px;padding-left:40px;font-size:12px;font-weight:400}.ui-toc-dropdown[dir=rtl] .nav .nav>li>ul>li>a{padding-right:40px}.ui-toc-dropdown .nav .nav>li>a:focus,.ui-toc-dropdown .nav .nav>li>a:hover{padding-left:29px}.ui-toc-dropdown[dir=rtl] .nav .nav>li>a:focus,.ui-toc-dropdown[dir=rtl] .nav .nav>li>a:hover{padding-right:29px}.ui-toc-dropdown .nav .nav>li>ul>li>a:focus,.ui-toc-dropdown .nav .nav>li>ul>li>a:hover{padding-left:39px}.ui-toc-dropdown[dir=rtl] .nav .nav>li>ul>li>a:focus,.ui-toc-dropdown[dir=rtl] .nav .nav>li>ul>li>a:hover{padding-right:39px}.ui-toc-dropdown .nav .nav>.active:focus>a,.ui-toc-dropdown .nav .nav>.active:hover>a,.ui-toc-dropdown .nav .nav>.active>a{padding-left:28px;font-weight:500}.ui-toc-dropdown[dir=rtl] .nav .nav>.active:focus>a,.ui-toc-dropdown[dir=rtl] .nav .nav>.active:hover>a,.ui-toc-dropdown[dir=rtl] .nav .nav>.active>a{padding-right:28px}.ui-toc-dropdown .nav .nav>.active>.nav>.active:focus>a,.ui-toc-dropdown .nav .nav>.active>.nav>.active:hover>a,.ui-toc-dropdown .nav .nav>.active>.nav>.active>a{padding-left:38px;font-weight:500}.ui-toc-dropdown[dir=rtl] .nav .nav>.active>.nav>.active:focus>a,.ui-toc-dropdown[dir=rtl] .nav .nav>.active>.nav>.active:hover>a,.ui-toc-dropdown[dir=rtl] .nav .nav>.active>.nav>.active>a{padding-right:38px}.markdown-body[lang^=ja]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,Hiragino Kaku Gothic Pro,ヒラギノ角ゴ Pro W3,Osaka,Meiryo,メイリオ,MS Gothic,ＭＳ ゴシック,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.ui-toc-dropdown[lang^=ja]{font-family:Source Sans Pro,Helvetica,Arial,Meiryo UI,MS PGothic,ＭＳ Ｐゴシック,sans-serif}.markdown-body[lang=zh-tw]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,PingFang TC,Microsoft JhengHei,微軟正黑,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.ui-toc-dropdown[lang=zh-tw]{font-family:Source Sans Pro,Helvetica,Arial,Microsoft JhengHei UI,微軟正黑UI,sans-serif}.markdown-body[lang=zh-cn]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.ui-toc-dropdown[lang=zh-cn]{font-family:Source Sans Pro,Helvetica,Arial,Microsoft YaHei UI,微软雅黑UI,sans-serif}.ui-affix-toc{position:fixed;top:0;max-width:15vw;max-height:70vh;overflow:auto}.back-to-top,.expand-toggle,.go-to-bottom{display:block;padding:4px 10px;margin-top:10px;margin-left:10px;font-size:12px;font-weight:500;color:#999}.back-to-top:focus,.back-to-top:hover,.expand-toggle:focus,.expand-toggle:hover,.go-to-bottom:focus,.go-to-bottom:hover{color:#563d7c;text-decoration:none}.back-to-top,.go-to-bottom{margin-top:0}.ui-user-icon{width:20px;height:20px;display:block;border-radius:3px;margin-top:2px;margin-bottom:2px;margin-right:5px;background-position:50%;background-repeat:no-repeat;background-size:contain}.ui-user-icon.small{width:18px;height:18px;display:inline-block;vertical-align:middle;margin:0 0 .2em}small span{line-height:22px}small .dropdown{display:inline-block}small .dropdown a:focus,small .dropdown a:hover{text-decoration:none}.unselectable{-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}.night .navbar{background:#333;border-bottom-color:#333;color:#eee}.night .navbar a{color:#eee}.markdown-body h1[id]:before,.markdown-body h2[id]:before,.markdown-body h3[id]:before,.markdown-body h4[id]:before,.markdown-body h5[id]:before,.markdown-body h6[id]:before{display:block;content:" ";margin-top:-55px;height:55px;visibility:hidden}@media print{blockquote,div,img,pre,table{page-break-inside:avoid!important}a[href]:after{font-size:12px!important}}.markdown-body.slides{position:relative;z-index:1;color:#222}.markdown-body.slides:before{content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;background-color:currentColor;box-shadow:0 0 0 50vw}.markdown-body.slides section[data-markdown]{position:relative;margin-bottom:1.5em;background-color:#fff;text-align:center}.markdown-body.slides section[data-markdown] code{text-align:left}.markdown-body.slides section[data-markdown]:before{content:"";display:block;padding-bottom:56.23%}.markdown-body.slides section[data-markdown]>div:first-child{position:absolute;top:50%;left:1em;right:1em;transform:translateY(-50%);max-height:100%;overflow:hidden}.markdown-body.slides section[data-markdown]>ul{display:inline-block}.markdown-body.slides>section>section+section:after{content:"";position:absolute;top:-1.5em;right:1em;height:1.5em;border:3px solid #777}.markdown-body.slides aside.notes{display:none}.markdown-body.slides ol,.markdown-body.slides ul{display:inline-block;text-align:left;margin:0 0 0 1em;padding:0}.markdown-body.slides table{width:50%;margin:0 auto;border-collapse:collapse;border-spacing:0;display:table}.markdown-body.slides table td,.markdown-body.slides table th{text-align:left;padding:.2em .5em;border:none;border-bottom:1px solid}.markdown-body.slides table tr{border-top:0;background-color:#fff}.markdown-body.slides table tr:nth-child(2n){background-color:inherit}.markdown-body.slides table tbody tr:last-child td,.markdown-body.slides table tbody tr:last-child th{border-bottom:none}.markdown-body.slides h1,.markdown-body.slides h2{border-bottom:0}.night .markdown-body.slides h1,.night .markdown-body.slides h2,.night .markdown-body.slides h3,.night .markdown-body.slides h4,.night .markdown-body.slides h5,.night .markdown-body.slides h6{color:#000}.markdown-body section>section:last-child{margin-bottom:1.5em!important}.ui-view-area.black{background-color:#000!important}body{font-smoothing:subpixel-antialiased!important;-webkit-font-smoothing:subpixel-antialiased!important;-moz-osx-font-smoothing:auto!important;text-shadow:0 0 1em transparent,1px 1px 1.2px rgba(0,0,0,.004);-webkit-overflow-scrolling:touch;font-family:Source Sans Pro,Helvetica,Arial,sans-serif;letter-spacing:.025em}.focus,:focus{outline:none!important}::-moz-focus-inner{border:0!important}body.modal-open{overflow-y:auto;padding-right:0!important}
</style>
<style>
.markdown-body {
font-family: 'Montserrat', sans-serif;
}
.markdown-body header {
padding: 30px;
border: solid 4px #222;
}
.markdown-body h1 {
border: none;
text-align: center;
font-size: clamp(28px, 4vw, 32px);
font-weight: 700;
line-height: 1.3;
}
.markdown-body h1 span {
color: #eb6168;
font-size: 2em;
font-weight: 900;
}
.markdown-body h1 span span {
font-size: 0.7em;
}
.markdown-body h1 + p {
margin: 40px 0 0;
padding: 20px;
background-color: #d7e8b9;
text-align: center;
}
.markdown-body h2 {
border-bottom: dotted 1px #cdab99;
margin-top: 50px;
}
.markdown-body h2 span {
color: #cdab99;
font-weight: 900;
}
.markdown-body > ul ul {
margin-top: 5px;
}
.markdown-body > ul > li {
margin-bottom: 18px;
}
.markdown-body > ul.simple > li {
margin-bottom: 5px;
}
.markdown-body ::marker {
color: #cdab99;
}
.markdown-body a {
display: block;
color: inherit;
text-decoration: none;
}
.markdown-body a:hover {
background-color: #d7e8b9;
}
</style>
</head>
<body>
<div id="doc" class="markdown-body container-fluid">
<header>
<h1 id="作って学ぶ-HTML＆CSSモダンコーディング"><a class="anchor hidden-xs" href="#作って学ぶ-HTML＆CSSモダンコーディング" title="作って学ぶ-HTML＆CSSモダンコーディング"><i class="fa fa-link"></i></a>
作って学ぶ<br>
<span>HTML<span>＆</span>CSS</span><br>
モダンコーディング</h1>
<p>レイアウトを実現するCSSの選択肢とバリエーション</p>
</header>
<h2 id="完成ページ"><a class="anchor hidden-xs" href="#完成ページ" title="完成ページ"><i class="fa fa-link"></i></a>
<span>Pages</span> 完成ページ</h2><ul>
<li><a href="web/index.html" target="_blank" rel="noopener">トップページ</a></li>
<li><a href="web/content.html" target="_blank" rel="noopener">コンテンツページ</a></li>
</ul>
<h2 id="Chapter-1-ヘッダー"><a class="anchor hidden-xs" href="#Chapter-1-ヘッダー" title="Chapter-1-ヘッダー"><i class="fa fa-link"></i></a>
<span>Chapter 1</span> ヘッダー</h2><ul>
<li><a href="variation/header-flex01.html" target="_blank" rel="noopener">両端に配置するレイアウト【Flexboxで設定するケース（１）】</a>
<ul>
<li><a href="variation/header-flex01-a.html" target="_blank" rel="noopener">アイテム数が３つ以上になった場合</a></li>
</ul>
</li>
<li><a href="variation/header-flex02.html" target="_blank" rel="noopener">両端に配置するレイアウト【Flexboxで設定するケース（２）】</a>
<ul>
<li><a href="variation/header-flex02-a.html" target="_blank" rel="noopener">アイテム数が３つ以上になった場合</a></li>
</ul>
</li>
<li><a href="variation/header-grid01.html" target="_blank" rel="noopener">両端に配置するレイアウト【CSS Gridで設定するケース】</a>
<ul>
<li><a href="variation/header-grid01-a.html" target="_blank" rel="noopener">アイテム数が３つ以上になった場合（１）</a></li>
<li><a href="variation/header-grid01-b.html" target="_blank" rel="noopener">アイテム数が３つ以上になった場合（２）</a></li>
<li><a href="variation/header-grid01-c.html" target="_blank" rel="noopener">アイテム数が３つ以上になった場合（３）</a></li>
</ul>
</li>
<li><a href="variation/w-container.html" target="_blank" rel="noopener">横幅と左右の余白【widthで調整するケース】</a>
<ul>
<li><a href="variation/w-container-a.html" target="_blank" rel="noopener">min()関数を使わない場合</a></li>
</ul>
</li>
<li><a href="variation/w-container-padding.html" target="_blank" rel="noopener">横幅と左右の余白【paddingで調整するケース】</a>
<ul>
<li><a href="variation/w-container-padding-a.html" target="_blank" rel="noopener">左右の余白を固定サイズにした場合</a></li>
</ul>
</li>
<li><a href="variation/w-container-grid.html" target="_blank" rel="noopener">横幅と左右の余白【CSS Gridで調整するケース】</a>
<ul>
<li><a href="variation/w-container-grid-a.html" target="_blank" rel="noopener">余白側でサイズを調整する場合</a></li>
</ul>
</li>
<li><a href="variation/header-position01.html" target="_blank" rel="noopener">ヘッダーを画面上部に固定するレイアウト【position:stickyで設定するケース】</a></li>
</ul><h2 id="Chapter-2-ヒーロー"><a class="anchor hidden-xs" href="#Chapter-2-ヒーロー" title="Chapter-2-ヒーロー"><i class="fa fa-link"></i></a>
<span>Chapter 2</span> ヒーロー</h2><ul>
<li><a href="variation/hero-grid01.html" target="_blank" rel="noopener">縦横中央に配置するレイアウト【CSS Gridで設定するケース】</a>
<ul>
<li><a href="variation/hero-grid01-a.html" target="_blank" rel="noopener">縦横中央に配置するアイテムが１つだけの場合</a></li>
</ul>
</li>
<li><a href="variation/hero-flex01.html" target="_blank" rel="noopener">縦横中央に配置するレイアウト【Flexboxで設定するケース】</a>
<ul>
<li><a href="variation/hero-flex01-a.html" target="_blank" rel="noopener">縦横中央に配置するアイテムが１つだけの場合</a></li>
</ul>
</li>
<li><a href="variation/hero-img01.html" target="_blank" rel="noopener">画像にテキストを重ねるレイアウト【背景画像で表示するケース】</a></li>
<li><a href="variation/hero-img02.html" target="_blank" rel="noopener">画像にテキストを重ねるレイアウト【<img>で表示するケース】</a></li>
<li><a href="variation/hero-font01.html" target="_blank" rel="noopener">画面幅に合わせて変わるフォントサイズ【clamp()で設定するケース】</a>
<ul>
<li><a href="variation/hero-font01-a.html" target="_blank" rel="noopener">画面幅375～1366pxにかけてなめらかに変化させた場合</a></li>
</ul>
</li>
<li>テキストの拡大表示とアクセシビリティ
<ul>
<li><a href="variation/hero-fontzoom01.html" target="_blank" rel="noopener">拡大でフォントサイズが小さくなるケース【clamp()】</a></li>
<li><a href="variation/hero-fontzoom01-a.html" target="_blank" rel="noopener">拡大でフォントサイズが小さくなるケース【@media】</a></li>
</ul>
</li>
</ul><h2 id="Chapter-3-画像とテキスト"><a class="anchor hidden-xs" href="#Chapter-3-画像とテキスト" title="Chapter-3-画像とテキスト"><i class="fa fa-link"></i></a>
<span>Chapter 3</span> 画像とテキスト</h2><ul>
<li><a href="variation/imgtext-flex01.html" target="_blank" rel="noopener">画像とテキストを横並びにするレイアウト【Flexboxで設定するケース】</a>
<ul>
<li><a href="variation/imgtext-flex01-a.html" target="_blank" rel="noopener">アイテムの配置を逆にする場合</a></li>
</ul>
</li>
<li><a href="variation/imgtext-grid01.html" target="_blank" rel="noopener">画像とテキストを横並びにするレイアウト【CSS Gridで設定するケース】</a>
<ul>
<li><a href="variation/imgtext-grid01-a.html" target="_blank" rel="noopener">アイテムの配置を逆にする場合 【order】</a></li>
<li><a href="variation/imgtext-grid01-b.html" target="_blank" rel="noopener">アイテムの配置を逆にする場合 【direction】</a></li>
</ul>
</li>
</ul><h2 id="Chapter-4-記事一覧"><a class="anchor hidden-xs" href="#Chapter-4-記事一覧" title="Chapter-4-記事一覧"><i class="fa fa-link"></i></a>
<span>Chapter 4</span> 記事一覧</h2><ul>
<li><a href="variation/posts-grid01.html" target="_blank" rel="noopener">タイル状に並べるレイアウト【CSS Gridで設定するケース】</a>
<ul>
<li><a href="variation/posts-grid01-a.html" target="_blank" rel="noopener">アイテムの間隔を調整する場合</a></li>
<li><a href="variation/posts-grid01-b.html" target="_blank" rel="noopener">アイテム数を５件にした場合</a></li>
<li><a href="variation/posts-grid01-b1.html" target="_blank" rel="noopener">アイテム数を２件にした場合</a></li>
<li><a href="variation/posts-grid01-c.html" target="_blank" rel="noopener">アイテムの配置を指定した場合</a></li>
</ul>
</li>
<li><a href="variation/posts-grid02.html" target="_blank" rel="noopener">タイル状に並べる列の数がコンテナの横幅に応じて変わるレイアウト【CSS Gridで設定するケース】</a>
<ul>
<li><a href="variation/posts-grid02-a.html" target="_blank" rel="noopener">アイテム数を３件にした場合【auto-fit】</a></li>
<li><a href="variation/posts-grid02-b.html" target="_blank" rel="noopener">アイテム数を３件にした場合【auto-fill】</a></li>
</ul>
</li>
<li><a href="variation/posts-flex01.html" target="_blank" rel="noopener">タイル状に並べるレイアウト【Flexboxで設定するケース】</a>
<ul>
<li><a href="variation/posts-flex01-a.html" target="_blank" rel="noopener">アイテムの間隔を調整する場合（A）</a></li>
<li><a href="variation/posts-flex01-b.html" target="_blank" rel="noopener">アイテムの間隔を調整する場合（B）</a></li>
<li><a href="variation/posts-flex01-c.html" target="_blank" rel="noopener">アイテムの間隔を調整する場合（C）</a></li>
</ul>
</li>
<li><a href="variation/posts-flex02.html" target="_blank" rel="noopener">タイル状に並べる列の数がコンテナの横幅に応じて変わるレイアウト【Flexboxで設定するケース】</a>
<ul>
<li><a href="variation/posts-flex02-a.html" target="_blank" rel="noopener">余剰スペースをなくす場合</a></li>
</ul>
</li>
</ul><h2 id="Chapter-5-フッター"><a class="anchor hidden-xs" href="#Chapter-5-フッター" title="Chapter-5-フッター"><i class="fa fa-link"></i></a>
<span>Chapter 5</span> フッター</h2><ul>
<li><a href="variation/footer-grid01.html" target="_blank" rel="noopener">自在に配置を変更するレイアウト【CSS Gridで設定するケース】</a>
<ul>
<li><a href="variation/footer-grid01a.html" target="_blank" rel="noopener">grid-template-columnsとgrid-template-rowsを省略した場合</a></li>
<li><a href="variation/footer-grid01-a.html" target="_blank" rel="noopener">配置をエリアでコントロールする場合</a></li>
<li><a href="variation/footer-grid01-b.html" target="_blank" rel="noopener">空行を入れて余白サイズを大きくする場合</a></li>
</ul>
</li>
<li><a href="variation/footer-flex01.html" target="_blank" rel="noopener">自在に配置を変更するレイアウト【Flexboxで設定するケース】</a></li>
<li><a href="variation/footer-menu-flex01.html" target="_blank" rel="noopener">中身に合わせたサイズで横並びにするレイアウト【Flexboxで設定するケース】</a>
<ul>
<li><a href="variation/footer-menu-flex01-a.html" target="_blank" rel="noopener">必要に応じて折り返しを入れる場合</a></li>
<li><a href="variation/footer-menu-flex01-b.html" target="_blank" rel="noopener">中央揃えにする場合</a></li>
</ul>
</li>
<li><a href="variation/footer-menu-grid01.html" target="_blank" rel="noopener">中身に合わせたサイズで横並びにするレイアウト【CSS Gridで設定するケース】</a>
<ul>
<li><a href="variation/footer-menu-grid01-a.html" target="_blank" rel="noopener">必要に応じて折り返しを入れる場合</a></li>
</ul>
</li>
<li><a href="variation/clip-path-a.html" target="_blank" rel="noopener">クリッピングパスで切り抜く【clip-path】</a>
<ul>
<li><a href="variation/clip-path-b.html" target="_blank" rel="noopener">六角形に切り抜く</a></li>
</ul>
</li>
</ul><h2 id="Chapter-6-記事"><a class="anchor hidden-xs" href="#Chapter-6-記事" title="Chapter-6-記事"><i class="fa fa-link"></i></a>
<span>Chapter 6</span> 記事</h2><ul>
<li><a href="variation/step6-8.html" target="_blank" rel="noopener">記事本文に段落以外の要素を追加したときの表示を確認してみる（STEP 6-8）</a></li>
<li><a href="variation/entry-margin01.html" target="_blank" rel="noopener">記事本文のレイアウト【marginで設定するケース】</a>
<ul>
<li><a href="variation/entry-margin01-a.html" target="_blank" rel="noopener">ブラウザ標準の上下マージンで画像を挿入した場合</a></li>
<li><a href="variation/entry-margin01-b.html" target="_blank" rel="noopener">画像の上下に50ピクセルの余白を入れた場合</a></li>
</ul>
</li>
<li>記事本文のレイアウト【CSS Grid / Flexboxで設定するケース】
<ul>
<li><a href="variation/entry-grid01.html" target="_blank" rel="noopener">CSS Gridで設定した場合</a></li>
<li><a href="variation/entry-flex01.html" target="_blank" rel="noopener">Flexboxで設定した場合</a></li>
</ul>
</li>
<li><a href="variation/respimg.html" target="_blank" rel="noopener">レスポンシブイメージ【<img>のsrcset/sizes属性】</a></li>
<li><a href="variation/respimg-webp.html" target="_blank" rel="noopener">レスポンシブイメージ【<picture>とWebP】</a></li>
</ul><h2 id="Chapter-7-プラン＆フッター"><a class="anchor hidden-xs" href="#Chapter-7-プラン＆フッター" title="Chapter-7-プラン＆フッター"><i class="fa fa-link"></i></a>
<span>Chapter 7</span> プラン＆フッター</h2><ul>
<li><a href="variation/plans-grid01.html" target="_blank" rel="noopener">カード型UIのレイアウト【CSS Gridで設定するケース】</a>
<ul>
<li><a href="variation/plans-grid01-a.html" target="_blank" rel="noopener">カードの数を変えても対応できるようにする場合</a></li>
<li><a href="variation/plans-grid01-b.html" target="_blank" rel="noopener">複数行でレイアウトする場合</a></li>
</ul>
</li>
<li><a href="variation/plans-flex01.html" target="_blank" rel="noopener">カード型UIのレイアウト【Flexboxで設定するケース】</a>
<ul>
<li><a href="variation/plans-flex01-a.html" target="_blank" rel="noopener">カードの数を変える場合</a></li>
<li><a href="variation/plans-flex01-b.html" target="_blank" rel="noopener">複数行でレイアウトする場合</a></li>
</ul>
</li>
<li><a href="variation/plan-flex01.html" target="_blank" rel="noopener">カードの中身を上下に揃えて配置するレイアウト【Flexboxで設定するケース】</a></li>
<li><a href="variation/plan-grid01.html" target="_blank" rel="noopener">カードの中身を上下に揃えて配置するレイアウト【CSS Gridで設定するケース】</a></li>
<li><a href="variation/lazy.html" target="_blank" rel="noopener">画像の遅延読み込み【<img>のloading属性】</a></li>
</ul><h2 id="Chapter-8-ナビゲーション"><a class="anchor hidden-xs" href="#Chapter-8-ナビゲーション" title="Chapter-8-ナビゲーション"><i class="fa fa-link"></i></a>
<span>Chapter 8</span> ナビゲーション</h2><ul>
<li><a href="variation/nav-position01.html" target="_blank" rel="noopener">オーバーレイの形で表示するレイアウト【positionで設定するケース】</a>
<ul>
<li><a href="variation/nav-position01-a.html" target="_blank" rel="noopener">Aの場合</a></li>
<li><a href="variation/nav-position01-b.html" target="_blank" rel="noopener">Bの場合</a></li>
</ul>
</li>
<li><a href="variation/menu/index.html" target="_blank" rel="noopener">ハンバーガーメニューのボタンのアニメーション</a>
<ul>
<li><a href="https://jonsuh.com/hamburgers/" target="_blank" rel="noopener">Hamburgers</a></li>
</ul>
</li>
<li>各種オンラインチェックツール
<ul>
<li><a href="https://search.google.com/test/mobile-friendly" target="_blank" rel="noopener">モバイルフレンドリーテスト</a></li>
<li><a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener">PageSpeed Insights</a></li>
<li><a href="https://validator.w3.org/nu/" target="_blank" rel="noopener">HTMLの文法チェック</a></li>
</ul>
</li>
</ul><h2 id="特典PDF-簡易リファレンス"><a class="anchor hidden-xs" href="#特典PDF-簡易リファレンス" title="特典PDF-簡易リファレンス"><i class="fa fa-link"></i></a>
<span>PDF</span> 簡易リファレンス</h2><ul class="simple">
<li><a href="variation/container-query.html" target="_blank" rel="noopener">コンテナクエリ</a></li>
<li><a href="variation/flex.html" target="_blank" rel="noopener">Flexboxの基本</a></li>
<li><a href="variation/grid.html" target="_blank" rel="noopener">CSS Gridの基本</a></li>
<li><a href="variation/grid-3cols.html" target="_blank" rel="noopener">CSS Gridの基本 【３列×２行】</a></li>
</ul>
</div>
<div class="ui-toc dropup unselectable hidden-print" style="display:none;">
<div class="pull-right dropdown">
<a id="tocLabel" class="ui-toc-label btn btn-default" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
<i class="fa fa-bars"></i>
</a>
<ul id="ui-toc" class="ui-toc-dropdown dropdown-menu" aria-labelledby="tocLabel">
<div class="toc"><ul class="nav">
<li class=""><a href="#作って学ぶ-HTML＆CSSモダンコーディング" title="作って学ぶ HTML＆CSSモダンコーディング">作って学ぶ HTML＆CSSモダンコーディング</a><ul class="nav">
<li><a href="#完成ページ" title="完成ページ">完成ページ</a></li>
<li><a href="#Chapter-1-ヘッダー" title="Chapter 1 ヘッダー">Chapter 1 ヘッダー</a></li>
<li><a href="#Chapter-2-ヒーロー" title="Chapter 2 ヒーロー">Chapter 2 ヒーロー</a></li>
<li><a href="#Chapter-3-画像とテキスト" title="Chapter 3 画像とテキスト">Chapter 3 画像とテキスト</a></li>
<li><a href="#Chapter-4-記事一覧" title="Chapter 4 記事一覧">Chapter 4 記事一覧</a></li>
<li><a href="#Chapter-5-フッター" title="Chapter 5 フッター">Chapter 5 フッター</a></li>
<li><a href="#Chapter-6-記事" title="Chapter 6 記事">Chapter 6 記事</a></li>
<li class=""><a href="#Chapter-7-プラン＆フッター" title="Chapter 7 プラン＆フッター">Chapter 7 プラン＆フッター</a></li>
<li><a href="#Chapter-8-ナビゲーション" title="Chapter 8 ナビゲーション">Chapter 8 ナビゲーション</a></li>
<li><a href="#特典PDF-簡易リファレンス" title="特典PDF 簡易リファレンス">特典PDF 簡易リファレンス</a></li>
</ul>
</li>
</ul>
</div><div class="toc-menu"><a class="expand-toggle" href="#">Expand all</a><a class="back-to-top" href="#">Back to top</a><a class="go-to-bottom" href="#">Go to bottom</a></div>
</ul>
</div>
</div>
<div id="ui-toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:17px;display:none;" >
<div class="toc"><ul class="nav">
<li class=""><a href="#作って学ぶ-HTML＆CSSモダンコーディング" title="作って学ぶ HTML＆CSSモダンコーディング">作って学ぶ HTML＆CSSモダンコーディング</a><ul class="nav">
<li class=""><a href="#完成ページ" title="完成ページ">完成ページ</a></li>
<li class=""><a href="#Chapter-1-ヘッダー" title="Chapter 1 ヘッダー">Chapter 1 ヘッダー</a></li>
<li class=""><a href="#Chapter-2-ヒーロー" title="Chapter 2 ヒーロー">Chapter 2 ヒーロー</a></li>
<li class=""><a href="#Chapter-3-画像とテキスト" title="Chapter 3 画像とテキスト">Chapter 3 画像とテキスト</a></li>
<li class=""><a href="#Chapter-4-記事一覧" title="Chapter 4 記事一覧">Chapter 4 記事一覧</a></li>
<li class=""><a href="#Chapter-5-フッター" title="Chapter 5 フッター">Chapter 5 フッター</a></li>
<li class=""><a href="#Chapter-6-記事" title="Chapter 6 記事">Chapter 6 記事</a></li>
<li class=""><a href="#Chapter-7-プラン＆フッター" title="Chapter 7 プラン＆フッター">Chapter 7 プラン＆フッター</a></li>
<li><a href="#Chapter-8-ナビゲーション" title="Chapter 8 ナビゲーション">Chapter 8 ナビゲーション</a></li>
<li class=""><a href="#特典PDF-簡易リファレンス" title="特典PDF 簡易リファレンス">特典PDF 簡易リファレンス</a></li>
</ul>
</li>
</ul>
</div><div class="toc-menu"><a class="expand-toggle" href="#">Expand all</a><a class="back-to-top" href="#">Back to top</a><a class="go-to-bottom" href="#">Go to bottom</a></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha256-kJrlY+s09+QoWjpkOrXXwhxeaoDz9FW5SaxF8I0DibQ=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.6.0/gist-embed.min.js" integrity="sha256-KyF2D6xPIJUW5sUDSs93vWyZm+1RzIpKCexxElmxl8g=" crossorigin="anonymous" defer></script>
<script>
var markdown = $(".markdown-body");
//smooth all hash trigger scrolling
function smoothHashScroll() {
var hashElements = $("a[href^='#']").toArray();
for (var i = 0; i < hashElements.length; i++) {
var element = hashElements[i];
var $element = $(element);
var hash = element.hash;
if (hash) {
$element.on('click', function (e) {
// store hash
var hash = this.hash;
if ($(hash).length <= 0) return;
// prevent default anchor click behavior
e.preventDefault();
// animate
$('body, html').stop(true, true).animate({
scrollTop: $(hash).offset().top
}, 100, "linear", function () {
// when done, add hash to url
// (default click behaviour)
window.location.hash = hash;
});
});
}
}
}
smoothHashScroll();
var toc = $('.ui-toc');
var tocAffix = $('.ui-affix-toc');
var tocDropdown = $('.ui-toc-dropdown');
//toc
tocDropdown.click(function (e) {
e.stopPropagation();
});
var enoughForAffixToc = true;
function generateScrollspy() {
$(document.body).scrollspy({
target: ''
});
$(document.body).scrollspy('refresh');
if (enoughForAffixToc) {
toc.hide();
tocAffix.show();
} else {
tocAffix.hide();
toc.show();
}
$(document.body).scroll();
}
function windowResize() {
//toc right
var paddingRight = parseFloat(markdown.css('padding-right'));
var right = ($(window).width() - (markdown.offset().left + markdown.outerWidth() - paddingRight));
toc.css('right', right + 'px');
//affix toc left
var newbool;
var rightMargin = (markdown.parent().outerWidth() - markdown.outerWidth()) / 2;
//for ipad or wider device
if (rightMargin >= 133) {
newbool = true;
var affixLeftMargin = (tocAffix.outerWidth() - tocAffix.width()) / 2;
var left = markdown.offset().left + markdown.outerWidth() - affixLeftMargin;
tocAffix.css('left', left + 'px');
} else {
newbool = false;
}
if (newbool != enoughForAffixToc) {
enoughForAffixToc = newbool;
generateScrollspy();
}
}
$(window).resize(function () {
windowResize();
});
$(document).ready(function () {
windowResize();
generateScrollspy();
});
//remove hash
function removeHash() {
window.location.hash = '';
}
var backtotop = $('.back-to-top');
var gotobottom = $('.go-to-bottom');
backtotop.click(function (e) {
e.preventDefault();
e.stopPropagation();
if (scrollToTop)
scrollToTop();
removeHash();
});
gotobottom.click(function (e) {
e.preventDefault();
e.stopPropagation();
if (scrollToBottom)
scrollToBottom();
removeHash();
});
var toggle = $('.expand-toggle');
var tocExpand = false;
checkExpandToggle();
toggle.click(function (e) {
e.preventDefault();
e.stopPropagation();
tocExpand = !tocExpand;
checkExpandToggle();
})
function checkExpandToggle () {
var toc = $('.ui-toc-dropdown .toc');
var toggle = $('.expand-toggle');
if (!tocExpand) {
toc.removeClass('expand');
toggle.text('Expand all');
} else {
toc.addClass('expand');
toggle.text('Collapse all');
}
}
function scrollToTop() {
$('body, html').stop(true, true).animate({
scrollTop: 0
}, 100, "linear");
}
function scrollToBottom() {
$('body, html').stop(true, true).animate({
scrollTop: $(document.body)[0].scrollHeight
}, 100, "linear");
}
</script>
</body>
</html>