保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
CSS3の角丸+グラデーションを簡単に作成できるジェネレータ「CSS Corners」*二十歳街道まっしぐら（FC2ブログ時代）
「CSS Corners」は角丸ボタンを作成できるジェネレータです。 CSS3でコードをはいてくれますよ。 角丸の大きさやグラデーション、ボタン全体の大きさが設定できます。 簡単に角丸ボタンが作成でき、さらにCSS3でコードを出してくれるところが便利ですね。 以下に使ってみた様子を載せておきます。 まず「CSS Corners」にアクセスします。 サイト全体はこんな感じ。 真ん中にボタンのプレビューがあります。設定を変更する度に更新されます。 下の灰色部分にCSS3のコードがはきだされますよ。 角丸ボタンを作ってみました。 こんな感じ。 プレビューがとっても便利で、細かい調整などにもってこいです。 CSS3で角丸が表現できるようになって、画像を作成しなくてもよくなりましたね～。 今後いろんな場面で使えそうなのでチェックしておきたいです。 （本記事で紹介したサイト：CSS Corners）
ASCII.jp：Googleも採用！CSS3実践テクニック
「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer（IE）を除く主要なWebブラウザー（Safari/Firefox/ Opera/Google Chrome）は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。 Googleの検索ボタンに注目する 「Google？」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
