SEMTechnologyExtraInformationRecommend週間ブックマークカテゴリーなしTutorial201009/22CSS3、今これだけは覚えておきたい5つのプロパティ(対IE用スクリプトまとめ付き)この記事の読了時間:約9分17秒ツイート比較的最近のサイトでは使われる機会も多くなってきたものの、まだまだ仕様策定段階の状態が続いているCSS3。仕様が確定していないとはいえ、CSS3にはweb制作現場からの切実な要望に答えるような、新しいプロパティが用意されています。相変わらずシェアと実装具合の乖離が激しいIE君さえどーにか対応できれば、このCSS3っちゅーヤツを使わない手はないっ!というワケで今回のエントリーでは、現状で使えるCSS3からの新プロパティの中から、とりあえずコレだけは押さえておこうぜってのを5つ、厳選してみました。[テキストシャドウ]「text-shadow」は、文字に影を落とすエフェクトのためのプロパティです。彼女の愛は、クラウドでした。[ボックスシャドウ]「box-shadow」は、枠に対して影を落とすエフェクト用プロパティです。この技法は今まで「画像の背景」なんかでかなり多用されてきたモノなのですが、これもまたCSSだけで完結させるコトができるようになります。[グラデーション]webデザインに作り込まれた印象を与え、雰囲気をギュッと引き締める効果のあるグラデーション。前にはXHTMLとCSS3だけで描いたドラえもんなんかで脚光を浴びてました。operaでは対応されてなかったり、対応ブラウザ同士でも書き方の互換性が無かったりと、あと一歩な実装環境ではありますが、グラデーション背景のためだけに画像を用意する手間やリソース消費がなくなるのは嬉しい限りですね。細かな調節(何色も使う・斜めに変化する・円形グラデーションetc.)もできるのですが、ひとまずここではシンプルに「2色の線形グラデーション」の書き方をご紹介します。今月は月見バーガー貧乏。[角丸]需要という意味ではコレが一番大きいかもしれない、ボックスの角を丸くする、いわゆる「角丸」のプロパティです。角丸用の背景画像”みたいな手法で、いわば強引に実装していた角丸ですが、CSS3導入後はちゃんとCSSだけで指定ができるようになります。書き方的にはborder要素にかなり似ているので、覚えちゃえばすぐに使いこなせそうなプロパティですね。{border-radius:15px;//(W3C勧告仕様)-moz-border-radius:15px;//Firefox用-webkit-border-radius:15px;//Safari、Chrome用//普通のborder要素と同じく、各角ごとに個別の指定も可能。透明度」という、いわゆるrgba形式での指定が出来るようになるようです。ちなみに「rgba」と「opacity」は双方とも透明度を指定できるプロパティですが、前者が「指定した要素だけに透明度を反映させる」のに対し、後者は「指定した要素上にあるもの全てに透明度を反映させる」という違いがあります。下記の実例ではそこんトコも加味した作りになってるので、cssと実際の表示を見比べてみてください。やまぐちりこ対IE用スクリプトまとめそれではタイトルにも書いた通り、以下に「IEでもCSS3を!」という思想の元に作成された、数々のスクリプトを簡易説明つきでご紹介します。それぞれ重複する機能があり、複数の同時利用は内部でバッティングする可能性がありますので、複数同時利用はそこらへんお気をつけて。PIE.htc恐らく現状では一番メジャーかつ広範に対応されているスクリプトです。border-image」などのプロパティが扱えるようになります。個人的にはコレに「text-shadow」が使えるようになれば完璧じゃないかと思います。現在も誠意改良中らしいので、今後に超期待ですね。uuAltCSS.jsめちゃめちゃ多機能で、もしかしたらいずれjQueryに打って変わるんじゃないかとさえ思ってる国産JSライブラリ「uupaa.js」の派生系スクリプトです。PIE.htc」と同じ程度のコトは出来そうです。一部機能は”制限があるか、結果が多少異なります。”とのコトなので、理想の際はご注意&実機確認をお忘れなく。border-radius」の3点に絞ったスクリプトです。url(ie-css3.htc);」という記述を加えれば良いだけなので、実装はかなり容易ですね。用途がキチっと限られてるので、逆に言えばコレで済むならコレ一択でもいいんじゃないかと。selectivizrこのスクリプトは今までのようなプロパティではなく、セレクタを対応させるためのスクリプトです。コレ単体ではなく、jQueryやmootoolsといったライブラリと同時利用するコトで効果を発揮するという、ちょっと変り種。なんかが使えるようになるので、便利になる事は間違いないですね。css3shadow.htcテキストシャドウとボックスシャドウに特化した、国産のスクリプトです。htmlのhead内にて当スクリプトを読み込むだけで、CSS側は特に何もしなくても良いのがポイント。影の色にrgbaを使えるという隠れ機能も。作る手間とコチラを導入する手間とを、比較した上で使うってコトになるかと思います。css3もhtml5も未だ草案段階の途中ですし、機能面や各ブラウザの実装状況などを見ても、まだまだ発展途上であるコトは否めません。今から着々と素養を蓄えておいて、いざって時にしゃしゃり出て行けるような準備をしときたいですね。第4引数に「文字列をまるめた後に付加する文字列を指定」する際、色々気を付けないと文字化けるよ、というお話。linksDropboxデバイスを選ばないオンラインストレージ。tenpu無広告のおしゃれなファイル転送サービス。ギガファイル便大容量ファイル(25GB)にも対応の転送サービス。aguse.jpURLからサーバやドメイン管理者などを取得。SimilarWeb競合サイト解析ツール。Fontsの全フォントを任意の文字で一覧化。Insightsサイトの読み込み時間と問題箇所をスコア化。LookupHTML特殊文字を類似文字から逆引き出来るサービス。Regexpreg_matchのマッチング結果を出力。Mail時間延長可能なワンタイムメールサービス。ご利用環境チェックツール自分のIP/HOST、OS、ブラウザ、解像度などを表示。Akinator頭に浮かべた人物を当てる超能力サービス。thisこのブログはウェブデザインやプログラミングなどをはじめ、web制作者向けの様々な技術や情報を掲載しています。現・フリーランスwebクリエイター。verb」として、フルスタックフリーランスやってます。