カレンダーを表示したい
Webサービスやブログなど、特定のジャンルのWebサイトを作成するときは、カレンダーを作ることがよくあります。サーバー側のプログラムでHTMLが出力されることが多く、実際は制作する機会は少ないと思います。
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8">
<style>
.calendar-wrapper{
width: 400px;
}
.calendar{
table-layout: fixed;
width: 100%;
border-collapse:collapse;
border: 1px solid #cdcdcd;
}
.calendar th,.calendar td{
padding: 10px 0;
border:1px solid #cdcdcd;
text-align: center;
vertical-align: middle;
font-size: 14px;
}
.calendar th{
background: #dedede;
}
.calendar th:first-child{
background-color: #e05557;
color: #fff;
}
.calendar td:first-child{
color: #e05557;
}
.calendar th:last-child{
background-color: #207bcf;
color: #fff;
}
.calendar td:last-child{
color:#207bcf;
}
.holiday{
color: #e05557;
}
.calendar caption{
margin:0 0 10px 0;
padding: 10px;
font-size: 14px;
border:5px solid #dedede;
border-radius: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="calendar-wrapper">
<table class="calendar">
<caption>2024/10月</caption>
<thead>
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="holiday">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td class="holiday">13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td class="holiday">20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td class="holiday">27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>実行結果
