タグ

CSS3とセレクタに関するkams3261のブックマーク (3)

  • 復習にぜひ!WebparkのCSS3に関する記事のまとめ

    このブログではCSS3に関する記事がなかなか人気です。個人的にも力を入れているところですのでうれしい限りです。そんな記事をもっと知ってもらいたいということでまとめてみました。単なるまとめですが、新しい発見などあればうれしいです。 CSS3のはじめ まずは基的な内容から。 CSS3について知っておきたいことのまとめ CSSの構造やベンダープレフィックスなど基的な内容を幅広く載せています。CSS3は初めてという方はこれから見ていただければと思います。 保存版!CSS3セレクタの説明書 CSS3はセレクタとプロパティに分かれます。セレクタはこれで網羅できていると思います。 CSS3プロパティの勉強になるジェネレータ16個 プロパティは全部説明しきれないので、習うより慣れろということでジェネレータを使って慣れるのもいいかと思います。 CSS3プロパティの説明 数は少ないですが間違いやすいところ

    復習にぜひ!WebparkのCSS3に関する記事のまとめ
  • [CSS]画像にちょっと素敵なエフェクトを与えるスタイルシートのまとめ

    デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2

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

    CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ

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