質問編集履歴

1

不要なcssを消し、指示通りに修正いたしました

2017/11/19 03:18

投稿

TaisukeShimane
TaisukeShimane

スコア14

test CHANGED
File without changes
test CHANGED
@@ -1,707 +1,3 @@
1
- 以下のよに記述し、上部のタブメニューのデザインを変えようとしてるのですが、上部の2/3かCSSが適用されません
1
+ 回答ありがとござ
2
2
 
3
- toolbarにCSSを当てたのですが、そうすると一切CSSが適用されなくなてしまい困っています。
4
-
5
- たか具体的どこを修正すれば良いのかご指導頂きた投稿ていただきます。
3
+ さん非常親切にしてり助かっています。
6
-
7
-
8
-
9
-
10
-
11
- ```html
12
-
13
- <!DOCTYPE HTML>
14
-
15
- <html>
16
-
17
- <head>
18
-
19
- <meta charset="utf-8">
20
-
21
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
22
-
23
- <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
24
-
25
- <script src="components/loader.js"></script>
26
-
27
- <script src="lib/onsenui/js/onsenui.min.js"></script>
28
-
29
-
30
-
31
- <link rel="stylesheet" href="components/loader.css">
32
-
33
- <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
34
-
35
- <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
36
-
37
- <link rel="stylesheet" href="css/style.css">
38
-
39
-
40
-
41
- <script>
42
-
43
- ons.ready(function() {
44
-
45
- console.log("Onsen UI is ready!");
46
-
47
- });
48
-
49
-
50
-
51
- window.fn = {};
52
-
53
- window.fn.open = function() {
54
-
55
- var menu = document.getElementById('menu');
56
-
57
- menu.open();
58
-
59
- };
60
-
61
- window.fn.load = function(page) {
62
-
63
- var content = document.getElementById('content');
64
-
65
- var menu = document.getElementById('menu');
66
-
67
- content
68
-
69
- .load(page)
70
-
71
- .then(menu.close.bind(menu));
72
-
73
- };
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
- </script>
82
-
83
- </head>
84
-
85
-
86
-
87
-
88
-
89
- <body>
90
-
91
-
92
-
93
- <body>
94
-
95
- <ons-splitter>
96
-
97
- <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
98
-
99
-
100
-
101
- //ページの内容
102
-
103
- <ons-page>
104
-
105
- <ons-list>
106
-
107
- <ons-list-header>ATHLETE BOOK</ons-list-header>
108
-
109
- <ons-list-item onclick="fn.load('tab.html')" tappable>
110
-
111
- ホーム
112
-
113
- </ons-list-item>
114
-
115
- <ons-list-item onclick="fn.load('settings.html')" tappable>
116
-
117
- 設定
118
-
119
- </ons-list-item>
120
-
121
- <ons-list-item onclick="fn.load('about.html')" tappable>
122
-
123
- 運営会社
124
-
125
- </ons-list-item>
126
-
127
- </ons-list>
128
-
129
- <ons-list>
130
-
131
- <ons-list-item onclick="fn.load('login.html')" tappable>
132
-
133
- ログイン
134
-
135
- </ons-list-item>
136
-
137
- </ons-page>
138
-
139
-
140
-
141
-
142
-
143
- //サイド用の枠
144
-
145
- </ons-splitter-side>
146
-
147
- <ons-splitter-content id="content" page="tab.html"></ons-splitter-content>
148
-
149
- </ons-splitter>
150
-
151
-
152
-
153
- //ページ内容
154
-
155
- <ons-template id="tab.html">
156
-
157
- <ons-page>
158
-
159
- <ons-tabbar>
160
-
161
- <ons-tab page="home.html" label="HOME" active>
162
-
163
- </ons-tab>
164
-
165
- <ons-tab page="home2.html" label="TEAM">
166
-
167
- </ons-tab>
168
-
169
- <ons-tab page="home3.html" label="案件">
170
-
171
- </ons-tab>
172
-
173
- <ons-tab page="home4.html" label="チャット">
174
-
175
- </ons-tab>
176
-
177
- <ons-tab page="home5.html" label="検索">
178
-
179
- </ons-tab>
180
-
181
- </ons-tabbar>
182
-
183
- </ons-page>
184
-
185
- </ons-template>
186
-
187
-
188
-
189
- //ページの内容
190
-
191
- <ons-template id="home.html">
192
-
193
- <ons-page>
194
-
195
- <ons-toolbar>
196
-
197
- <div class="left">
198
-
199
- <ons-toolbar-button onclick="fn.open()">
200
-
201
- <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
202
-
203
- </ons-toolbar-button>
204
-
205
- </div>
206
-
207
- <div class="center">
208
-
209
- HOOK
210
-
211
- </div>
212
-
213
- </ons-toolbar>
214
-
215
-
216
-
217
- <p style="text-align: center; opacity: 0.6; padding-top: 3px;">
218
-
219
- HOOK
220
-
221
- </p>
222
-
223
- </ons-page>
224
-
225
- </ons-template>
226
-
227
-
228
-
229
- <ons-template id="home2.html">
230
-
231
- <ons-page>
232
-
233
- <ons-toolbar>
234
-
235
- <div class="left">
236
-
237
- <ons-toolbar-button onclick="fn.open()">
238
-
239
- <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
240
-
241
- </ons-toolbar-button>
242
-
243
- </div>
244
-
245
- <div class="center">
246
-
247
- TEAM
248
-
249
- </div>
250
-
251
- </ons-toolbar>
252
-
253
- <p style="text-align: center; opacity: 0.6; padding-top: 3px;">
254
-
255
- HOOK
256
-
257
- </p>
258
-
259
- </ons-page>
260
-
261
- </ons-template>
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
- <ons-template id="home3.html">
270
-
271
- <ons-page>
272
-
273
- <ons-toolbar>
274
-
275
- <div class="left">
276
-
277
- <ons-toolbar-button onclick="fn.open()">
278
-
279
- <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
280
-
281
- </ons-toolbar-button>
282
-
283
- </div>
284
-
285
- <div class="center">
286
-
287
- 案件
288
-
289
- </div>
290
-
291
- </ons-toolbar>
292
-
293
- <p style="text-align: center; opacity: 0.6; padding-top: 3px;">
294
-
295
- HOOK
296
-
297
- </p>
298
-
299
- </ons-page>
300
-
301
- </ons-template>
302
-
303
-
304
-
305
-
306
-
307
-
308
-
309
- <ons-template id="home4.html">
310
-
311
- <ons-page>
312
-
313
- <ons-toolbar>
314
-
315
- <div class="left">
316
-
317
- <ons-toolbar-button onclick="fn.open()">
318
-
319
- <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
320
-
321
- </ons-toolbar-button>
322
-
323
- </div>
324
-
325
- <div class="center">
326
-
327
- チャット
328
-
329
- </div>
330
-
331
- </ons-toolbar>
332
-
333
- <p style="text-align: center; opacity: 0.6; padding-top: 3px;">
334
-
335
- HOOK
336
-
337
- </p>
338
-
339
- </ons-page>
340
-
341
- </ons-template>
342
-
343
-
344
-
345
-
346
-
347
- <ons-template id="home5.html">
348
-
349
- <ons-page>
350
-
351
- <ons-toolbar>
352
-
353
- <div class="left">
354
-
355
- <ons-toolbar-button onclick="fn.open()">
356
-
357
- <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
358
-
359
- </ons-toolbar-button>
360
-
361
- </div>
362
-
363
- <div class="center">
364
-
365
- 検索結果
366
-
367
- </div>
368
-
369
- </ons-toolbar>
370
-
371
- <p style="text-align: center; opacity: 0.6; padding-top: 3px;">
372
-
373
- HOOK
374
-
375
- </p>
376
-
377
- </ons-page>
378
-
379
- </ons-template>
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
- <ons-template id="settings.html">
412
-
413
- <ons-page>
414
-
415
- <ons-toolbar>
416
-
417
- <div class="left">
418
-
419
- <ons-toolbar-button onclick="fn.open()">
420
-
421
- <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
422
-
423
- </ons-toolbar-button>
424
-
425
- </div>
426
-
427
- <div class="center">
428
-
429
- 設定
430
-
431
- </div>
432
-
433
- </ons-toolbar>
434
-
435
- <div>
436
-
437
- 設定用の内容
438
-
439
-
440
-
441
- </div>
442
-
443
- </ons-page>
444
-
445
- </ons-template>
446
-
447
-
448
-
449
- <ons-template id="about.html">
450
-
451
- <ons-page>
452
-
453
- <ons-toolbar>
454
-
455
- <div class="left">
456
-
457
- <ons-toolbar-button onclick="fn.open()">
458
-
459
- <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
460
-
461
- </ons-toolbar-button>
462
-
463
- </div>
464
-
465
- <div class="center">
466
-
467
- 運営会社
468
-
469
- </div>
470
-
471
- </ons-toolbar>
472
-
473
- <div>
474
-
475
- アプリについての説明
476
-
477
- <table border="2">
478
-
479
- <th>
480
-
481
- 会社名
482
-
483
- <td>
484
-
485
- 株式会社HOOK
486
-
487
- </td>>
488
-
489
- </tr>>
490
-
491
- <th>
492
-
493
- 代表者名
494
-
495
- <td>
496
-
497
-
498
-
499
- </td>>
500
-
501
- </tr>>
502
-
503
- <th>
504
-
505
- 事業内容
506
-
507
- <td>
508
-
509
-
510
-
511
- </td>>
512
-
513
- </tr>>
514
-
515
- <th>
516
-
517
- 所在地
518
-
519
- <td>
520
-
521
- 東京都港区
522
-
523
- </td>>
524
-
525
- </tr>>
526
-
527
- <th>
528
-
529
- TEL
530
-
531
- <td>
532
-
533
- 090-****-****
534
-
535
- </td>>
536
-
537
- </tr>>
538
-
539
- <th>
540
-
541
- 資本金
542
-
543
- <td>
544
-
545
-
546
-
547
- </td>>
548
-
549
- </tr>>
550
-
551
- </table>
552
-
553
- </div>
554
-
555
- </ons-page>
556
-
557
- </ons-template>
558
-
559
-
560
-
561
-
562
-
563
- <ons-template id="login.html">
564
-
565
- <ons-page>
566
-
567
- <ons-toolbar>
568
-
569
- <div class="left">
570
-
571
- <ons-toolbar-button onclick="fn.open()">
572
-
573
- <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
574
-
575
- </ons-toolbar-button>
576
-
577
- </div>
578
-
579
- <div class="center">
580
-
581
- ログイン
582
-
583
- </form>>
584
-
585
-
586
-
587
-
588
-
589
- </div>
590
-
591
- </ons-toolbar>
592
-
593
- <div>
594
-
595
- <form action="" method="get">
596
-
597
- <fieldset>
598
-
599
- <legend>
600
-
601
- フォーム
602
-
603
- </legend>>
604
-
605
- <label for="username"> ユーザー名: </label>>
606
-
607
- <label for="password"> パスワード: </label>>
608
-
609
- <input type="username" name="username" id="username" >
610
-
611
- <input type="password" name="password" id="password">
612
-
613
- <input type="submit" value="ログイン">
614
-
615
-
616
-
617
- </fieldset>>
618
-
619
- </form>
620
-
621
-
622
-
623
- </div>
624
-
625
-
626
-
627
- </ons-page>
628
-
629
- </ons-template>
630
-
631
-
632
-
633
-
634
-
635
-
636
-
637
- </body>
638
-
639
-
640
-
641
- </body>
642
-
643
- </html>
644
-
645
-
646
-
647
-
648
-
649
- ```
650
-
651
-
652
-
653
- ```CSS
654
-
655
- .center{
656
-
657
- margin: 30 30px 30;
658
-
659
- padding:12px 8px ;
660
-
661
- border-width:0 0 5px 0 ;
662
-
663
- border-color:#1d4cd3;
664
-
665
- border-style:solid;
666
-
667
- background:#fff;
668
-
669
- color:#153fa2;
670
-
671
- line-height:140%;
672
-
673
- font-weight:bold;
674
-
675
-
676
-
677
-
678
-
679
- }
680
-
681
-
682
-
683
-
684
-
685
- .left{
686
-
687
- margin:30 30 30px 30;
688
-
689
- padding:2px 8px;
690
-
691
- border-width:0 0 5px 0 ;
692
-
693
- border-color:#1d4cd3;
694
-
695
- border-style:solid;
696
-
697
- background:#fff;
698
-
699
- color:#153fa2;
700
-
701
- line-height:140%;
702
-
703
- font-weight:bold;
704
-
705
- }
706
-
707
- ```