teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

CSSのコードを記載し忘れていました。すみませんm\(__\)m

2016/09/20 07:00

投稿

shohs
shohs

スコア10

title CHANGED
File without changes
body CHANGED
@@ -90,6 +90,68 @@
90
90
 
91
91
  ```
92
92
 
93
+ ```CSS
94
+
95
+
96
+ @charset "UTF-8";
97
+
98
+
99
+ h1 {
100
+ font-family: serif;
101
+ font-size: 28px;
102
+ color: #fff;
103
+ margin-top: 30px;
104
+ text-align: center;
105
+ }
106
+
107
+ h2 {
108
+ font-family: serif;
109
+ font-size: 20px;
110
+ margin-top: 30px;
111
+ text-align: center;
112
+ }
113
+
114
+ #bar {
115
+ height: 50px;
116
+ margin: 20px auto;
117
+ position: relative;
118
+ width: 200px;
119
+ }
120
+
121
+ #bar_over,
122
+ #bar_under {
123
+ height: 50px;
124
+ margin: 10;
125
+ position: absolute;
126
+ }
127
+
128
+
129
+ /*緑色のゲージ部分
130
+ 振った回数によってwidthの%を変えたい*/
131
+ #bar_over {
132
+ background: linear-gradient(#6cbb5a, #000);
133
+ background: -webkit-linear-gradient(#6cbb5a, #000);
134
+ background: -moz-linear-gradient(#6cbb5a, #000);
135
+ background: -o-linear-gradient(#6cbb5a, #000);
136
+ background: -ms-linear-gradient(#6cbb5a, #000);
137
+ width:0%;
138
+ z-index:2;
139
+ }
140
+ /*黒色のゲージ*/
141
+ #bar_under {
142
+ background: linear-gradient(#333, #000);
143
+ background: -webkit-linear-gradient(#333, #000);
144
+ background: -moz-linear-gradient(#333, #000);
145
+ background: -o-linear-gradient(#333, #000);
146
+ background: -ms-linear-gradient(#333, #000);
147
+ width: 100%;
148
+ z-index:1;
149
+ }
150
+ body{
151
+ background-color: #f5820b;
152
+ }
153
+
154
+ ```
93
155
  monacaのログ(ゲージが何%か)
94
156
  ![イメージ説明](0d2eeadd2b9cf194b40a475ed6054ec7.png)
95
157