CSS Gridでシンプルなカレンダー表示

Result

CSS Gridを使ってカレンダーを作ろう、みたいなやつです。需要はあるのか分かりませんが個人的にちょっと必要になったのでメモ。

以前書いた凝ったものではなく、非常にシンプルなコードで作るシンプルなカレンダーです。

css

.calendar {/*css gridで7列レイアウトを作る*/
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar-wrapper {/*カレンダーの幅*/
  width: 280px;
}
.weekday {/*曜日部分*/
  background: #eee;
}

ul {/*全体*/
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.first-day {/*月の最初の日の始まり。日曜なら1、月曜なら2、火曜なら3*/
  grid-column-start: 3;
}

/*蛇足。日曜日だけ赤にする。nth-childの7nは固定、+nは月によって変える*/
li.weekday:first-of-type,
li:nth-child(7n+13){
color:red;
}

html

<div class="calendar-wrapper">
  <h1>12月</h1>
  <ul class="calendar">
    <li class="weekday">日</li>
    <li class="weekday">月</li>
    <li class="weekday">火</li>
    <li class="weekday">水</li>
    <li class="weekday">木</li>
    <li class="weekday">金</li>
    <li class="weekday">土</li>
    
    <li class="first-day">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
  </ul>
</div>

CSSもHTMLもシンプルで済みますね

via

Simple Calendar With CSS Grid