おしえて

タグを教えてください。

解決済

質問者：2021五郎蔵
質問日時：2025/03/13 13:30
回答数：4件

HPに桜が舞い散るのを入れたいと思いサンプルのタグを探していました。
<title>ochiba</title>
<style>
body{ position:relative;}
.ochiba{
position:absolute;
top:-30px;
}
#ochiba0.gif{
left: 100px;
animation: fall 3s linear 0s 1 normal forwards ,
swing0 1s ease-in-out 0s 3 alternate none ;
}
#ochiba1{
left: 200px;
animation: fall 3s linear 1s 1 normal forwards ,
swing1 1s ease-in-out 1s 3 alternate none;
}
#ochiba2{
left: 300px;
animation: fall 3s linear 2s 1 normal forwards,
swing2 1s ease-in-out 2s 3 alternate none;
}
#ochiba3{
left: 400px;
animation: fall 19s linear 3s 1 normal forwards, (下まで落ちる時間秒）(落ち始める時間）
swing3 1s ease-in-out 3s 3 alternate none;
}
#ochiba4{
left: 500px;
animation: fall 9s linear 4s 1 normal forwards,
swing4 1s ease-in-out 4s 3 alternate none;
}
@keyframes fall{
from{ top: -30px; }
to{ top: 1000px; }　　（落ちるきる位置）
}
@keyframes swing0{
from{ left: 150px; }
to{ left:100px; }
}
@keyframes swing1{
from{ left: 250px; }
to{ left:200px; }
}
@keyframes swing2{
from{ left: 350px; }
to{ left:300px; }
}
@keyframes swing3{
from{ left: 450px; }
to{ left:400px; }
}
@keyframes swing4{
from{ left: 550px; }
to{ left:500px; }
}
</style>
</head>
<body>
<img id="ochiba0" class="ochiba" src="ochiba0.gif" alt="落ち葉">
<img id="ochiba1" class="ochiba" src="ochiba1.gif" alt="落ち葉">
<img id="ochiba2" class="ochiba" src="ochiba2.gif" alt="落ち葉">
<img id="ochiba3" class="ochiba" src="ochiba3.gif" alt="落ち葉">
<img id="ochiba4" class="ochiba" src="ochiba4.gif" alt="落ち葉">
</body>
</html></body>
</html>
落ち葉が落ちる・・・こんなのがありました。
早速ホームページビルダーを使ってやってみましたが、1回花びらが落ちてしまうと
それでお終いになってしまいます。
これを繰り返し表示するには何処を修正すればよいのでしょうか？
もう一つはこのタグだと落ち葉が5枚ですが、10枚にしたときはどうなりますか・・・
タグの制作は全く出来ない、埼玉在住79歳老人より

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： gura_
回答日時：2025/03/14 22:49

2021五郎蔵さん

　････タグの制作は全く出来ない、･･････

１．誰でも最初からできるわけではありません。まずはご自分に合ったものをインターネットで色々探してコピーペーストしてみたら如何ですか。↓
https://amateur-engineer.com/css-sakura/
https://web-dev.tech/front-end/javascript/cherry …
https://amateur-engineer.com/css-leaf/
＊チャレンジは若返りの秘訣です。

２．ホームページビルダーのエディターズにコピーペストするなら、下記のようなページソースになります。

３．その際のポイントは、html 本体に、css や javascript を正しく組み込めばよいだけ。↓
https://www.tohoho-web.com/css/basic.htm#StyleTag
https://www.sejuku.net/blog/107056#index_id0

４．ソース例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
html {
width: 100%;
height: 100vh;
overflow: hidden;
background: linear-gradient(#00bfff, #fff);
}

.sakura {
position: absolute;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.sakura h1 {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 5rem;
color: #fff;
}

.sakura li{
position: absolute;
list-style: none;
top: -50px;
background: #ffdbed;
border-radius: 0% 70%;
animation: fall 4s linear infinite, sway 2s ease-in-out infinite alternate;
}

@keyframes fall {
to {
top: 120%;
}
}

@keyframes sway1 {
from {
transform: translateX(0px) rotate(0deg);
}
to {
transform: translateX(200px) rotate(-45deg);
}
}

@keyframes sway2 {
from {
transform: translateX(200px) rotate(-45deg);
}
to {
transform: translateX(0px) rotate(0deg);
}
}

.sakura li:nth-child(1){
left: 0%;
width: 24px;
height: 15px;
animation: fall 10s linear infinite,
sway1 3s ease-in-out infinite alternate;
animation-delay: 2s;
}

.sakura li:nth-child(2){
left: 5%;
width: 13px;
height: 9px;
animation: fall 15s linear infinite,
sway1 2s ease-in-out infinite alternate;
animation-delay: 8s;
}

.sakura li:nth-child(3){
left: 15%;
width: 16px;
height: 10px;
animation: fall 9s linear infinite,
sway1 3.5s ease-in-out infinite alternate;
animation-delay: 13s;
}

.sakura li:nth-child(4){
left: 30%;
width: 16px;
height: 10px;
animation: fall 8s linear infinite,
sway2 4s ease-in-out infinite alternate;
animation-delay: 7s;
}
.sakura li:nth-child(5){
left: 40%;
width: 16px;
height: 10px;
animation: fall 10s linear infinite,
sway1 4s ease-in-out infinite alternate;
animation-delay: 0s;
}
.sakura li:nth-child(6){
left: 55%;
width: 24px;
height: 15px;
animation: fall 11s linear infinite,
sway2 3s ease-in-out infinite alternate;
animation-delay: 3s;
}
.sakura li:nth-child(7){
left: 65%;
width: 16px;
height: 10px;
animation: fall 7s linear infinite,
sway2 3.5s ease-in-out infinite alternate;
animation-delay: 7s;
}
.sakura li:nth-child(8){
left: 50%;
width: 13px;
height: 9px;
animation: fall 7s linear infinite,
sway1 3s ease-in-out infinite alternate;
animation-delay: 3s;
}
.sakura li:nth-child(9){
left: 80%;
width: 16px;
height: 10px;
animation: fall 10s linear infinite,
sway2 4s ease-in-out infinite alternate;
animation-delay: 4s;
}
</style>
</head>
<body>
<ul class="sakura">
<h1>Sakura<h1>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

素晴らしい！
Sakura文字や花びらが落ちる要素（画像）が何処から取り込んだのかわかりません・・・
出来ればもう少し初心者向けに説明頂けるとありがたいのですが・・・

通報する

お礼日時：2025/03/15 18:12

No.4

回答者： gura_
回答日時：2025/03/15 21:45

････出来ればもう少し初心者向けに説明頂けるとありがたいのですが・・・･･･････

余り仕組み解析にこだわると、web ページが面白くなくなり、web ページ編集が次第に嫌になってきます。
簡単に見えるページでも、初心者にとっては未知の仕組みや記述が多数組み込まれているので、それを読み解くだけで疲れてしまうからです。
解っても、それが特異な手法で汎用性が少なかったりする････。

まずは、猿真似をして、
次の面白いタグを探した方が好奇心が増し、生産的です。

遥か昔の、好奇心旺盛な幼児の時代に戻り、取り敢えず猿真似をたくさんすることをお勧めします。
猿真似を重ねることで仕組みが分かってくることもあります。

貴方も幼児期にそのような猿真似で日本語を習得してきたはずです。
日本語にでなく意思疎通に興味があったからです。

どうしてもとおっしゃるなら、提示した url関連のページや、他のページをネット上で色々探せば参考になるサイトは色々出てくるでしょう。
ご参考に↓
https://amateur-engineer.com/css-leaf/
https://www.tohoho-web.com/css/prop/animation.htm
https://web-dev.tech/front-end/javascript/autumn …

なお、幼児のように、表示出来ているページテキストを好奇心に任せて適当に変更すれば、どうなるかを試すことも出来ます。そのほうが生産的ですかね。

- 0
- 件

通報する

参考程度に

No.2

回答者： fujillin
回答日時：2025/03/13 14:19

こんにちは

＞これを繰り返し表示するには何処を修正すればよいのでしょうか？
CSSアニメーションと言われる方法を取っていますので、その繰り返し回数の指定を変更すれば可能です。
具体的には、animation-iteration-countと称される部分です。
例えば、ずっと繰り返すなら、
#ochiba0{
left: 100px;
animation: fall 3s linear 0s infinite normal forwards,
swing0 1s ease-in-out 0s infinite alternate none;
}
みたいにするといった要領です。
https://developer.mozilla.org/ja/docs/Web/CSS/an …

＞10枚にしたときはどうなりますか・・・
一枚一枚指定するような方式になっていますので、ご提示の方式でやるのなら、#ochiba0～#ochiba9を作成して、それぞれを同様に設定することになります。

＞タグの制作は全く出来ない～～
回答がチンプンカンプンのようなら、どなたかわかる方にお願いするのが良いと思います。

画像ではありませんが（＝要素で代用）、揺れ落ちるような動作をさせる同じようなものを見つけました。
こちらの方が、動きがもう少しリアルになっているかもしれません。
https://amateur-engineer.com/css-leaf/

※ 上記ではLI要素をそのまま葉っぱに見せていますが、子要素に花びらの画像を入れることで、そのまま花びらが舞い散るように見せることもできるでしょう。
※ 枚数の増減も簡単にできる様に配慮してあると思います。

- 0
- 件

通報する

No.1

回答者： Ogre7077
回答日時：2025/03/13 14:08

下に落ちるアニメの繰り返し回数が 1 回と指定されているので、下まで落ちたら終わってしまいます。

> animation: fall 3s linear 0s 1/*←ココ!*/ normal forwards

無限に繰り返したいならば infinite と変更しましょう。
参考)
https://developer.mozilla.org/ja/docs/Web/CSS/an …

アニメ諸元の一括指定はやや判りづらいのですが、
(落ち始める時間)の後の数字が回数と覚えてください。
参考)
https://developer.mozilla.org/ja/docs/Web/CSS/an …

> 落ち葉が5枚ですが、10枚にしたときは

10枚分書きましょう。