【勝手にサイト分析】回って回ってまわるぅ〜実践編！！！

2024年7月17日 17:35

あっついですね！溶けてないですか？🍨
私はもうある程度溶けかけております。。。

最近かき氷にはまっていて、あのお店で食べるいい感じのばえるかき氷ではなくてですね、スーパーとかで売ってる一個80円くらいのアレです。
もうほんとに美味しい！サクレモン🍋も好きなんですけど、あのシンプルなミゾレとかをボリボリ食べるのが大好きです。

今日もそんなこんなでサイト分析していこうと思います。
最近サイトをいろいろ見てると、見てるだけでなくて実際作ってみたい！と思う事が多くなりました。
これが作れたら、おもしろそう！思い立ったら吉日٩( ᐛ )و
とゆーことで、、、、、、

気になる部分をTTPシリーズ！

本日はこちらの参考サイト

これを実践してみました。
くるくるまわってる☺️こうゆうの大好きなのです！デコりたい！
（NOTE内できちんと動画で見せれないものなのか？GIF重いのでやめました。PCでないとみれないかも。Xにはりますね！）

どうなってるか構造をチェック。👩‍💻

ざっくりと↓

<p class=”illust”> の後に
::beforeで擬似要素、に回転する画像を入れる(css)
中に、imgタグでアイコンを入れる。（html）

うん、ここまではとってもシンプル😀。できそう！（単純🧠）
やってみます！

え、全然収まっていない、、、笑。何故だろう。。。全然だめだ！！！
しかも、全然回ってもいない。笑　うむむむむむむ、、、
（画像はサクッとにイラレで作りました。）

検証ツールで、囲ってるareaの縦幅のサイズが小さい事に気づく！だから上がかけるのね。
高さと幅を指定してサークルが埋まるようにする。

.test_area p.illust img {
	width:120px;
}

.test_area p.illust::before {
		width: 100%;	
		height: 100%;
		display: block;
		content: '';
		position: absolute;
		top: -67px;
		left: -35px;
		background-image: url(../images/test04.png);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
	}

上手く収まることができました。ホッ🍵
かなりpositionで絶妙に合わせてしまったが、テストなのでいいかっ🍦
でもそもそもにこの画像のサイズを小さくすれば収まったのでは？と思いましたが、、、サクッとつくったのが悪かったかな。
最近思うのは、きちんとサイズを合わせて画像もかき出す事で余計なコードを書かなくて済むし、いいなと。

とにかく今回の目的は回す事なので、回してみます！💪

（10分後……。）動かない。笑
検証ツールで見ても何故にうごいてるかわかりませんでした。
なぜ動くのだ！！！！！！！！

ポチポチポチ、、、💻っお！？
Google先生で、✨@keyframes✨というコードを発見！！

animation: rotate 50s linear infinite ;

このroate（function-name）がanimationとリンクするようにkeyframesに書くと

-webkit-animation: rotate 50s linear infinite;
		animation: rotate 50s linear infinite ;
	}
	@keyframes rotate{
		0%{ transform:rotate(0);}
		100%{ transform:rotate(360deg); }
	  }

回った、、、、感動。🥺🥺🥺✨
spみれないので、Xにはりますね！！！

参考サイトでは、

@keyframes rotation{
  0%{ transform:rotateX(0);}
  100%{ transform:rotateX(360deg); }
}

となっていたので、自分がかいたものとはリンクしていなかったので回らなかったのだと気づきました。

解決、function-nameを、一致させよう！
ここ➡️keyframeの隣のrotation　と、
ここ➡️animation: rotation 50s linear infinite ;
が一致していないときちんとリンクしていないので、アニメーションがどう動くかわからない状態になってしまっていました。

検証ツールではkeyframeの存在を見つけることができませんでした！
そのせいで、プロパティ名がわからずに原因に時間がかかってしまった。

アニメーションの内容まで見れないのかな、勘違いしててけど、
ある！検証ツールどこまでもやはりみせてくれるのね！！！

ここのrotateをポチッとしますと、

ここにありましたとさ！

Computedでも確認できるみたいですね！一覧みたい！

無事に回すことに成功！
やっぱみるのと実際にやってみるのとでは気づきも全然違うのだなと改めて実感。そして嬉しさも🤩。なんでも回してみたくなってしまうな！

また気になった部分を実践してみようとおもいます。
お付き合いありがとうございました。🙏

この記事が気に入ったらサポートをしてみませんか？