CSS セレクタについて整理 vol.3

- 2010年9月19日
- Comments(0)

第三回目になりました「CSS セレクタについての整理」です。今回はCSS2で利用可能な擬似クラスについてです。”擬似クラス”って聞いても何かピンとこないって人は結構いるんじゃないでしょうか。それでは実は使うとすごく便利な擬似クラスについて見ていきましょう。


第三回目になりました「CSS セレクタについての整理」です。今回はCSS2で利用可能な擬似クラスについてです。”擬似クラス”って聞いても何かピンとこないって人は結構いるんじゃないでしょうか。それでは実は使うとすごく便利な擬似クラスについて見ていきましょう。


jQueryに備えたCSSセレクタの整理、第2弾です。今回は少し複雑に感じちゃう子セレクタと隣接セレクタについて説明します。これらは現在の主流であるCSS2以降で導入可能なセレクタです。CSSのソースコードを見ていてセレクタに「>」「+」といった記号を見かけることはよくあると思います。


最近になってjQueryの勉強を始めました。実は前からかなり興味を持っていたんです!Lightboxとかスライドショーとか自分で作ってみたいなあって。ということでjQueryを学ぶ前にCSSのセレクタについて整理してみます。

CSS3のテクニックをメモします。
この効果は画像のエッジをぼかしてやわらかい雰囲気を与えるために有効なテクニックで従来は画像編集ソフトで加工して効果を与えていましたが、CSS3のプロパティ
-moz-box-shadow: inset 0px 0px 15px 15px #fff;
-webkit-box-shadow: inset 0px 0px 15px 15px #fff;
box-shadow: inset 0px 0px 15px 15px #fff;
を指定してやることで同等の効果を加えることが可能になるみたいです。
私の環境でテストしてみたところうまくいきませんでした。(FireFox3.6)
疑似クラスの設定がおかしいのかなあ(;´∀`)
うーん、CSS3も少しずつポイントを押さえていきたいです。