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

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

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

css3-ie678.png

リストに1pxのラインを追加するだけで、印象がぐっとよくなる

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

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

1pxline000.png

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

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

css-selector-tittle.png

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

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

ウェブページ高速化に効果的なCSSセレクタ

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

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

webspeedselector.png

意外と知らない!?CSSセレクタ20個のおさらい

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

css-selector.png

CSS3セレクタで1行ごとにテーブルに背景色をつける

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

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

IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」

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

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

selectivizr02.png

CSSで外部サイトへのリンクの後ろにアイコン画像を表示する

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