teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問カレンダーに表示した数字（日付）の当日部分だけ色を変えたい

編集履歴

質問編集履歴

3

css追記

2018/01/25 02:52

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- スクリプトに色を付けたい
1
+ カレンダーに表示した数字（日付）の当日部分だけ色を変えたい
test CHANGED
@@ -1,4 +1,4 @@
1
- ### 前提・実現したいこと
1
+ cssで作成したカレンダーの当日部分の色を変えて表示したい
2
2
 
3
3
 
4
4
 
@@ -12,6 +12,8 @@
12
12
 
13
13
  やり方がわかりません。
14
14
 
15
+ また、何か他の方法があればぜひお教えいただきたいです。
16
+
15
17
 
16
18
 
17
19
 
@@ -184,25 +186,277 @@
184
186
 
185
187
 
186
188
 
187
-
188
-
189
-
190
-
191
-
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
- ### 試したこと
189
+ ```css
190
+
191
+ .aaa{
192
+
193
+ margin: auto ;
194
+
195
+ border: 2px solid silver;
196
+
197
+ width: 600px ;
198
+
199
+ height: 400px ;
200
+
201
+
202
+
203
+ }
204
+
205
+
206
+
207
+ .bbb{
208
+
209
+ border: 1px solid silver;
210
+
211
+ width: 100% ;
212
+
213
+ height: 10% ;
214
+
215
+
216
+
217
+ }
218
+
219
+
220
+
221
+ .ccc{
222
+
223
+ border: 1px solid silver ;
224
+
225
+ box-sizing: border-box;
226
+
227
+ text-align: center ;
228
+
229
+ height: 10% ;
230
+
231
+ color: red ;
232
+
233
+ }
234
+
235
+
236
+
237
+ .ddd{
238
+
239
+ border: 1px solid silver ;
240
+
241
+ box-sizing: border-box;
242
+
243
+ text-align: center ;
244
+
245
+ height: 10% ;
246
+
247
+ }
248
+
249
+
250
+
251
+ .eee{
252
+
253
+ border: 1px solid silver ;
254
+
255
+ box-sizing: border-box;
256
+
257
+ text-align: center ;
258
+
259
+ height: 10% ;
260
+
261
+ color: blue ;
262
+
263
+ }
264
+
265
+
266
+
267
+ .ccc, .ddd, .eee{
268
+
269
+ float: left ;
270
+
271
+ border-color: silver ;
272
+
273
+ width: 14.286% ;
274
+
275
+ }
276
+
277
+
278
+
279
+ .fff{
280
+
281
+ border: 1px solid silver ;
282
+
283
+ box-sizing: border-box;
284
+
285
+ text-align: center ;
286
+
287
+ height: 16% ;
288
+
289
+ color: red ;
290
+
291
+ }
292
+
293
+
294
+
295
+ .ggg{
296
+
297
+ border: 1px solid silver ;
298
+
299
+ box-sizing: border-box;
300
+
301
+ text-align: center ;
302
+
303
+ height: 16% ;
304
+
305
+ }
306
+
307
+
308
+
309
+ .hhh{
310
+
311
+ border: 1px solid silver ;
312
+
313
+ box-sizing: border-box;
314
+
315
+ text-align: center ;
316
+
317
+ height: 16% ;
318
+
319
+ }
320
+
321
+
322
+
323
+ .iii{
324
+
325
+ border: 1px solid silver ;
326
+
327
+ box-sizing: border-box;
328
+
329
+ text-align: center ;
330
+
331
+ height: 16% ;
332
+
333
+ }
334
+
335
+
336
+
337
+ .jjj{
338
+
339
+ border: 1px solid silver ;
340
+
341
+ box-sizing: border-box;
342
+
343
+ text-align: center ;
344
+
345
+ height: 16% ;
346
+
347
+ }
348
+
349
+
350
+
351
+ .kkk{
352
+
353
+ border: 1px solid silver ;
354
+
355
+ box-sizing: border-box;
356
+
357
+ text-align: center ;
358
+
359
+ height: 16% ;
360
+
361
+ }
362
+
363
+
364
+
365
+ .lll{
366
+
367
+ border: 1px solid silver ;
368
+
369
+ box-sizing: border-box;
370
+
371
+ text-align: center ;
372
+
373
+ height: 16% ;
374
+
375
+ color: blue ;
376
+
377
+ }
378
+
379
+
380
+
381
+ .fff, .ggg, .hhh, .iii, .jjj, .kkk, .lll{
382
+
383
+ float: left ;
384
+
385
+ border-color: silver ;
386
+
387
+ width: 14.286% ;
388
+
389
+ }
390
+
391
+
392
+
393
+
394
+
395
+
396
+
397
+
398
+
399
+ .month{
400
+
401
+ text-align: center ;
402
+
403
+ margin: auto ;
404
+
405
+ color: ;
406
+
407
+ }
408
+
409
+
410
+
411
+ .prev{
412
+
413
+ float: left ;
414
+
415
+ margin: auto ;
416
+
417
+ vertical-align: top ;
418
+
419
+ line-height: 10px ;
420
+
421
+ }
422
+
423
+
424
+
425
+ .next{
426
+
427
+ float: right ;
428
+
429
+ margin: auto ;
430
+
431
+ vertical-align: top ;
432
+
433
+ line-height: 10px ;
434
+
435
+ }
436
+
437
+
438
+
439
+
440
+
441
+ ```
442
+
443
+
444
+
445
+
446
+
447
+
200
448
 
201
449
 
202
450
 
203
451
  最後の</div>の前に下記コードを入れてみましたが
204
452
 
205
- カレンダーの下に表示されてしまいました。
453
+ カレンダーの下に出力されてしまいました。
454
+
455
+ 「print」が出力なのでここを「現在の表示を変えられるもの」に
456
+
457
+ 代えられれば可能なんじゃないかと考えているのですが、
458
+
459
+ そう簡単なものではないのでしょうか。
206
460
 
207
461
 
208
462
 
@@ -232,10 +486,6 @@
232
486
 
233
487
  ```
234
488
 
235
-
236
-
237
- ### 補足情報（FW/ツールのバージョンなど）
489
+ 出力ではなく、表示されている数字の色を変えたくて模索しております。
238
-
239
-
240
-
490
+
241
- ここにより詳細な情報を記載してください。
491
+ 何か良い方法がありましたらお教えいただきたいです。

2

修正しました

2018/01/25 02:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
File without changes

1

コードブロックで囲みました

2018/01/24 05:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -22,184 +22,218 @@
22
22
 
23
23
 
24
24
 
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+ ```html
38
+
25
- ### 発生している問題・エラーメッセージ
39
+ <!DOCTYPE html>
40
+
26
-
41
+ <html>
42
+
27
-
43
+ <head>
44
+
45
+ <title>カレンダー</title>
46
+
47
+ <link rel="stylesheet" type="text/css" href="calendar.css"
48
+
49
+ </head>
50
+
51
+ <body>
52
+
53
+
54
+
55
+ <div class="aaa">
56
+
57
+
58
+
59
+ <div class="bbb">
60
+
61
+ <div class="month">2018年1月</div>
62
+
63
+ <div class="prev"><a href="prev.php">&#8810</a></div>
64
+
65
+ <div class="next"><a href="next.php">&#8811</a></div>
66
+
67
+ </div>
68
+
69
+
70
+
71
+ <div class="ccc">日</div>
72
+
73
+ <div class="ddd">月</div>
74
+
75
+ <div class="ddd">火</div>
76
+
77
+ <div class="ddd">水</div>
78
+
79
+ <div class="ddd">木</div>
80
+
81
+ <div class="ddd">金</div>
82
+
83
+ <div class="eee">土</div>
84
+
85
+
86
+
87
+ <div class="fff"><a href="schedule.php"style="color:#ff0000"></a></div>
88
+
89
+ <div class="ggg"><a href="schedule.php"style="color:#000000">1</a></div>
90
+
91
+ <div class="hhh"><a href="schedule.php"style="color:#000000">2</a></div>
92
+
93
+ <div class="iii"><a href="schedule.php"style="color:#000000">3</a></div>
94
+
95
+ <div class="jjj"><a href="schedule.php"style="color:#000000">4</a></div>
96
+
97
+ <div class="kkk"><a href="schedule.php"style="color:#000000">5</a></div>
98
+
99
+ <div class="lll"><a href="schedule.php">6</a></div>
100
+
101
+
102
+
103
+ <div class="fff"><a href="schedule.php"style="color:#ff0000">7</a></div>
104
+
105
+ <div class="ggg"><a href="schedule.php"style="color:#000000">8</a></div>
106
+
107
+ <div class="hhh"><a href="schedule.php"style="color:#000000">9</a></div>
108
+
109
+ <div class="iii"><a href="schedule.php"style="color:#000000">10</a></div>
110
+
111
+ <div class="jjj"><a href="schedule.php"style="color:#000000">11</a></div>
112
+
113
+ <div class="kkk"><a href="schedule.php"style="color:#000000">12</a></div>
114
+
115
+ <div class="lll"><a href="schedule.php">13</a></div>
116
+
117
+
118
+
119
+ <div class="fff"><a href="schedule.php"style="color:#ff0000">14</a></div>
120
+
121
+ <div class="ggg"><a href="schedule.php"style="color:#000000">15</a></div>
122
+
123
+ <div class="hhh"><a href="schedule.php"style="color:#000000">16</a></div>
124
+
125
+ <div class="iii"><a href="schedule.php"style="color:#000000">17</a></div>
126
+
127
+ <div class="jjj"><a href="schedule.php"style="color:#000000">18</a></div>
128
+
129
+ <div class="kkk"><a href="schedule.php"style="color:#000000">19</a></div>
130
+
131
+ <div class="lll"><a href="schedule.php">20</a></div>
132
+
133
+
134
+
135
+ <div class="fff"><a href="schedule.php"style="color:#ff0000">21</a></div>
136
+
137
+ <div class="ggg"><a href="schedule.php"style="color:#000000">22</a></div>
138
+
139
+ <div class="hhh"><a href="schedule.php"style="color:#000000">23</a></div>
140
+
141
+ <div class="iii"><a href="schedule.php"style="color:#000000">24</a></div>
142
+
143
+ <div class="jjj"><a href="schedule.php"style="color:#000000">25</a></div>
144
+
145
+ <div class="kkk"><a href="schedule.php"style="color:#000000">26</a></div>
146
+
147
+ <div class="lll"><a href="schedule.php">27</a></div>
148
+
149
+
150
+
151
+ <div class="fff"><a href="schedule.php"style="color:#ff0000">28</a></div>
152
+
153
+ <div class="ggg"><a href="schedule.php"style="color:#000000">29</a></div>
154
+
155
+ <div class="hhh"><a href="schedule.php"style="color:#000000">30</a></div>
156
+
157
+ <div class="iii"><a href="schedule.php"style="color:#000000">31</a></div>
158
+
159
+ <div class="jjj"><a href="schedule.php"style="color:#000000"><a></div>
160
+
161
+ <div class="kkk"><a href="schedule.php"style="color:#000000"><a></div>
162
+
163
+ <div class="lll"><a href="schedule.php"><a></div>
164
+
165
+
166
+
167
+
168
+
169
+
170
+
171
+
172
+
173
+ </div>
174
+
175
+
176
+
177
+
178
+
179
+ </body>
180
+
181
+ </html>
28
182
 
29
183
  ```
30
184
 
185
+
186
+
187
+
188
+
189
+
190
+
191
+
192
+
193
+
194
+
195
+
196
+
197
+
198
+
199
+ ### 試したこと
200
+
201
+
202
+
203
+ 最後の</div>の前に下記コードを入れてみましたが
204
+
205
+ カレンダーの下に表示されてしまいました。
206
+
207
+
208
+
209
+ ```php
210
+
31
- エラーメッセージ
211
+ <?php
212
+
213
+ $today = date("j");
214
+
215
+
216
+
217
+ if ($today >= 0) {
218
+
219
+ $color="green";
220
+
221
+ } else {
222
+
223
+ $color = '';
224
+
225
+ }
226
+
227
+ printf ('<span style="color:' . $color . ';">%+d</span><br />', $today);
228
+
229
+
230
+
231
+ ?>
32
232
 
33
233
  ```
34
234
 
35
235
 
36
236
 
37
- ### 該当のソースコード
38
-
39
- <!DOCTYPE html>
40
-
41
- <html>
42
-
43
- <head>
44
-
45
- <title>カレンダー</title>
46
-
47
- <link rel="stylesheet" type="text/css" href="calendar.css"
48
-
49
- </head>
50
-
51
- <body>
52
-
53
-
54
-
55
- <div class="aaa">
56
-
57
-
58
-
59
- <div class="bbb">
60
-
61
- <div class="month">2018年1月</div>
62
-
63
- <div class="prev"><a href="prev.php">&#8810</a></div>
64
-
65
- <div class="next"><a href="next.php">&#8811</a></div>
66
-
67
- </div>
68
-
69
-
70
-
71
- <div class="ccc">日</div>
72
-
73
- <div class="ddd">月</div>
74
-
75
- <div class="ddd">火</div>
76
-
77
- <div class="ddd">水</div>
78
-
79
- <div class="ddd">木</div>
80
-
81
- <div class="ddd">金</div>
82
-
83
- <div class="eee">土</div>
84
-
85
-
86
-
87
- <div class="fff"><a href="schedule.php"style="color:#ff0000"></a></div>
88
-
89
- <div class="ggg"><a href="schedule.php"style="color:#000000">1</a></div>
90
-
91
- <div class="hhh"><a href="schedule.php"style="color:#000000">2</a></div>
92
-
93
- <div class="iii"><a href="schedule.php"style="color:#000000">3</a></div>
94
-
95
- <div class="jjj"><a href="schedule.php"style="color:#000000">4</a></div>
96
-
97
- <div class="kkk"><a href="schedule.php"style="color:#000000">5</a></div>
98
-
99
- <div class="lll"><a href="schedule.php">6</a></div>
100
-
101
-
102
-
103
- <div class="fff"><a href="schedule.php"style="color:#ff0000">7</a></div>
104
-
105
- <div class="ggg"><a href="schedule.php"style="color:#000000">8</a></div>
106
-
107
- <div class="hhh"><a href="schedule.php"style="color:#000000">9</a></div>
108
-
109
- <div class="iii"><a href="schedule.php"style="color:#000000">10</a></div>
110
-
111
- <div class="jjj"><a href="schedule.php"style="color:#000000">11</a></div>
112
-
113
- <div class="kkk"><a href="schedule.php"style="color:#000000">12</a></div>
114
-
115
- <div class="lll"><a href="schedule.php">13</a></div>
116
-
117
-
118
-
119
- <div class="fff"><a href="schedule.php"style="color:#ff0000">14</a></div>
120
-
121
- <div class="ggg"><a href="schedule.php"style="color:#000000">15</a></div>
122
-
123
- <div class="hhh"><a href="schedule.php"style="color:#000000">16</a></div>
124
-
125
- <div class="iii"><a href="schedule.php"style="color:#000000">17</a></div>
126
-
127
- <div class="jjj"><a href="schedule.php"style="color:#000000">18</a></div>
128
-
129
- <div class="kkk"><a href="schedule.php"style="color:#000000">19</a></div>
130
-
131
- <div class="lll"><a href="schedule.php">20</a></div>
132
-
133
-
134
-
135
- <div class="fff"><a href="schedule.php"style="color:#ff0000">21</a></div>
136
-
137
- <div class="ggg"><a href="schedule.php"style="color:#000000">22</a></div>
138
-
139
- <div class="hhh"><a href="schedule.php"style="color:#000000">23</a></div>
140
-
141
- <div class="iii"><a href="schedule.php"style="color:#000000">24</a></div>
142
-
143
- <div class="jjj"><a href="schedule.php"style="color:#000000">25</a></div>
144
-
145
- <div class="kkk"><a href="schedule.php"style="color:#000000">26</a></div>
146
-
147
- <div class="lll"><a href="schedule.php">27</a></div>
148
-
149
-
150
-
151
- <div class="fff"><a href="schedule.php"style="color:#ff0000">28</a></div>
152
-
153
- <div class="ggg"><a href="schedule.php"style="color:#000000">29</a></div>
154
-
155
- <div class="hhh"><a href="schedule.php"style="color:#000000">30</a></div>
156
-
157
- <div class="iii"><a href="schedule.php"style="color:#000000">31</a></div>
158
-
159
- <div class="jjj"><a href="schedule.php"style="color:#000000"><a></div>
160
-
161
- <div class="kkk"><a href="schedule.php"style="color:#000000"><a></div>
162
-
163
- <div class="lll"><a href="schedule.php"><a></div>
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
- </div>
174
-
175
-
176
-
177
-
178
-
179
- </body>
180
-
181
- </html>
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-
191
-
192
-
193
-
194
-
195
- ### 試したこと
196
-
197
-
198
-
199
- ここに問題に対して試したことを記載してください。
200
-
201
-
202
-
203
237
  ### 補足情報（FW/ツールのバージョンなど）
204
238
 
205
239