グラデーションについて記述していきます。2015年5月25日記事です。
目次
色が連続的に変化すること。
一昔前、webページ制作の時のグラデーションの作り方は、幅10px×高さ60pxなどの画像でグラデーション画像を作り、CSSのbackgroundでその画像を指定し右方向に敷き詰めたり(repeart-x)したりして作っていました。
今では画像を用意せず、CSSのみで記述できるようになってきました。
CSSの記述のみでグラデーションを作る
メリットは、画像を作る必要がなくなるので、制作がより早くなるという点です。一方、デメリットでは、グラデーションは昔のブラウザには対応しないや、ブラウザごとにグラデーションのプロパティの表現が違うため、クロスブラウザ対応する場合にめんどくさい。ベンダープレフィックスをつけないといけない
などの部分があったりします。
※ベンダープレフィックスがわからない方はベンダープレフィックスとはを参照してください。
読んでおくと、この先の記事が読みやすくなります。
昔のブラウザでも表現できるように画像にしようぜ!と思いがちな人は多いかと思いますが、セキュリティやリッチコンテンツのことを考えるとやはりCSSのみで表現できる方向を学習していかなければなりません。
グラデーションをうまく見せるコツは、 開始色と終了色が十六進法表記であまり変わらない色にするということです。また、カラーパレットで近い色にして見せることです。カラーパレットを参照
※赤丸近辺ぐらいの範囲で開始色と終了色を選んでいく。
※開始色と終了色の差が激しい。
divでなにかボックスを作ったり、liタグでメニューを作ったり、h1タグで見出しを作ったりとボックスレベル要素があるタグを使う場合、有効です。今回は真っ白(#FFFFFF)から白に近い灰色(#CCCCCC)にグラデーションをかけていきたいと思います。
グラデーションはとにかくブラウザ間での挙動が違いすぎます。
毎回、グラデーションを書きたい部分に記述していくと、行数もかさみますし、後々変更したいときに、すべてのグラデーションを再び直していかなければなりません。そこでグラデーションだけのクラスを作っておき、自分の記述したいdivないしはliやh1を指定するときに、それぞれの基本属性+グラデーション用の記述をさせておくと、あとあとメンテナンスが楽になります。
HTML部
クラス2つの場合
<div class="box gradient"><!--このようにスペースをあけてbox用のクラスとgradientのクラスを両方指定しておく。--> </div>
ID1つクラス1つの場合
<div id="box" class="gradient"><!--こんな記述でもよい。--> </div>
CSS部
.boxまたは#box{ margin:10px auto; width: 800;; height: 100px; } .gradient{ まったくグラデーションが効かない場合の対応を最初に指定 あるブラウザでの記述方法1 あるブラウザでの記述方法2 あるブラウザでの記述方法3 あるブラウザでの記述方法4 あるブラウザでの記述方法5 }
HTML部
<div class="box gradient"> </div>
※CSSのクラスを二つ読み込む場合、空白をあけてセレクター名を記述します。今回はグラデーションのみのものと、ボックスの高さのものです。
※divで行いましたが、liやh1タグの場合はdivをh1などに変えてみてください。
CSS部
.box{ width:800px; height: 100px; } .gradient{ background: #FFFFFF;/*超古い対応できない場合の背景色は白*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC'); /*IE5.5以上10未満*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')"; /*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/ background: linear-gradient(top, #ffffff, #CCCCCC); /*liner-gradient今後ブラウザアップデートに備え必要になってくる記述*/ background: -o-linear-gradient(top, #ffffff, #CCCCCC); /*Opera10以降で必要*/ background: -ms-linear-gradient(top, #ffffff, #CCCCCC); /*IE10から*/ background: -moz-linear-gradient(top, #ffffff, #CCCCCC); /*Firefox 3.6・4以降で必要*/ background: -webkit-linear-gradient(top, #ffffff, #CCCCCC); /*Safari5.1以上で必要*/ background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC)); /*Safari5以上で必要*/ }
挙動を確認してみましょう。 HTML部
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>グラデーション</title> <link rel="stylesheet" type="text/css" href="gradient.css"> </head> <body> <div class="box gradient1"><p>filter: progid:DXImageTransform.Microsoft.gradient (startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上10未満*/</p> </div> <div class="box gradient2"><p>-ms-filter: "progid:DXImageTransform.Microsoft. gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')"; /*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/</p> </div> <div class="box gradient3"><p>background: linear-gradient(top, #ffffff, #CCCCCC) ;/*liner-gradient今後統一された時に 必要*/</p> </div> <div class="box gradient4"><p>background: -o-linear-gradient(top, #ffffff, #CCCCCC); /*Opera10以降で必要*/</p> </div> <div class="box gradient5"><p>background: -ms-linear-gradient(top, #ffffff, #CCCCCC); /*IE10から*/</p> </div> <div class="box gradient6"><p>background: -moz-linear-gradient(top, #ffffff, #CCCCCC); /*Firefox 3.6・4以降で必要*/</p> </div> <div class="box gradient7"><p>background: -webkit-linear-gradient(top, #ffffff, #CCCCCC); /*Safari5.1以上で必要*/</p> </div> <div class="box gradient8"><p>background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC));/*Safari5以上で必要*/</p> </div> </body> </html>
CSS部
@charset "utf-8"; /* CSS Document */ p{ font-size:20px; color: #000000; } .box{ padding: 5px; margin: 10px auto; width: 800px; height: 70px; border: 1px solid #000; } .gradient1{ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC'); /*IE5.5以上10未満*/ } .gradient2{ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC')"; /*IE9から非推奨となり、10にて廃止だが、昔のブラウザでは汎用性がある*/ } .gradient3{ background: linear-gradient(top, #ffffff, #CCCCCC); /*liner-gradient今後必要*/ } .gradient4{ background: -o-linear-gradient(top, #ffffff, #CCCCCC); /*Opera10以降で必要*/ } .gradient5{ background: -ms-linear-gradient(top, #ffffff, #CCCCCC); /*IE10から*/ } .gradient6{ background: -moz-linear-gradient(top, #ffffff, #CCCCCC); /*Firefox 3.6・4以降で必要*/ } .gradient7{ background: -webkit-linear-gradient(top, #ffffff, #CCCCCC); /*Safari5.1以上で必要*/ } .gradient8{ background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CCCCCC)); /*Safari5以上で必要*/ }
このように記述しました。
あれ?Operaがwebkitの認識になってる・・・調べてみる。
2013年2月13日に、今後はレンダリングエンジンとしてのPrestoの開発とOpera Browserでの使用を終了し、今後のリリースにおいてはOpera Browserで使用するレンダリングエンジンをWebKitに変更すると発表した
wikipedia ほうほう。今はWebkit系なのか。とういことで、 最新2015年5月25日現在operaは必要ないが、昔のブラウザのために一応指定はしておく。 ことがいいかもしれません。
でもなぜだろう。liner-gradientはサポートされてるはずなんだが・・・ http://caniuse.com/を見ると、つけなくてもいけるよ!という表が書かれています。小さくて見にくいですが、右上が黄色くなっているところが、ベンダープレフィックスを付ける必要ありという意味です。
謎です。コメントください。