HTML / CSS でカレンダーを作ってみた

 完成イメージ

この記事では、これを作っていきます。

編集するファイルは、

1. index.html
2. style.css

です。

1 カレンダーの背景を作る

index.html

<div class="calendar-wrapper">

 

</div>

style.css

.calendar-wrapper {

height: 400px;

width: 600px;

background-color: rgba(0,0,0,0.1);

margin: 200px auto;

border-radius: 10px;

}

画面

※拡大して撮影しています。

2 表を利用する

index.html

<table>

　<tr>

　　<th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>

　</tr>

　<tr>

　　<td></td><td></td><td></td><td></td><td></td><td>1</td><td>2</td>

　</tr>

　<tr>

　　<td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>

　</tr>

　<tr>

　　<td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>

　</tr>

　<tr>

　　<td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td>

　</tr>

　<tr>

　　<td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td>

　</tr>

</table>

 <table>の中に、<tr>が6つあります。

最初の<tr>の中には、<th>があり、それ以降には、<td>があります。

table・・・表

tr・・・table row(表の行)

th・・・table header(表の見出し)

td・・・table data(表のデータ)

画面

3 カレンダーを背景に収める

style.css

table {

width: 100%;

height: 100%;

text-align: center;

font-size: 20px;

}

text-align: center; で日付を中央揃えにしています。

画面

4 カレンダーを装飾する

index.html

<table>

　<tr id="week">

　　<th id="left-radius">S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th>

　　<th id="right-radius">S</th>

　</tr>

　<tr>

　　<td></td><td></td><td></td><td></td><td></td><td>1</td><td>2</td>

　</tr>

　<tr>

　　<td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>

　</tr>

　<tr>

　　<td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>

　</tr>

　<tr>

　　<td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td>

　</tr>

　<tr>

　　<td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td>

　</tr>

</table>

必要なidを付与しました。

style.css

#week {

　background-color: rgba(0,0,0,0.5);

}

#left-radius {

　border-radius: 10px 0 0 0;

}

#right-radius {

　border-radius: 0 10px 0 0;

}

 見出しの色を変えて、左上と右上を丸くしました。

画面

5 仕上げ

style.css

table {

width: 100%;

height: 100%;

text-align: center;

font-size: 20px;

border-collapse: collapse;

}

不自然に空いてしまったボーダ分を無くしました。

画面(完成)

 参考にしたサイト

サルワカ (https://saruwakakun.com/html-css/basic/table#section1)

Qiita(https://qiita.com/kimihito_/items/a272fec67cae97597e71)