質問編集履歴

1

css追加と画像修正

2020/07/28 02:39

投稿

pecchan
pecchan

スコア555

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  メ○カリっぽいヘッダにしたいです。
10
10
 
11
- ![イメージ説明](40008f6efb284b963811e9fdfb9981bb.jpeg)
11
+ ![イメージ説明](44343e69e5d365f25590285389d6a65d.jpeg)
12
12
 
13
13
 
14
14
 
@@ -97,3 +97,285 @@
97
97
  </header>
98
98
 
99
99
  ```
100
+
101
+
102
+
103
+ ```css
104
+
105
+ @import "bootstrap-sprockets";
106
+
107
+ @import "bootstrap";
108
+
109
+
110
+
111
+ /* mixins, variables, etc. */
112
+
113
+
114
+
115
+ $gray-medium-light: #eaeaea;
116
+
117
+
118
+
119
+ @mixin box_sizing {
120
+
121
+ -moz-box-sizing: border-box;
122
+
123
+ -webkit-box-sizing: border-box;
124
+
125
+ box-sizing: border-box;
126
+
127
+ }
128
+
129
+
130
+
131
+ /* miscellaneous */
132
+
133
+
134
+
135
+ .debug_dump {
136
+
137
+ clear: both;
138
+
139
+ float: left;
140
+
141
+ width: 100%;
142
+
143
+ margin-top: 45px;
144
+
145
+ @include box_sizing;
146
+
147
+ }
148
+
149
+
150
+
151
+ /* universal */
152
+
153
+
154
+
155
+ body {
156
+
157
+ padding-top: 90px;
158
+
159
+ }
160
+
161
+
162
+
163
+ section {
164
+
165
+ overflow: auto;
166
+
167
+ }
168
+
169
+
170
+
171
+ textarea {
172
+
173
+ resize: vertical;
174
+
175
+ }
176
+
177
+
178
+
179
+ .center {
180
+
181
+ text-align: center;
182
+
183
+ h1 {
184
+
185
+ margin-bottom: 10px;
186
+
187
+ }
188
+
189
+ }
190
+
191
+
192
+
193
+ /* typography */
194
+
195
+ h1, h2, h3, h4, h5, h6 {
196
+
197
+ line-height: 1;
198
+
199
+ }
200
+
201
+
202
+
203
+ h1 {
204
+
205
+ font-size: 3em;
206
+
207
+ letter-spacing: -2px;
208
+
209
+ margin-bottom: 30px;
210
+
211
+ text-align: center;
212
+
213
+ }
214
+
215
+
216
+
217
+ h2 {
218
+
219
+ font-size: 1.2em;
220
+
221
+ letter-spacing: -1px;
222
+
223
+ margin-bottom: 30px;
224
+
225
+ text-align: center;
226
+
227
+ font-weight: normal;
228
+
229
+ color: $gray-light;
230
+
231
+ }
232
+
233
+
234
+
235
+ p {
236
+
237
+ font-size: 1.1em;
238
+
239
+ line-height: 1.7em;
240
+
241
+ }
242
+
243
+
244
+
245
+
246
+
247
+ /* header */
248
+
249
+ #logo {
250
+
251
+ float: left;
252
+
253
+ margin-right: 10px;
254
+
255
+ font-size: 1.6em;
256
+
257
+ color: white;
258
+
259
+ text-transform: uppercase;
260
+
261
+ letter-spacing: -1px;
262
+
263
+ padding-top: 9px;
264
+
265
+ font-weight: bold;
266
+
267
+ &:hover {
268
+
269
+ color: white;
270
+
271
+ text-decoration: none;
272
+
273
+ }
274
+
275
+ }
276
+
277
+
278
+
279
+
280
+
281
+
282
+
283
+
284
+
285
+ /* footer */
286
+
287
+ footer {
288
+
289
+ margin-top: 45px;
290
+
291
+ padding-top: 5px;
292
+
293
+ border-top: 1px solid $gray-medium-light;
294
+
295
+ color: $gray-light;
296
+
297
+ a {
298
+
299
+ color: $gray;
300
+
301
+ &:hover {
302
+
303
+ color: $gray-darker;
304
+
305
+ }
306
+
307
+ }
308
+
309
+ small {
310
+
311
+ float: left;
312
+
313
+ }
314
+
315
+ ul {
316
+
317
+ float: right;
318
+
319
+ list-style: none;
320
+
321
+ li {
322
+
323
+ float: left;
324
+
325
+ margin-left: 15px;
326
+
327
+ }
328
+
329
+ }
330
+
331
+ }
332
+
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
343
+
344
+
345
+ /* forms */
346
+
347
+ input, textarea, select, .uneditable-input {
348
+
349
+ border: 1px solid #bbb;
350
+
351
+ width: 100%;
352
+
353
+ margin-bottom: 15px;
354
+
355
+ @include box_sizing;
356
+
357
+ }
358
+
359
+
360
+
361
+ input {
362
+
363
+ height: auto !important;
364
+
365
+ }
366
+
367
+
368
+
369
+
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+
378
+
379
+
380
+
381
+ ```