CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけでカレンダーを作成する方法をわかりやすく解説【サンプルコード付き】

Webページにカレンダーを表示したいとき、CSS（スタイルシート）だけでも十分に実現できます。JavaScriptなどのスクリプトに頼らなくても、HTMLのリスト要素とCSSを組み合わせるだけで、月表示のカレンダーを見やすいレイアウトで作成することが可能です。

ここでは、月名の表示、前月・次月へのナビゲーション矢印、曜日ヘッダー、日付グリッド、さらに「今日」の日付を円形でハイライトする演出まで含めた、実用的なカレンダーのサンプルコードを紹介します。

サンプルコード

CSSでカレンダーを作成するには、以下のように記述します。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .calender {
        border: 1px solid darkorchid;
    }
    .month {
        padding: 50px;
        width: 100%;
        background: #874de6;
        text-align: center;
        border: 1px solid rgba(139, 0, 139, 0.671);
    }
    .month ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .month ul li {
        font-size: 30px;
        text-transform: uppercase;
        letter-spacing: 6px;
        color: yellow;
    }
    .month .lastMonth {
        float: left;
        padding-top: 10px;
    }
    .month .nextMonth {
        float: right;
        padding-top: 10px;
    }
    .Days {
        margin: 0;
        padding: 10px 0;
        background-color: rgb(169, 210, 248);
        border: 1px solid rgba(0, 0, 139, 0.514);
    }
    .Days li {
        font-weight: bold;
        display: inline-block;
        width: 13.6%;
        color: rgb(0, 0, 0);
        text-align: center;
    }
    .daysNumber {
        padding: 10px 0;
        background: rgb(235, 255, 182);
        margin: 0;
        font-weight: bold;
    }
    .daysNumber li {
        list-style-type: none;
        display: inline-block;
        width: 13.6%;
        text-align: center;
        margin-bottom: 5px;
        font-size: 12px;
        color: rgb(0, 0, 0);
    }
    .daysNumber li .today {
        padding: 5px;
        background: #17003b;
        font-weight: bolder;
        border-radius: 50%;
        color: rgb(229, 255, 0) !important;
    }
</style>
</head>
<body>
<h1 style="text-align: center;">CSSカレンダーの例</h1>
<div class="calender">
<div class="month">
<ul>
<li class="lastMonth">❮</li>
<li class="nextMonth">❯</li>
<li>
3月<br />
<span>2020</span>
</li>
</ul>
</div>
<ul class="Days">
<li>月</li>
<li>火</li>
<li>水</li>
<li>木</li>
<li>金</li>
<li>土</li>
<li>日</li>
</ul>
<ul class="daysNumber">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li><span class="today">22</span></li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</div>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような出力が得られます。

CSSだけでカレンダーを作成する方法をわかりやすく解説【サンプルコード付き】

コードのポイント解説

月名部分（.month）

濃い紫の背景色（#874de6）に大きなパディングを指定したヘッダーで、月名と年が中央に大きく表示されます。「❮」「❯」の矢印はそれぞれ float: left / float: right によって左右端に配置され、前月・次月への切り替えボタンのような役割を果たします。

曜日ヘッダー（.Days）

各曜日は display: inline-block と width: 13.6% の指定により、7列がほぼ均等に並ぶグリッド状になります。全体に box-sizing: border-box を指定しているため、罫線やパディングを含めてもレイアウトが崩れません。

日付部分（.daysNumber）

曜日ヘッダーと同じ手法で7列構成にし、margin-bottom で行間を調整しています。背景色を変えることで、曜日の行との区別がつくようにしています。

今日の日付のハイライト（.today）

該当日付を span 要素で囲み、border-radius: 50% を指定することで円形の背景になります。これにより、どの日が「今日」なのかひと目でわかる表示になります。

  1. CSSでレスポンシブ対応の価格表を作成する方法【サンプルコード付き】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブ対応の価格表（料金テーブル）を簡単に作成できます。本記事では、メディアクエリとfloatレイアウトを組み合わせた実装方法を、実際に動作するサンプルコードとともに分かりやすく解説します。レスポンシブ価格表のサンプルコード以下は、無料プランと上位プランの2つの価格表を並べて表示し、画面幅が狭くなると自動的に縦積みレイアウトへ切り替わる完全なHTML・CSSコードです。<!DOCTYPE html> <html> <head> <meta name="viewport&qu

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>