▲TOPへ戻る

【CSS】カレンダーデザイン(Calendar Design)、ニューモーフィズムでおしゃれに装飾

calendar

カレンダーのCSSデザイン

以下のようなカレンダーデザインのCSS、そしてポイントを紹介します。

tableにborder-spacing

border-spacingで、tableの 隣り合うセルの間隔を定めます。このプロパティは border-collapse が separate のときのみ適用される。

border-spacing:
1 2 3
4 5 6
7 8 9

tableの1行目、曜日の色を変更

9行目 : 日曜始まりのカレンダーなら、7番目ではなく、1番目にします。
#calendar table tr:nth-child(1) td:nth-child(1)

#calendar table tr:nth-child(1) td {
  background: #2196f3;
}
#calendar table tr:nth-child(1) td:nth-child(7) {
  background: #f44336;
}

ニューモーフィズム(Neumorphism)

以下のジェネレーターで簡単に作れます。

15
<div class="btn-wrapper">
  <div class="box">15</div>
</div>

25,26行目 : ホバーした時に、box-shadowinset を指定することで、影が反転します。

.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
  width: 300px;
  height: 200px;
  background: #edf1f4;
}
.btn-wrapper .box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  color: #333;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.1), 
    -10px -10px 15px #fff;
}
.btn-wrapper .box:hover {
  color: #333;
  box-shadow: inset 10px 10px 15px rgba(0, 0, 0, 0.1),
    inset -10px -10px 15px #fff;
}

参考

js
【javascript】カレンダーの作り方 new date()で日付を取得、計算し、テーブルに表示

まとめ

  1. tableにborder-spacingで、間隔をあける
  2. tr:nth-child(1)で1行目の曜日の色を変更
  3. 月曜日始まりなら、
    tr:nth-child(1) td:nth-child(7)
    で、日曜日だけ色を変える
  4. ニューモーフィズム(Neumorphism)でおしゃれに装飾

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ