復習にぜひ！WebparkのCSS3に関する記事のまとめ

CSS3のはじめ

まずは基本的な内容から。

CSS3について知っておきたいことのまとめ

CSSの構造やベンダープレフィックスなど基本的な内容を幅広く載せています。CSS3は初めてという方はこれから見ていただければと思います。

保存版！CSS3セレクタの説明書

CSS3はセレクタとプロパティに分かれます。セレクタはこれで網羅できていると思います。

CSS3プロパティの勉強になるジェネレータ16個

プロパティは全部説明しきれないので、習うより慣れろということでジェネレータを使って慣れるのもいいかと思います。

CSS3プロパティの説明

数は少ないですが間違いやすいところを説明しています。

CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い｜Webpark

「nth-child」と「nth-of-type」って見た目も使い方も似ています。ともにかなり使えるセレクタですので、しっかり違いを理解しておきましょう。

透明度を表す「opacity」 と 「RGBa」の違いと使い分け

ともに透明にしたいときに使う「opacity」 と 「RGBa」ですが、使い方はまったく違います。「opacity」 は結構メジャーですが、 「RGBa」は使ったことがないという人も多いのではないでしょうか。

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

個人的に結構使っているtransitionですが、その動きは意外とあまり気にしていませんでした。ということで、その動きを比較して分かりやすくしてみました。

CSS3でできるあれこれ

CSS3を使って色々作っています。

CSS3の勉強になるかも！？画像を使わないボタンの作成手順

画像を使わず画像のようなボタンを作っています。HTMLは触らず、CSSを変えていって画像っぽいボタンに仕上げてみました。順を追って説明していますので分かりやすいかなと思います。

細部にこだわってみた！CSS3を使った美しい横メニューの作り方

アップルっぽいメニューを画像を使わずに作ってみました。結構完成度は高いと思います。実際にブログのメニューに使ってくださった方もいました。特にbox-shadowの使い方にこだわってみました。

CSS3を使って美しく装飾されたテーブルの作り方

CSS3を使ってテーブルを装飾してみました。セレクタの使い方の勉強になると思います。

自由自在！CSS3のtext-shadowを使ってをロゴ作ってみる

text-syadowはCSS3のなかでもかなり使用頻度が高いのではないでしょうか。使い勝手もいいですし、対応していないブラウザでも致命的なことはありません。

「CSS3でできること」を知るために見ておきたい42のサイト

CSS3を使って楽しそうなことをしているサイトを集めてみました。載せる側じゃなくて載せられる側になりたいものです。

IE問題

CSS3を使うにあたって問題となるのがIEの存在です。CSS3への対応が遅いうえに新バージョンへの乗り換えも遅いので本当に困りもんです。

プログレッシブ・エンハンスメントを意識するとCSS3へのためらいが減った

私はこの言葉を聞いてIEを気にせずCSS3を使えるようになりました。IEユーザーは来なくてもいいというわけではありません。

CSS3を使うにあたって知っておきたいIE対策のまとめ

とはいうものの、できる限りIEにも対応させたいという場合はこちら。セレクタは簡単に対応できますがプロパティはなかなか厳しいです。IEのためにここまでしたくないという方もいるかと思います。

IEでもそこそこできる！CSSで作る画像のようなボタン

CSS3が苦手なIEのための様々な対応法を用いて作ったボタンです。

最後に

ということでこのブログのCSS3に関する記事をまとめてみました。

CSS3タグを見ればすぐに探せるのですが、こちらの方が気になる記事が見つけやすいかなと思います。

私もまだまだ勉強中なので、今後もいい記事が書けるようしっかり勉強したいと思います。