Category: CSS3

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ こちらの記事は2010年3月2日に掲載されたものに、最新のブラウザサポート状況やシンタックスなど加筆修正しています。 2011年7月20日： シンタックスの再更新 「Safari 4+」「 Chrome 1+」「 Firefox 3.6+」「Opera 11.10+」などは全てCSS3グラデーションをサポートしています。この幅広いブラウザサポートにより、ますます進歩的で魅力的なアピールを実現出来ます。更に付け加えると、CSS3グラデーションでは代替えのもの（画像など）を指定することが出来るので、CSS3グラデーションをサポートしていないブラウザ上では、単純に代わりの画像などが表示されます。 けれど・・・ちょっと待ってください。もしいずれにせよ画像を使用しなければならないのなら、何故わざわざCSSでグラデーションを宣言する必要があるのというのでしょうか。これは私もかなり長いこと疑問に思ってきたのですが、するだけの価値がある理由が１つあります。それはCSS3グラデーションをサポートしているブラウザは、代替えの画像を読み込まないのです。HTTPリクエストが1つ減るだけで、WEBサイトの読み込みが格段速くなります。 書き方 さて、では本題に入りましょうか。こちらは最もシンプルな、上から下へのライン状のグラデーション用CSSです： プレフィックス無しバージョンも追加することが出来ますが、まだどのブラウザでもサポートされていないし、間際に仕様変更があっても困るので止めておいた方が無難でしょうね。 ではもう一度、コメント部分を抜いて書式を揃えて書いてみましょう： CSS3 Please!というサイトでは最新のシンタックスを取り揃えているので、参考になさってくださいね。 レンダリングエンジンごとのシンタックス Mozilla系（Firefox、Flockなど） Mozilla系のシンタックスです（詳細はコチラを参照）： グラデーションを宣言する最もシンプルな方法は、ただ色のリストをカンマ区切りするだけです。上から下へ等間隔の配色でグラデーションが完成します。上記のサンプルコードで、グラデーションを下から上に配置したい場合は、pointとangleの部分を90degに変更します。放射状グラデーションの場合はこちらを使ってください：-moz-radial-gradient WebKit系 （Safari、Chromeなど） WebKit系（Chrome 1-9、Safari 4-5）のシンタックスです（詳細はコチラを参照）： 古いシンタックスを廃止しもっとシンプルなものに変更する傾向にあり、Chrome 10とSafari 5.1ではこのように変わりました： Opera Operaではバージョン11.10からMozillaや最新のWebKitと同じ形式でCSS3グラデーションをサポートしています。 Trident（IE） Tridentのシンタックスです（厳密に言うとCSS3ではないのですが・・・。詳細はコチラを参照）： IE9では未確認ですが、IEの6から8は「filter」でうまくいく筈です。けれど正当なコードではありません。「-ms-filter」はIE8以降で動作します。 厳密に言うと、IEはこのリストに加えない方が良いのかもしれません。filterプロパティを使うと実際動作しますし、プログラム的にグラデーションを宣言することが出来て助かります。けれどこの方法だと、初めにfilterを使い画像を代替えとして使用するのではなく、背景画像を宣言することによりfilterを上書きしてしまうのです。かといって代替画像を書かないわけにもいかないし、この方法は使わない方が賢明でしょうね。 Stopとは WebKitでもMozillaでも、グラデーション用のシンタックス内に「stop」があります。このstopはオプションで、色と位置を追加指定することが出来ます。どういう意味かと言うと、グラデーションは単純にある単色から始まって別の単色で終わるのではなく、stopの位置で色を切り替えることが出来、複数指定することが可能です。 HTTPリクエストの減少 FirebugのNetタブでページで使用されている全てのリソースをチェックすると、結構面白いことが見えてきます。 上記のスクリーンショットはFirefox 3.6です。グラデーションの代替え画像が読み込まれていないことが確認出来ます。すなわちHTTPリクエストを減らすことに成功したと言うことです。 けれどFirefox 3.5.8では結局代替え画像も読み込まれてしまうんですけれどね。 こちらの画像はVistaで開いたFirefox 3.5.8です。グラデーションの代替え画像は読み込まれ（しかも使用され）ているのが分かります。なので古いバージョンのブラウザではHTTPリクエストは減少されません。 WebKitのブラウザだともう少しあやふやな感じです。 WebKitブラウザでも、グラデーションをレンダーするためにCSS3プロパティを使用します。けれど同時に代替え画像も読み込んでいるので、HTTPリクエストは省略されていません。唯一の利点は、色指定をプログラム的に宣言出来る事のみです。 2010年8月9日更新： Safari 5.0.1はまだ代替え画像を読み込んでいます。けれどChrome 6.0.472.25 devでは代替え画像を読み込まなくなりました！ 2011年4月1日更新： Safari 5.0.4でもまだ代替え画像を読み込んでいます。Opera 11.10は正しい判断を下しましたね。代替え画像を読み込んでいません。 2011年7月20日更新： 遂にSafari 5.1で、代替え画像を読み込まなくなりました！ 数字で記述すると言うこと HTTPリクエストの減少により得られたスピードアップと言うのは、ものすごい武器になると思います。WEBパフォーマンスについて追究していくと、HTTPリクエストを減少させることがページ読込み時間改善の1番の近道になると思うからです。更にCSS3グラデーションを使う利点がもう1つあります。それはこのグラデーションがプログラム的に数字で記述されていると言うことです。色の変更が必要だったら、数字を少し変更すればいい。わざわざ画像編集プログラムを使って画像修正する必要はないのです。サイトのメンテナンスが非常に簡単になりますし、値の調整も朝飯前です。きっとすぐにこういう値のアニメーション化とかJavaScriptライブラリに追加されるんでしょうね。すごく楽しみですね。 自動伸縮 画像でグラデーションを表現するには、CSSで背景画像として宣言してリピート表示させるのが一般的です（大抵サイズ的にも丁度よい1px幅で作る方が多いですよね。）。けれど結果としては、固定された場所は確かにグラデーションになりますが、はみ出した部分は単色になってしまいます。これでうまくいく場合もありますが、グラデーションがボックス全体の高さと幅に合わせて伸縮（ストレッチ）してくれた方が断然いいですよね。これもまたCSS3グラデーションの方が便利な理由の一つです： では果たして「今」使うべきなのか？ 2010年3月2日現在の回答：そうですね。大分その時期は近付いてますね。もし数値記述を重要視するのであれば、答えは「Yes」です。今から使う方がよいでしょう。けれどスピードアップのためだけに使用するのであれば、現段階サポートしているのはFirefox 3.6+のみなのでもう少し待った方がよいかもしれませんね。 2011年4月1日現在の回答：概ね「Yes」です。特に線状グラデーションならば、是非使ってみましょう。線状グラデーションはクロスブラウザ対応ですし、サポートしていないブラウザでは使用されないだけですからね。勿論実際の使用ケースによって異なりますが、一般的にグラデーションは視覚的にも微妙な表現ですし、単色カラーや画像で置き換えたとしてもさほど大きな問題にもならないかと思います。 参考サイト WebKitブログ － グラデーション用最新シンタックス Mozilla docs － 線状グラデーション、線状グラデーションの繰り返し、放射状グラデーション、放射状グラデーションの繰り返し CSS3 Please － グラデーション用の最新シンタックスやその他CSS3関連情報多数 Lea Verou － 巧妙かつ実践的な背景テクニック、グラデーション用構文自動作成コンバータ Opera紹介ブログ － 線状グラデーションサポート グラデーションギャラリー 放射状グラデーションに関する情報多数