CSS Gridでシンプルなカレンダー表示 | かちびと.net

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

[kno]

動的に出力する時も楽なやつだ

[apipix]

シンプル！ 1日目の曜日をCSSで指定するのがなんとなく嫌な気がするんだけど、世の中的にはそういうものなのかな。