HTMLでカレンダーをマークアップする方法を解説

2021年6月22日

時々、Webサイトのサイドバー等にカレンダーを設置しているWebサイトを見かけます。

今回はこのようなカレンダーをHTML(tableタグ)でマークアップする方法についてを解説していきたいと思います。

カレンダーの作り方

それではカレンダーをHTMLでマークアップしていく方法についてを解説していきます。

今回は以下のようなカレンダーを作ることにします。

このようなカレンダーはtableタグを使って作っていくのですが、tableタグの詳しい使い方について知らない方は以下の記事で解説していますので併せてご覧下さい。

HTML

以下がHTMLになります。

<body>
  <div class="calendar-wrap">
    <h1>June 2021</h1>
    <table class="calendar">
      <tr>
        <th scope="col">SUN</th>
        <th scope="col">MON</th>
        <th scope="col">TUE</th>
        <th scope="col">WED</th>
        <th scope="col">THU</th>
        <th scope="col">FRI</th>
        <th scope="col">SAT</th>
      </tr>
      <tr>
        <td class="sun"></td>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td class="sat">5</td>
      </tr>
      <tr>
        <td class="sun">6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td class="sat">12</td>
      </tr>
      <tr>
        <td class="sun">13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td class="sat">19</td>
      </tr>
      <tr>
        <td class="sun">20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td class="sat">26</td>
      </tr>
      <tr>
        <td class="sun">27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
        <td></td>
        <td></td>
        <td class="sat"></td>
      </tr>
    </table>
  </div>
</body>
</html>

HTMLでのポイントは2点あります。

1点目は1行目を作っているtrタグの中身だけthタグにしていることです。

こうすることでここがテーブルの見出しだということが分かるようになり、またscope属性を指定することで、この見出しがどの方向に対する見出しなのかを分かるようにすることが出来ます。(今回は縦方向に対する見出しという意味付けをしたいので、値にはcolと入力します。)

そして2点目は、色を変えたい部分(例: 土曜日、日曜日、祝日など)にだけクラス名を付与してあげるということです。

こうすることで後々CSSで土曜日、日曜日、祝日などの日程だけ色を変更したりといったことが出来る様になります。

CSS

次に、以下がCSSになります。

* {
  margin: 0;
  padding: 0;
}

.calendar-wrap {
  width: 500px;
  background: #eee;
  color: #333;
}

h1 {
  line-height: 100px;
  text-align: center;
  font-size: 30px;
}

.calendar {
  padding: 20px;
  width: 100%;
  table-layout: fixed;
}

th,td {
  text-align: center;
  padding: 10px;
  background-color: #fff;
}

td {
  font-weight: bold;
}

.sun {
  color: red;
}

.sat {
  color: blue;
}

CSSでのポイントはtableタグに対してwidthプロパティ、値100%を指定してあげることです。

今回の場合はtableタグをdivタグ(クラス名: calendar-wrap)で囲い、このdivタグ(クラス名: calendar-wrap)に対してwidthプロパティ、値500pxを指定してカレンダーの横幅を調整しているのですが、tableタグの横幅はデフォルトでは内包している要素の横幅に合わせられます。

そこで、tableタグの横幅を親要素であるdivタグ(クラス名: calendar-wrap)の横幅に合わせてあげなければならないのですが、その為にtableタグにwidthプロパティ、値100%が必要になります。

また、tableタグにtable-layoutプロパティ、fixedを指定してあげることでそれぞれのセルの横幅を均一にしてあげることが出来ます。