Own products

  • 新規事業のアイディア創造機

Tutorial

2010
09/22

CSS3、今これだけは覚えておきたい5つのプロパティ(対IE用スクリプトまとめ付き)

この記事の読了時間:約917

  • このエントリーをはてなブックマークに追加

比較的最近のサイトでは使われる機会も多くなってきたものの、まだまだ仕様策定段階の状態が続いているCSS3

仕様が確定していないとはいえ、CSS3にはweb制作現場からの切実な要望に答えるような、新しいプロパティが用意されています。

相変わらずシェアと実装具合の乖離が激しいIE君さえどーにか対応できれば、このCSS3っちゅーヤツを使わない手はないっ!

というワケで今回のエントリーでは、現状で使えるCSS3からの新プロパティの中から、とりあえずコレだけは押さえておこうぜってのを5つ、厳選してみました。

厳選ついでに、「爆発しろ」でお馴染みのIEシリーズでもCSS3対応させられるスクリプトなども、ひっそりといくつかまとめてみましたので、こちらも合わせてチェックしてみなはれ♪

これだけは覚えておきたい5つのCSS3プロパティ

それでは以下から実例と共にご紹介していきますが、例によって例の如く、IE6~8で当ページの実例を見ても、無我の境地を悟るだけとなりますのでご了承下さいm(_ _)m

なお、実例は自由奔放かつテキトーの極みなので、そちらも合わせてご了承くださいな☆

text-shadow [テキストシャドウ]

「text-shadow」は、文字に影を落とすエフェクトのためのプロパティです。

一時期デザイナーの間で一世を風靡した(!?)、「太めで濃い色の文字に、1pxの明度が高い影を付ける」なんて技法も、これからはCSSだけで実現できちゃいます!

このプロパティ、実際に当ブログでもちょこちょこと使ってみていますが、ホントかなり使い勝手が良いので、なにはともあれCSS3っちゅーたらまずはコレをおすすめします♪

「text-shadow」プロパティの使い方

p#text {
	text-shadow:1px 2px 3px #f6c399;
	//値は左から"横方向への距離" "縦方向への距離" "ぼかしの距離" "色"
}

上記CSSの実例

彼女の愛は、クラウドでした。

box-shadow [ボックスシャドウ]

「box-shadow」は、枠に対して影を落とすエフェクト用プロパティです。

この技法は今まで「画像の背景」なんかでかなり多用されてきたモノなのですが、これもまたCSSだけで完結させるコトができるようになります。

書き方も上記「text-shadow」と同じような感じなので、合わせて一挙に覚えちゃいましょー!

p#text {
	box-shadow:1px 2px 3px #f6c399;//opera用(W3C勧告仕様)
	-moz-box-shadow:1px 2px 3px #f6c399;//firefox用
	-webkit-box-shadow:1px 2px 3px #f6c399;//Safari、Chrome用
	//値は左から"横方向への距離" "縦方向への距離" "ぼかしの距離" "色"
}

上記CSSの実例

「Don’t be binaly(0か1で語るな)!」

gradient [グラデーション]

webデザインに作り込まれた印象を与え、雰囲気をギュッと引き締める効果のあるグラデーション。

ちょっと前にはXHTMLとCSS3だけで描いたドラえもんなんかで脚光を浴びてました。

まだoperaでは対応されてなかったり、対応ブラウザ同士でも書き方の互換性が無かったりと、あと一歩な実装環境ではありますが、グラデーション背景のためだけに画像を用意する手間やリソース消費がなくなるのは嬉しい限りですね。

結構細かな調節(何色も使う・斜めに変化する・円形グラデーションetc.)もできるのですが、ひとまずここではシンプルに「2色の線形グラデーション」の書き方をご紹介します。

「gradient」プロパティの使い方

p#text {
	background:-moz-linear-gradient(left top, #123456, #abc);//Firefox用
	//値は左から"開始地点" "始まりの色" "終わりの色"
	background:-webkit-gradient(linear, left top, left bottom, from(#123456), to(#abc));//Safari、Chrome用
	//値は左から"グラデーションの形" "開始地点" "終了地点" "始まりの色" "終わりの色"
}

上記CSSの実例

今月は月見バーガー貧乏。

border-radius [角丸]

需要という意味ではコレが一番大きいかもしれない、ボックスの角を丸くする、いわゆる「角丸」のプロパティです。

今まで”無意味な空div + 角丸用の背景画像”みたいな手法で、いわば強引に実装していた角丸ですが、CSS3導入後はちゃんとCSSだけで指定ができるようになります。

書き方的にはborder要素にかなり似ているので、覚えちゃえばすぐに使いこなせそうなプロパティですね。

p#text {
	border-radius:15px;//(W3C勧告仕様)
	-moz-border-radius:15px;//Firefox用
	-webkit-border-radius:15px;//Safari、Chrome用
	//普通のborder要素と同じく、各角ごとに個別の指定も可能。
	-moz-border-radius-topleft:30px;//Firefox用
	-webkit-border-top-left-radius:30px;//Safari、Chrome用
}

上記CSSの実例

→ 耳こねると「じーん!」感じとる猫耳 ←

rgba / opacity [透明度]

今までCSSでの色の指定は「#aadd39」のように、”RedGreenBlueの三原色×16進数”で表記していましたが、css3では「RedGreenBlueの三原色×256進数 + 透明度」という、いわゆるrgba形式での指定が出来るようになるようです。

ちなみに「rgba」と「opacity」は双方とも透明度を指定できるプロパティですが、前者が「指定した要素だけに透明度を反映させる」のに対し、後者は「指定した要素上にあるもの全てに透明度を反映させる」という違いがあります。

下記の実例ではそこんトコも加味した作りになってるので、cssと実際の表示を見比べてみてください。

span#aaa {
	background-color:#f66;
}

span#bbb {
	background-color:#f66;
	opacity: 0.5;
}

span#ccc {
	background-color:rgba(255,128,128,0.5);
}

span#ddd {
	background-color:#f66;
	opacity: 0;
}

上記CSSの実例

夏目ナナ 麻美ゆま 柚木ティナ やまぐちりこ

対IE用スクリプトまとめ

それではタイトルにも書いた通り、以下に「IEでもCSS3を!」という思想の元に作成された、数々のスクリプトを簡易説明つきでご紹介します。

それぞれ重複する機能があり、複数の同時利用は内部でバッティングする可能性がありますので、複数同時利用はそこらへんお気をつけて。

CSS3 PIE.htc

恐らく現状では一番メジャーかつ広範に対応されているスクリプトです。

こちらを導入するコトで、CSS3に対応して無いIEでも「box-shadow / border-radius / rgba / gradient / border-image」などのプロパティが扱えるようになります。

個人的にはコレに「text-shadow」が使えるようになれば完璧じゃないかと思います。

現在も誠意改良中らしいので、今後に超期待ですね。

uuAltCSS.js

めちゃめちゃ多機能で、もしかしたらいずれjQueryに打って変わるんじゃないかとさえ思ってる国産JSライブラリ「uupaa.js」の派生系スクリプトです。

実際に使ってみたわけではないので分かりませんが、ブラウザ別対応表を見る限りだと上記「CSS3 PIE.htc」と同じ程度のコトは出来そうです。

ただし一部機能は”制限があるか、結果が多少異なります。”とのコトなので、理想の際はご注意&実機確認をお忘れなく。

ie-css3.htc

「text-shadow / box-shadow / border-radius」の3点に絞ったスクリプトです。

上記プロパティをCSSにフツーに書いた後で、「behavior: url(ie-css3.htc);」という記述を加えれば良いだけなので、実装はかなり容易ですね。

用途がキチっと限られてるので、逆に言えばコレで済むならコレ一択でもいいんじゃないかと。

selectivizr

このスクリプトは今までのようなプロパティではなく、セレクタを対応させるためのスクリプトです。

しかもコレ単体ではなく、jQueryやmootoolsといったライブラリと同時利用するコトで効果を発揮するという、ちょっと変り種。

:nth-child や ::first-letter なんかが使えるようになるので、便利になる事は間違いないですね。

css3shadow.htc

テキストシャドウとボックスシャドウに特化した、国産のスクリプトです。

htmlのhead内にて当スクリプトを読み込むだけで、CSS側は特に何もしなくても良いのがポイント。

しかも、影の色にrgbaを使えるという隠れ機能も。

curved-corner.htc

ただただ角丸を実現させるためだけのスクリプトです。質実剛健、一直線。

画像を作る手間とコチラを導入する手間とを、比較した上で使うってコトになるかと思います。

css3もhtml5も未だ草案段階の途中ですし、機能面や各ブラウザの実装状況などを見ても、まだまだ発展途上であるコトは否めません。

だからこそ今から着々と素養を蓄えておいて、いざって時にしゃしゃり出て行けるような準備をしときたいですね。
  • このエントリーをはてなブックマークに追加

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

お名前※必須

ご連絡先メールアドレス

お問い合わせ内容※必須

CAPTCHA

captcha

Blog parts

Affiliate