CSSでグラデーションその1 - nicepaper @ ウィキ

グラデーションについて記述していきます。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>

ID１つクラス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以上で必要*/
}

このように記述しました。