質問編集履歴

2

CSSファイル追加

2021/02/24 08:15

投稿

TTTTaison
TTTTaison

スコア6

test CHANGED
File without changes
test CHANGED
@@ -345,3 +345,211 @@
345
345
 
346
346
 
347
347
  ```
348
+
349
+
350
+
351
+ ```CSS
352
+
353
+ body {
354
+
355
+ font-size: .875rem;
356
+
357
+ }
358
+
359
+
360
+
361
+ .feather {
362
+
363
+ width: 16px;
364
+
365
+ height: 16px;
366
+
367
+ vertical-align: text-bottom;
368
+
369
+ }
370
+
371
+
372
+
373
+ /*
374
+
375
+ * Sidebar
376
+
377
+ */
378
+
379
+
380
+
381
+ .sidebar {
382
+
383
+ position: fixed;
384
+
385
+ top: 0;
386
+
387
+ /* rtl:raw:
388
+
389
+ right: 0;
390
+
391
+ */
392
+
393
+ bottom: 0;
394
+
395
+ /* rtl:remove */
396
+
397
+ left: 0;
398
+
399
+ z-index: 100; /* Behind the navbar */
400
+
401
+ padding: 48px 0 0; /* Height of navbar */
402
+
403
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
404
+
405
+ }
406
+
407
+
408
+
409
+ @media (max-width: 767.98px) {
410
+
411
+ .sidebar {
412
+
413
+ top: 5rem;
414
+
415
+ }
416
+
417
+ }
418
+
419
+
420
+
421
+ .sidebar-sticky {
422
+
423
+ position: relative;
424
+
425
+ top: 0;
426
+
427
+ height: calc(100vh - 48px);
428
+
429
+ padding-top: .5rem;
430
+
431
+ overflow-x: hidden;
432
+
433
+ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
434
+
435
+ }
436
+
437
+
438
+
439
+ .sidebar .nav-link {
440
+
441
+ font-weight: 500;
442
+
443
+ color: #333;
444
+
445
+ }
446
+
447
+
448
+
449
+ .sidebar .nav-link .feather {
450
+
451
+ margin-right: 4px;
452
+
453
+ color: #727272;
454
+
455
+ }
456
+
457
+
458
+
459
+ .sidebar .nav-link.active {
460
+
461
+ color: #007bff;
462
+
463
+ }
464
+
465
+
466
+
467
+ .sidebar .nav-link:hover .feather,
468
+
469
+ .sidebar .nav-link.active .feather {
470
+
471
+ color: inherit;
472
+
473
+ }
474
+
475
+
476
+
477
+ .sidebar-heading {
478
+
479
+ font-size: .75rem;
480
+
481
+ text-transform: uppercase;
482
+
483
+ }
484
+
485
+
486
+
487
+ /*
488
+
489
+ * Navbar
490
+
491
+ */
492
+
493
+
494
+
495
+ .navbar-brand {
496
+
497
+ padding-top: .75rem;
498
+
499
+ padding-bottom: .75rem;
500
+
501
+ font-size: 1rem;
502
+
503
+ background-color: rgba(0, 0, 0, .25);
504
+
505
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
506
+
507
+ }
508
+
509
+
510
+
511
+ .navbar .navbar-toggler {
512
+
513
+ top: .25rem;
514
+
515
+ right: 1rem;
516
+
517
+ }
518
+
519
+
520
+
521
+ .navbar .form-control {
522
+
523
+ padding: .75rem 1rem;
524
+
525
+ border-width: 0;
526
+
527
+ border-radius: 0;
528
+
529
+ }
530
+
531
+
532
+
533
+ .form-control-dark {
534
+
535
+ color: #fff;
536
+
537
+ background-color: rgba(255, 255, 255, .1);
538
+
539
+ border-color: rgba(255, 255, 255, .1);
540
+
541
+ }
542
+
543
+
544
+
545
+ .form-control-dark:focus {
546
+
547
+ border-color: transparent;
548
+
549
+ box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
550
+
551
+ }
552
+
553
+
554
+
555
+ ```

1

ファイル全体を掲載しました。

2021/02/24 08:15

投稿

TTTTaison
TTTTaison

スコア6

test CHANGED
File without changes
test CHANGED
@@ -6,13 +6,119 @@
6
6
 
7
7
 
8
8
 
9
+
10
+
11
+
12
+
9
- #ソースコード
13
+ # 追記
14
+
10
-
15
+ こちらファイル全体になります。
11
-
12
16
 
13
17
  ```HTML
14
18
 
15
- サイドバー↓
19
+ <!doctype html>
20
+
21
+ <html lang="en">
22
+
23
+ <head>
24
+
25
+ <meta charset="utf-8">
26
+
27
+ <meta name="viewport" content="width=device-width, initial-scale=1">
28
+
29
+ <meta name="description" content="">
30
+
31
+ <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
32
+
33
+ <meta name="generator" content="Hugo 0.80.0">
34
+
35
+ <title>Dashboard Template · Bootstrap v5.0</title>
36
+
37
+
38
+
39
+ <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard/">
40
+
41
+
42
+
43
+
44
+
45
+
46
+
47
+ <!-- Bootstrap core CSS -->
48
+
49
+ <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
50
+
51
+
52
+
53
+ <style>
54
+
55
+ .bd-placeholder-img {
56
+
57
+ font-size: 1.125rem;
58
+
59
+ text-anchor: middle;
60
+
61
+ -webkit-user-select: none;
62
+
63
+ -moz-user-select: none;
64
+
65
+ user-select: none;
66
+
67
+ }
68
+
69
+
70
+
71
+ @media (min-width: 768px) {
72
+
73
+ .bd-placeholder-img-lg {
74
+
75
+ font-size: 3.5rem;
76
+
77
+ }
78
+
79
+ }
80
+
81
+ </style>
82
+
83
+
84
+
85
+
86
+
87
+ <!-- Custom styles for this template -->
88
+
89
+ <link href="dashboard.css" rel="stylesheet">
90
+
91
+ </head>
92
+
93
+ <body>
94
+
95
+
96
+
97
+ <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
98
+
99
+ <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
100
+
101
+ <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
102
+
103
+ <span class="navbar-toggler-icon"></span>
104
+
105
+ </button>
106
+
107
+ <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
108
+
109
+ <ul class="navbar-nav px-3">
110
+
111
+ <li class="nav-item text-nowrap">
112
+
113
+ <a class="nav-link" href="#">Sign out</a>
114
+
115
+ </li>
116
+
117
+ </ul>
118
+
119
+ </header>
120
+
121
+
16
122
 
17
123
  <div class="container-fluid">
18
124
 
@@ -48,128 +154,194 @@
48
154
 
49
155
  </li>
50
156
 
51
- .....
157
+ <li class="nav-item">
158
+
159
+ <a class="nav-link" href="#">
160
+
161
+ <span data-feather="shopping-cart"></span>
162
+
163
+ Products
164
+
165
+ </a>
166
+
167
+ </li>
168
+
169
+ <li class="nav-item">
170
+
171
+ <a class="nav-link" href="#">
172
+
173
+ <span data-feather="users"></span>
174
+
175
+ Customers
176
+
177
+ </a>
178
+
179
+ </li>
180
+
181
+ <li class="nav-item">
182
+
183
+ <a class="nav-link" href="#">
184
+
185
+ <span data-feather="bar-chart-2"></span>
186
+
187
+ Reports
188
+
189
+ </a>
190
+
191
+ </li>
192
+
193
+ <li class="nav-item">
194
+
195
+ <a class="nav-link" href="#">
196
+
197
+ <span data-feather="layers"></span>
198
+
199
+ Integrations
200
+
201
+ </a>
202
+
203
+ </li>
204
+
205
+ </ul>
206
+
207
+ </nav>
208
+
209
+
210
+
211
+ <main class="ml-20em">
212
+
213
+ <div class="album py-5 bg-light">
214
+
215
+ <div class="container">
216
+
217
+
218
+
219
+ <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 ml-20em">
220
+
221
+ <div class="col ml-2em">
222
+
223
+ <div class="card shadow-sm">
224
+
225
+ <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
226
+
227
+
228
+
229
+ <div class="card-body">
230
+
231
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
232
+
233
+ <div class="d-flex justify-content-between align-items-center">
234
+
235
+ <div class="btn-group">
236
+
237
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
238
+
239
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
240
+
241
+ </div>
242
+
243
+ <small class="text-muted">9 mins</small>
244
+
245
+ </div>
246
+
247
+ </div>
248
+
249
+ </div>
250
+
251
+ </div>
252
+
253
+ <div class="col">
254
+
255
+ <div class="card shadow-sm">
256
+
257
+ <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
258
+
259
+
260
+
261
+ <div class="card-body">
262
+
263
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
264
+
265
+ <div class="d-flex justify-content-between align-items-center">
266
+
267
+ <div class="btn-group">
268
+
269
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
270
+
271
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
272
+
273
+ </div>
274
+
275
+ <small class="text-muted">9 mins</small>
276
+
277
+ </div>
278
+
279
+ </div>
280
+
281
+ </div>
282
+
283
+ </div>
284
+
285
+ <div class="col">
286
+
287
+ <div class="card shadow-sm">
288
+
289
+ <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
290
+
291
+
292
+
293
+ <div class="card-body">
294
+
295
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
296
+
297
+ <div class="d-flex justify-content-between align-items-center">
298
+
299
+ <div class="btn-group">
300
+
301
+ <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
302
+
303
+ <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
304
+
305
+ </div>
306
+
307
+ <small class="text-muted">9 mins</small>
308
+
309
+ </div>
310
+
311
+ </div>
312
+
313
+ </div>
314
+
315
+ </div>
316
+
317
+ </div>
318
+
319
+ </div>
320
+
321
+ </div>
322
+
323
+
324
+
325
+ </main>
326
+
327
+ </div>
328
+
329
+ </div>
330
+
331
+
332
+
333
+
334
+
335
+ <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
336
+
337
+
338
+
339
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
340
+
341
+ </body>
342
+
343
+ </html>
344
+
345
+
52
346
 
53
347
  ```
54
-
55
- こちらはメインバーの記述になります
56
-
57
- ```HTML
58
-
59
- <main>
60
-
61
- <div class="album py-5 bg-light">
62
-
63
- <div class="container">
64
-
65
-
66
-
67
- <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
68
-
69
- <div class="col ml-2em">
70
-
71
- <div class="card shadow-sm">
72
-
73
- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
74
-
75
-
76
-
77
- <div class="card-body">
78
-
79
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
80
-
81
- <div class="d-flex justify-content-between align-items-center">
82
-
83
- <div class="btn-group">
84
-
85
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
86
-
87
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
88
-
89
- </div>
90
-
91
- <small class="text-muted">9 mins</small>
92
-
93
- </div>
94
-
95
- </div>
96
-
97
- </div>
98
-
99
- </div>
100
-
101
- <div class="col">
102
-
103
- <div class="card shadow-sm">
104
-
105
- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
106
-
107
-
108
-
109
- <div class="card-body">
110
-
111
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
112
-
113
- <div class="d-flex justify-content-between align-items-center">
114
-
115
- <div class="btn-group">
116
-
117
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
118
-
119
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
120
-
121
- </div>
122
-
123
- <small class="text-muted">9 mins</small>
124
-
125
- </div>
126
-
127
- </div>
128
-
129
- </div>
130
-
131
- </div>
132
-
133
- <div class="col">
134
-
135
- <div class="card shadow-sm">
136
-
137
- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
138
-
139
-
140
-
141
- <div class="card-body">
142
-
143
- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
144
-
145
- <div class="d-flex justify-content-between align-items-center">
146
-
147
- <div class="btn-group">
148
-
149
- <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
150
-
151
- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
152
-
153
- </div>
154
-
155
- <small class="text-muted">9 mins</small>
156
-
157
- </div>
158
-
159
- </div>
160
-
161
- </div>
162
-
163
- </div>
164
-
165
- </div>
166
-
167
- </div>
168
-
169
- </div>
170
-
171
-
172
-
173
- </main>
174
-
175
- ```