もうすぐ！お花見のシーズン
だんだん春めいて来ましたね！春になると、桜が咲き始めます。
春や桜と聞くとあなたは、何を連想しますか？
ピンクをメインに、花びらを散らしたホームページを作ってみよう。
【HTML構文】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全国お花見ガイド</title> <link rel="stylesheet" href="style.css"><!-- CSS読み込み --> </head> <body> <!------- タイトルを入れる -------- > <!------- 紹介文を入れる -------- > <div class="cherry-blossom-container"> <section class="flex"> <!------- きみだけのアイテムを4つ入れる------> <div> <!------- タイトルを入れる -------- > <!------- 写真を入れる --------> </div> <div> <!------- タイトルを入れる -------- > <!------- 写真を入れる --------> </div> <div> <!------- タイトルを入れる -------- > <!------- 写真を入れる --------> </div> <div> <!------- タイトルを入れる -------- > <!------- 写真を入れる --------> </div> </section> </div> <script src="main.js"></script><!-- JS読み込み --> </body> </html> |
背景はこちら
フリー素材です。背景に使うよ。
【CSS(スタイルシート)】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
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と命名してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
(花びらを動かす) 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); }); |
桜の写真はこちらです。
