1. ホーム
2. パソコン
3. HTML & CSS

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

投稿日 : 2023年01月15日 更新日 : 2023年01月15日

カレンダーのCSSデザイン

tableにborder-spacing

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

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

ニューモーフィズム（Neumorphism）

ニューモーフィズムのジェネレーター

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

.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;
}

参考

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

まとめ