【HTML・Googleカレンダー】Webサイトにカレンダーを実装する方法を解説

<div class="calendar-wrap">
  <div class="calendar-title">February 2024</div>
  <table class="calendar">
    <thead>
      <tr>
        <th scope="col" class="sun">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" class="sat">SAT</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sun"></td>
        <td></td>
        <td></td>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td class="sat">3</td>
      </tr>
      <tr>
        <td class="sun">4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td class="sat">10</td>
      </tr>
      <tr>
        <td class="sun">11</td>
        <td class="yasumi">12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td class="sat">17</td>
      </tr>
      <tr>
        <td class="sun">18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td class="yasumi">23</td>
        <td class="sat">24</td>
      </tr>
      <tr>
        <td class="sun">25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td></td>
        <td class="sat"></td>
      </tr>
    </tbody>
  </table>
</div>

.calendar-wrap {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: #eee;
  color: #333;
  padding: 20px;
}

.calendar-title {
  font-size: 30px;
  text-align: center;
  font-weight: bolder;
  margin-bottom: 0.5em;
}

.calendar {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

th,
td {
  text-align: center;
  padding: 10px 0;
  background-color: #fff;
  border: 2px solid #eeeeee;
}

td {
  font-weight: bolder;
}

.sun {
  color: red;
}

.sat {
  color: blue;
}

.yasumi {
  color: red;
}