セレクタタグ一覧

CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？

ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。

先日書いた「配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう！」が予想外にたくさんのアクセスをいただきました。ありがとうございます。

そのなかで、1pxのラインがあるだけで印象は大きく変わってくる、という記事がありましたので、簡単を出来るリストのサンプルを紹介します。

CSS3で一気に増えたセレクタですが、ちゃんと理解できていないものもあるのではないでしょうか？ということでCSS3で追加されたセレクタをすべて説明します。

CSS3セレクタの中でも特に使い勝手がいいと個人的に思う「nth-child」と「nth-of-type」の使い方を紹介します。似ているようで若干違いますので正しく理解しましょう。

CSSセレクタの使い方によってウェブページの表示速度は変わってきます。

劇的に速くなるということはないと思いますが、「ページの読み込みが0.5秒遅くなると、検索数が20%減少する」とか「ページの読み込みが0.1秒遅くなると、売り上げが1%減少する」なんて聞くと試してみたくなるのではないでしょうか。

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。

テーブルにCSS3セレクタの「E:nth-child(n)」を使って1行ごとに背景色を付けてみます。これだけでかなり見た目の印象も変わると思います。classを使わないのでhtmlを変更する必要もなく、簡単にすべてのテーブルに適用できます。

IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはIE対策も容易なのでぜひお試しください。

CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6～8はほとんど対応できていないことが分かります。

そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。

CSSで外部サイトへのリンクの後にアイコン画像を表示する方法を備忘録的に残しておきます。方法は色んなブログで紹介されていますが、画像リンクにアイコンを表示しない方法は決め手に欠けます。