【コード公開】HTMLとCSSだけでクリスマスを表現してみる

2024年11月21日

そろそろ12月なのでHTMLとCSSだけでクリスマスを表現して見ました。クオリティは低い。

一応コード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Christmas Scene</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="scene">
    <!-- 空 -->
    <div class="sky"></div>

    <!-- 雪 -->
    <div class="snow">
      <!-- 雪の結晶 -->
      <div class="snowflake"></div>
      <div class="snowflake"></div>
      <div class="snowflake"></div>
      <div class="snowflake"></div>
      <div class="snowflake"></div>
      <div class="snowflake"></div>
      <div class="snowflake"></div>
      <div class="snowflake"></div>
      <div class="snowflake"></div>
      <div class="snowflake"></div>
    </div>

    <!-- 街並み -->
    <div class="town">
      <!-- 普通の家 -->
      <div class="house">
        <div class="roof"></div>
        <div class="door"></div>
        <div class="window window1"></div>
        <div class="window window2"></div>
      </div>

      <!-- 煙突付きの家 -->
      <div class="house chimney">
        <div class="roof"></div>
        <div class="door"></div>
        <div class="window window1"></div>
        <div class="window window2"></div>
      </div>

      <!-- クリスマス飾りのある家 -->
      <div class="house decorated">
        <div class="roof"></div>
        <div class="door"></div>
        <div class="window window1"></div>
        <div class="window window2"></div>
        <div class="lights"></div>
      </div>
    </div>

    <!-- ツリー -->
    <div class="tree">
      <div class="triangle"></div>
      <div class="triangle smaller"></div>
      <div class="triangle smallest"></div>
      <div class="tree-base"></div>
    </div>
  </div>
</body>
</html>

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #1d2951;
  overflow: hidden;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.sky {
  position: absolute;
  width: 100%;
  height: 70%;
  background: linear-gradient(to bottom, #001a4d);
}

.snow {
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: white;
  border-radius: 50% / 10%;
}

.town {
  position: absolute;
  bottom: 10%;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: flex-end; /* 家の下端を揃える */
  width: 100%;
}

/* 家のベース */
.house {
  position: relative;
  width: 100px;
  height: 100px;
  background: #8b0000; /* 赤い家 */
  border: 5px solid #ffffff; /* 白い枠 */
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* 中身を下端に揃える */
}

/* 屋根 */
.house .roof {
  position: absolute;
  top: -50px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #654321; /* 茶色の屋根 */
}

/* 煙突 */
.house.chimney .roof::before {
  content: '';
  position: absolute;
  top: 0px; /* 屋根の上端に配置 */
  left: 20px; /* 屋根の右端に寄せる */
  width: 20px;
  height: 40px;
  background: #5b5b5b; /* グレーの煙突 */
  border-radius: 3px; /* 煙突の角を少し丸める */
}

/* ドア */
.house .door {
  position: absolute;
  bottom: 10px;
  left: 40px;
  width: 20px;
  height: 40px;
  background: #654321; /* 茶色のドア */
  border-radius: 3px;
}

/* 窓 */
.house .window {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ffffff; /* 白い窓 */
  border: 2px solid #000000; /* 黒い枠 */
  border-radius: 3px;
}

.house .window1 {
  top: 20px;
  left: 20px;
}

.house .window2 {
  top: 20px;
  right: 20px;
}

/* クリスマス装飾 */
.house.decorated .lights {
  position: absolute;
  top: -10px; /* 家の上端に装飾を配置 */
  left: 0;
  width: 100%;
  height: 10px;
  background: repeating-linear-gradient(
    45deg,
    red 0,
    red 10%,
    yellow 10%,
    yellow 20%,
    green 20%,
    green 30%
  );
  z-index: 1; /* 屋根の後ろに隠れないように */
}

/* ツリー */
.tree {
  position: absolute;
  bottom: 10%;
  left: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid green;
}

.triangle.smaller {
  border-bottom: 60px solid green;
  margin-top: -20px;
}

.triangle.smallest {
  border-bottom: 40px solid green;
  margin-top: -20px;
}

.tree-base {
  width: 30px;
  height: 40px;
  background: brown;
  margin-top: -10px;
}

/* 雪が降るアニメーション */
.snowflake {
  position: absolute;
  top: -600px; /* 画面の外から降り始める */
  left: 50%;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: snowfall 10s linear infinite;
}

@keyframes snowfall {
  0% {
    transform: translateX(0) translateY(-100px); /* 上部外から開始 */
    opacity: 1;
  }
  100% {
    transform: translateX(100px) translateY(100vh); /* 下部まで移動 */
    opacity: 0;
  }
}

/* ランダムな位置と速度を設定 */
.snowflake:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 8s;
}

.snowflake:nth-child(2) {
  left: 20%;
  animation-delay: 1s;
  animation-duration: 9s;
}

.snowflake:nth-child(3) {
  left: 30%;
  animation-delay: 2s;
  animation-duration: 10s;
}

.snowflake:nth-child(4) {
  left: 40%;
  animation-delay: 3s;
  animation-duration: 7s;
}

.snowflake:nth-child(5) {
  left: 50%;
  animation-delay: 4s;
  animation-duration: 11s;
}

.snowflake:nth-child(6) {
  left: 60%;
  animation-delay: 1.5s;
  animation-duration: 8s;
}

.snowflake:nth-child(7) {
  left: 70%;
  animation-delay: 2.5s;
  animation-duration: 9s;
}

.snowflake:nth-child(8) {
  left: 80%;
  animation-delay: 3.5s;
  animation-duration: 7s;
}

.snowflake:nth-child(9) {
  left: 90%;
  animation-delay: 4.5s;
  animation-duration: 10s;
}

.snowflake:nth-child(10) {
  left: 95%;
  animation-delay: 5.5s;
  animation-duration: 12s;
}