サイトを構築する際によく利用するCSSの記事まとめ

サイトを構築する際に、いつもお世話になっているCSS関連のエフェクト例や使い方に関するサイトや記事をまとめておきます。

以前は、floatで記述していたコードのほとんどがflexboxで置き換えられます。ブラウザのサポート状況も進んでいるので、昔のブラウザで動作させないといけない場合以外は必ずflexboxを利用するようになりました。

とりあえず、CSSアニメーションの全体的なことはここを見ておけば大丈夫そう。かなり分かりやすく、一通りの機能が説明されていると思いますので、入門者またはちょっと齧っただけの人は見ておくと良さげです。

上記のCSSアニメーション入門でも紹介されているアニメーション利用例。大変、参考になりました。

上記のCSSアニメーション入門では「transition-timing-function」に設定した「linear」や「ease-in-out」などの動作の違いが分かりにくかったので、それについてはこちらで確認。

最近よく見かけるハンバーガーメニューの作成例。

ホバー時の画像の拡大や縮小、さらにはfilterを使ったエフェクトなど。今のところ利用していませんが、機会があれば試してみたいエフェクトです。

上記サイトのデモはこちら（demo:CSS image hover effects）です。