CSS3入門：ドットインストール

引き続きドットインストールでCSSの復習＆お勉強！

CSS3入門 (全19回)

box-shadowやlinear-gradient、transform、

transition、animationなどCSS3の使い方を再確認。

画像やJavaScriptに頼らずにデザインしたり、

動きのあるサイトを作ったりできることにすっかり夢中です。

数字を入れると色や形が決まっていくところが個人的に（*´▽｀*）萌える

▼特に驚いたのが属性セレクタ。

まだまだ知らない指定方法が沢山ありました。

=============================

-要素の後に[]をつけて、特定の属性値を持つ要素に適用することができる！

a[href="http://dotinstall.com"]{color:yellow;}　　=>全体一致

a[href^="http"]{color:yellow} 　　=>　先頭一致

a[href$="jp"]{color:yellow}　　 =>後方一致

a[href*="dotinstall"]{color:yellow} 　　=>部分一致

-要素の状態で指定ができるセレクタ！（フォームなどで使える）

input[type="text"]:disabled{border: 1px solid red;}

:enabledなども利用可能

-さらに、次に続く要素にスタイルを当てる！

input[type="radio"]:checked+label{font-weight:bold;}

ラジオボタンにチェックをするとラベルがboldに。

=============================

今回は便利なサイトも沢山教えてくれました。

★HTML5やCSS3の各ブラウザ対応状況を確認することができるサイト

ベンダプレフィックスが必要かどうか確認しましょう

★とってもとっても便利なCSS3ジェネレーター

出来上がりイメージを想像しながらCSSを書いて、

ブラウザで表示確認＆リロードしながら作業していたのが嘘のような便利さ。

もっと早く視聴するべきでした。