nicepaper @ ウィキ
nicepaper @ ウィキ
「CSSでグラデーションその1」の編集履歴（バックアップ）一覧に戻る

CSSでグラデーションその1 - (2015/05/25 (月) 08:26:29) のソース

グラデーションについて記述していきます。

目次
#contents

*グラデーションとは
色が連続的に変化すること。
一昔前、webページ制作の時のグラデーションの作り方は、幅10px×高さ60pxなどの画像でグラデーション画像を作り、CSSのbackgroundでその画像を指定し右方向に敷き詰めたり(repeart-x)したりして作っていました。
今では画像を用意せず、CSSのみで記述できるようになってきました。
CSSの記述のみでグラデーションを作る&color(red){メリットは、画像を作る必要がなくなるので、制作がより早くなるという点です。一方、デメリットでは、グラデーションは昔のブラウザには対応しないや、ブラウザごとにグラデーションのプロパティの表現が違うため、クロスブラウザ対応する場合にめんどくさい。}などの部分があったりします。
昔のブラウザでも表現できるように画像にしようぜ！と思いがちな人は多いかと思いますが、セキュリティやリッチコンテンツのことを考えるとやはりCSSのみで表現できる方向を学習していかなければなりません。
~
~
*グラデーションのコツ（色の勉強？）
グラデーションをうまく見せるコツは、&color(red){開始色と終了色が十六進法表記であまり変わらない色にするということです。また、カラーパレットで近い色にして見せることです。カラーパレットを参照}
#image(width=400,カラーパレット.png)
※赤丸近辺ぐらいの範囲で開始色と終了色を選んでいく。
~
**綺麗なグラデーションの例

~
**汚いグラデーションの例


~
~
*背景色のグラデーション
divでなにかボックスを作ったり、liタグでメニューを作ったり、h1タグで見出しを作ったりとボックスレベル要素があるタグを使う場合、有効です。今回は真っ白（#FFFFFF）から白に近い灰色（#CCCCCC）にグラデーションをかけていきたいと思います。
**今後メンテナンスしやすいように記述するコツ
グラデーションはとにかくブラウザ間での挙動が違いすぎます。&color(red)[毎回、グラデーションを書きたい部分に記述していくと、行数もかさみますし、後々変更したいときに、すべてのグラデーションを再び直していかなければなりません。そこでグラデーションだけのクラスを作っておき、自分の記述したいdivないしはliやh1を指定するときに、それぞれの基本属性＋グラデーション用の記述をさせておくと、あとあとメンテナンスが楽になります。}~
&u(){HTML部}~
&u(){クラス2つの場合}
 <div class="box gradient"><!--このようにスペースをあけてbox用のクラスとgradientのクラスを両方指定しておく。-->
 </div>
&u(){ID１つクラス2つの場合}
 <div id="box" class="gradient"><!--こんな記述でもよい。-->
 </div>
&u(){CSS部}
 .gradient{
  あるブラウザでの記述方法1
  あるブラウザでの記述方法2
  あるブラウザでの記述方法3
  あるブラウザでの記述方法4
  あるブラウザでの記述方法5
 }

**とにかく全部対応させたい

&u(){HTML部}~
 <div class="box gradient">
 </div>
※CSSのクラスを二つ読み込む場合、空白をあけてセレクター名を記述します。今回はグラデーションのみのものと、ボックスの高さのものです。~
※divで行いましたが、liやh1タグの場合はdivをh1などに変えてみてください。

&u(){CSS部}
 .box{
 　  width:800px;
      height: 100px; 
 }
 .gradient{
 	background: #FFFFFF;/*超古い対応しない場合の背景色は白*/
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CCCCCC');/*IE5.5以上*/
 	-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以上で必要*/
 }

**これくらいでいいんでね？
その場合以下です。
&u(){HTML部}

&u(){CSS部}
 .gradient {
     background : -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
     background : -webkit-linear-gradient(top, #fff, #000);
     background : linear-gradient(to bottom, #fff, #000);
 }

~
~
~
~
話は以上です。次はテキストのグラデーションでも書いていきたいと思います。