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

時々、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を指定してあげることでそれぞれのセルの横幅を均一にしてあげることが出来ます。

まとめ

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

カレンダーを自社サイトに埋め込みたいと考えられている方は是非1度試してみて下さい。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

著者情報

元日本語教師。現在はフリーランスのWebデザイナー・ライターとして活動しています。

・Web制作(WordPress)
・SEOライティング

お仕事のご依頼お待ちしております!(詳細は運営者情報ページに記載。)

目次