フロントエンド
2022.12.26

実装時にお世話になる参考サイト5選

こんにちは!フロントエンドエンジニアのまっきーです!
今回は、自分が実際に実装中によくお世話になるいくつかの参考サイトをご紹介していきます!

グラデーション実装参考サイト

CSS Gradient

デザインデータを参考に色、透過度、角度、支点、終点を入力することで背景グラデーションをCSSで生成してくれるツールです!
間に支点を追加することもでき、線形と円形のどちらにも対応しています。

CSS Gradient

HTMLタグの入れ子ルール参考サイト

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

タグの入れ子ルールで迷った際にこちらのサイトで確認をしています!
単純に調べたいタグを探すも良し、コンテンツモデルの概念について学ぶも良しで自分にあった方法で解決することができます。
少しでも入れ子で不安なことがあれば確認することで正しいルールで実装できると思います。

webliker :【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

CSSアニメーション実装参考サイト

動くWebデザインアイディア帳

アニメーションを実装したいとき基本的なものは大体揃っているので私もよく参考にさせていただいています!
jQueryやCSSの基礎を学べるページもあり、各アニメーションも1から解説してあるので初めてアニメーションを使用する方でも思い通りに実装することが可能です。

動くWEBデザイン アイディア帳

cubic-bezier

このサイトではアニメーションで使用されるイージングを実際に動きを見ながら直感で操作することができます!

アニメーションに指定がある場合やこだわりがある場合はこちらのサイトで確認しながら実装するといいと思います。

cubic-bezier

イージング関数チートシート

先程のサイトではほぼ1から作成するので多様性がある代わりに難しいと感じたかもしれません。

こちらのサイトでは、最初から30のイージングが用意されているので自分の使いたいものを見つけるだけなのでわざわざ作成しなくても実装することができます!

イージング関数チートシート

まとめ

私が主に参考にしているサイトは以上です。いかがだったでしょうか。

皆様の参考になりそうなものがあれば活用してみてください。

 

実装において必ずしも全てを暗記する必要はないと思いますが、自分なりに参考サイトをまとめたり、役に立ちそうなものはストックしておくなどするとスムーズに作業を進められるためおすすめです。

ぜひこの機会に勉強がてら自分なりの参考サイトをまとめてみてはいかがでしょうか。

Contact

お問い合わせ