タグ

2012年12月6日のブックマーク (2件)

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

    CSSセレクタの使い方によってウェブページの表示速度は変わってきます。 劇的に速くなるということはないと思いますが、「ページの読み込みが0.5秒遅くなると、検索数が20%減少する」とか「ページの読み込みが0.1秒遅くなると、売り上げが1%減少する」なんて聞くと試してみたくなるのではないでしょうか。 ウェブページの高速化とCSSセレクタの関係については「CSSセレクタの高速化の話し - Webtech Walker」で紹介されていましたが、先日GoogleのPage Speedのページでなかで「Use efficient CSS selectors(効率のよいCSSセレクタを使う)」と紹介されていて内容も若干違うので、こちらを簡単に例などを交えて解説してみます。 ブラウザはセレクタを右から左へ判別していく まず知っておきたいのは「ブラウザはセレクタを右から左へマッチするか探していく」というこ

    ウェブページ高速化に効果的なCSSセレクタ
  • スタイルの優先順位-CSSの基本

    ■スタイルの優先順位 よりタグに近い、より後から読み込まれたスタイルが優先される 複数箇所でスタイルを指定すると、同じプロパティに異なる値が指定されてスタイルが競合することも起こりえます。 こうした場合には、よりタグに近いところで指定されたスタイルや、 より後から読み込まれたスタイルが優先されて、プロパティの値が上書きされます。 例えば、外部CSSファイルの指定では文字色を赤く、 <style>要素による文書単位の指定では黄色く、 style属性による局所的な指定では青く指定した場合には、 より後から読み込まれる値で上書きされるため青い文字となります。 p {color:red;}           /*赤色*/ p {color:yellow;}       /*黄色で上書き*/ p {color:blue;}          /*青色で上書き、この値が有効となる*/ セレクタの種類