もうすぐ！お花見のシーズン

だんだん春めいて来ましたね！春になると、桜が咲き始めます。
春や桜と聞くとあなたは、何を連想しますか？

ピンクをメインに、花びらを散らしたホームページを作ってみよう。

【HTML構文】




  
  
  全国お花見ガイド

背景はこちら

フリー素材です。背景に使うよ。

【CSS(スタイルシート)】

body{text-align:center;
background-image:url(/*桜の背景を入れる*/);
background-size:cover;}
img {width:100%;}

.flex{
width:80%;
background-color:rgba(255, 255, 255, 0.5);;
margin:auto;
padding:2px;
display:flex;}

.flex div{
width:100%;
margin:1px;}

h2{font-size:1em;}

/* 桜を表示するコンテナのスタイル */
.cherry-blossom-container {
  position: relative;
  height: 100vh; /* コンテナの高さ */
  width: 100%; /* コンテナの横幅 */
  overflow: hidden; /* コンテナからはみ出した要素を隠す */
}

/* 桜の花びらのスタイル */
.petal {
  position: absolute;
  background-color: #ffc0cb; /* 花びらの色 */
  border-radius: 150% 0 150% 0;
  animation: animate-petal 10s linear;
}

.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffc0cb;
  border-radius: 150% 0 150% 0;
  transform: rotate(15deg);
}

/* 花びらが降るアニメーション */
@keyframes animate-petal {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(3000deg);
  }
}

【Javascript】
main.jsと命名してください。

(花びらを動かす)
window.addEventListener('DOMContentLoaded', () => {
  // コンテナを指定
  const section = document.querySelector('.cherry-blossom-container');

  // 花びらを生成する関数
  const createPetal = () => {
    const petalEl = document.createElement('span');
    petalEl.className = 'petal';
    const minSize = 10;
    const maxSize = 15;
    const size = Math.random() * (maxSize + 1 - minSize) + minSize;
    petalEl.style.width = `${size}px`;
    petalEl.style.height = `${size}px`;
    petalEl.style.left = Math.random() * innerWidth + 'px';
    section.appendChild(petalEl);

    // 一定時間が経てば花びらを消す
    setTimeout(() => {
      petalEl.remove();
    }, 10000);
  }

  // 花びらを生成する間隔をミリ秒で指定
  setInterval(createPetal, 300);
});

桜の写真はこちらです。