2017.4.24
2020.1.7

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

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

目次

  • CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
  • CSSアニメーション 入門 - Qiita
  • 30 Pure CSS Animation Snippets & Demos
  • CSS3のtransition-timing-functionの動きをサンプルで理解しよう|Webpark
  • CSSで実装するハンバーガーメニュークリック時のエフェクト 10+ | NxWorld
  • CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 | NxWorld

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス

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

CSSアニメーション 入門 - Qiita

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

30 Pure CSS Animation Snippets & Demos

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

CSS3のtransition-timing-functionの動きをサンプルで理解しよう|Webpark

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

CSSで実装するハンバーガーメニュークリック時のエフェクト 10+ | NxWorld

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

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 | NxWorld

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

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

CSS】関連記事