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

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

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

webspeedselector.png

ウェブページの高速化のために読んでおきたいサイトのまとめ

ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。

speed-title.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

CSS3を使ってGoogle +1(プラスワン)ボタンを作ってみた

Googleがウェブサイトに設置できる「+1」(プラスワン) ボタンを公開したということで、早速このブログにも設置しました。で、何となくCSSだけで「+1」ボタンを作ってみました。

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

CSS3のジェネレータを紹介します。海外サイトがほとんどですが簡単に使えると思います。それぞれ特徴があって面白いので、試しに色々作ってみればCSS3プロパティの勉強にもなります。
Recent Entry
Popular Entry