表示例
- 20201
- 日
- 月
- 火
- 水
- 木
- 金
- 土
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
HTMLコード
- <ul class="calendar">
- <li><span title="年">2020</span><span title="月">1</span></li>
- <li>日<li>月<li>火<li>水<li>木<li>金<li>土</li>
- <!--日付ここから-->
- <!--水曜始まり--><li><li><li><!--１日～31日--><li class="holiday">1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9<li>10<li>11<li>12<li class="holiday">13<li>14<li>15<li>16<li>17<li>18<li>19<li>20<li>21<li>22<li>23<li>24<li>25<li>26<li>27<li>28<li>29<li>30<li>31
- <!--日付ここまで-->
- </ul>
CSSコード
- ul.calendar{
- width:calc(15% + 14% + 14% + 14% + 14% + 14% + 15%);max-width:385px;margin:0 auto;padding:0;box-shadow:0 1px 4px 0 rgb(206,206,206), 0 0 0 1px rgb(216,216,216);background-color:rgb(199,199,199);list-style:none;line-height:0;
- }
- ul.calendar li{
- display:inline-block;box-sizing:border-box;width:14%;padding:12px 0;border-right:solid 1px rgb(199,199,199);border-bottom:solid 1px rgb(199,199,199);background-color:rgb(254,254,254);text-align:center;line-height:1;white-space:nowrap;overflow:hidden;
- }
- ul.calendar li.holiday{/*休日*/
- background-color:rgb(252,234,233);color:rgb(158,33,22);font-weight:bold;
- }
- ul.calendar li:nth-child(7n+2){/*日曜*/
- width:15%;border-left:0;background-color:rgb(252,234,233);color:rgb(158,33,22);font-weight:bold;
- }
- ul.calendar li:nth-child(7n+8){/*土曜*/
- width:15%;border-right:0;background-color:rgb(229,243,255);color:rgb(0,100,181);font-weight:bold;
- }
- ul.calendar li:nth-child(-n+8){/*曜日表示*/
- padding:calc(12px / 1.618) 0 calc(12px / 1.618 - 1px) 0;border-bottom:0;background-color:rgb(37,37,37);color:rgb(249,249,249);font-size:small;font-weight:bold;
- }
- ul.calendar li:nth-child(2){/*曜日表示(日曜)*/
- background-color:rgb(158,33,22);
- }
- ul.calendar li:nth-child(8){/*曜日表示(土曜)*/
- background-color:rgb(0,100,181);
- }
- ul.calendar li:nth-child(-n+15){
- border-top:0;
- }
- ul.calendar li:nth-child(1){/*年月*/
- width:100%;padding:16px 0 16px 6.1%;border:0;background-color:rgb(252,252,252);color:rgb(32,33,36);text-align:left;font-size:large;font-weight:bold;
- }
- ul.calendar span:nth-child(1)::after{/*年*/
- content:"年";padding:0 4px 0 4px;font-size:small;
- }
- ul.calendar span:nth-child(2)::after{/*月*/
- content:"月";padding:0 4px 0 4px;font-size:small;
- }
- ul.calendar li:empty::after{
- content:"\003000";
- }
カレンダーテンプレート
- ●▲■★の部分を書き換えると、色々な年月のカレンダーが作れます。
- <ul class="calendar">
- <li><span title="年">●</span><span title="月">▲</span></li>
- <li>日<li>月<li>火<li>水<li>木<li>金<li>土</li>
- <!--日付ここから-->
- ■★
- <!--日付ここまで-->
- </ul>
- ●
- 何年(数字のみ) 例：2020
- ▲
- 何月(数字のみ) 例：１
- ■
- <!--日曜始まり-->
- <!--月曜始まり--><li>
- <!--火曜始まり--><li><li>
- <!--水曜始まり--><li><li><li>
- <!--木曜始まり--><li><li><li><li>
- <!--金曜始まり--><li><li><li><li><li>
- <!--土曜始まり--><li><li><li><li><li><li>
- ★
- <!--１日～28日--><li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9<li>10<li>11<li>12<li>13<li>14<li>15<li>16<li>17<li>18<li>19<li>20<li>21<li>22<li>23<li>24<li>25<li>26<li>27<li>28
- <!--１日～29日--><li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9<li>10<li>11<li>12<li>13<li>14<li>15<li>16<li>17<li>18<li>19<li>20<li>21<li>22<li>23<li>24<li>25<li>26<li>27<li>28<li>29
- <!--１日～30日--><li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9<li>10<li>11<li>12<li>13<li>14<li>15<li>16<li>17<li>18<li>19<li>20<li>21<li>22<li>23<li>24<li>25<li>26<li>27<li>28<li>29<li>30
- <!--１日～31日--><li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9<li>10<li>11<li>12<li>13<li>14<li>15<li>16<li>17<li>18<li>19<li>20<li>21<li>22<li>23<li>24<li>25<li>26<li>27<li>28<li>29<li>30<li>31
