「CSSでグラデーションその1」の編集履歴（バックアップ）一覧はこちら
CSSでグラデーションその1 - (2015/05/25 (月) 16:44:25) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
グラデーションについて記述していきます。
目次
#contents
*グラデーションとは
色が連続的に変化すること。
一昔前、webページ制作の時のグラデーションの作り方は、幅10px×高さ60pxなどの画像でグラデーション画像を作り、CSSのbackgroundでその画像を指定し右方向に敷き詰めたり(repeart-x)したりして作っていました。
今では画像を用意せず、CSSのみで記述できるようになってきました。
CSSの記述のみでグラデーションを作る&color(red){メリットは、画像を作る必要がなくなるので、制作がより早くなるという点です。一方、デメリットでは、グラデーションは昔のブラウザには対応しないや、ブラウザごとにグラデーションのプロパティの表現が違うため、クロスブラウザ対応する場合にめんどくさい。ベンダープレフィックスをつけないといけない}などの部分があったりします。
~
※ベンダープレフィックスがわからない方は[[ベンダープレフィックスとは]]を参照してください。&color(red){読んでおくと、この先の記事が読みやすくなります。}
~
昔のブラウザでも表現できるように画像にしようぜ！と思いがちな人は多いかと思いますが、セキュリティやリッチコンテンツのことを考えるとやはりCSSのみで表現できる方向を学習していかなければなりません。
~
~
*グラデーションのコツ（色の勉強？）
グラデーションをうまく見せるコツは、&color(red){開始色と終了色が十六進法表記であまり変わらない色にするということです。また、カラーパレットで近い色にして見せることです。カラーパレットを参照}
#image(width=400,カラーパレット.png)
※赤丸近辺ぐらいの範囲で開始色と終了色を選んでいく。
~
**綺麗なグラデーションの例
#image(width=500,001.png)
#image(width=500,002.png)
~
**汚いグラデーションの例
#image(width=500,003.png)
#image(width=500,004.png)
&color(red){※開始色と終了色の差が激しい。}
~
~
*背景色のグラデーション
divでなにかボックスを作ったり、liタグでメニューを作ったり、h1タグで見出しを作ったりとボックスレベル要素があるタグを使う場合、有効です。今回は真っ白（#FFFFFF）から白に近い灰色（#CCCCCC）にグラデーションをかけていきたいと思います。
**今後メンテナンスしやすいように記述するコツ
グラデーションはとにかくブラウザ間での挙動が違いすぎます。
&color(red){毎回、グラデーションを書きたい部分に記述していくと、行数もかさみますし、後々変更したいときに、すべてのグラデーションを再び直していかなければなりません。そこでグラデーションだけのクラスを作っておき、自分の記述したいdivないしはliやh1を指定するときに、それぞれの基本属性＋グラデーション用の記述をさせておくと、あとあとメンテナンスが楽になります。}~
&u(){HTML部}~
&u(){クラス2つの場合}
<div class="box gradient"><!--このようにスペースをあけてbox用のクラスとgradientのクラスを両方指定しておく。-->
</div>
&u(){ID１つクラス1つの場合}
<div id="box" class="gradient"><!--こんな記述でもよい。-->
</div>
&u(){CSS部}
.boxまたは#box{
margin:10px auto;
width: 800;;
height: 100px;
}
.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以上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以上で必要*/
}
*それぞれの表示を確認してみる。
挙動を確認してみましょう。
&u(){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>
&u(){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以上で必要*/
}
このように記述しました。
**IE(11.0)
#image(width=600,ie.png)
**GoogleChrome(43.0)
#image(width=600,chrome.png)
**Firefox(38.0)
#image(width=600,firefox.png)
**Opera(29.0)
#image(width=600,opera.png)
あれ？Operaがwebkitの認識になってる・・・調べてみる。
>2013年2月13日に、今後はレンダリングエンジンとしてのPrestoの開発とOpera Browserでの使用を終了し、今後のリリースにおいてはOpera Browserで使用するレンダリングエンジンをWebKitに変更すると発表した
~
[[wikipedia:http://ja.wikipedia.org/wiki/Opera]]
ほうほう。今はWebkit系なのか。とういことで、&color(red){最新2015年5月25日現在operaは必要ないが、昔のブラウザのために一応指定はしておく。}ことがいいかもしれません。
*謎
でもなぜだろう。liner-gradientはサポートされてるはずなんだが・・・
http://caniuse.com/を見ると、つけなくてもいけるよ！という表が書かれています。
#image(width500,対応表.png)
謎です。コメントください。
#comment
グラデーションについて記述していきます。
目次
#contents
*グラデーションとは
色が連続的に変化すること。
一昔前、webページ制作の時のグラデーションの作り方は、幅10px×高さ60pxなどの画像でグラデーション画像を作り、CSSのbackgroundでその画像を指定し右方向に敷き詰めたり(repeart-x)したりして作っていました。
今では画像を用意せず、CSSのみで記述できるようになってきました。
CSSの記述のみでグラデーションを作る&color(red){メリットは、画像を作る必要がなくなるので、制作がより早くなるという点です。一方、デメリットでは、グラデーションは昔のブラウザには対応しないや、ブラウザごとにグラデーションのプロパティの表現が違うため、クロスブラウザ対応する場合にめんどくさい。ベンダープレフィックスをつけないといけない}などの部分があったりします。
~
※ベンダープレフィックスがわからない方は[[ベンダープレフィックスとは]]を参照してください。&color(red){読んでおくと、この先の記事が読みやすくなります。}
~
昔のブラウザでも表現できるように画像にしようぜ！と思いがちな人は多いかと思いますが、セキュリティやリッチコンテンツのことを考えるとやはりCSSのみで表現できる方向を学習していかなければなりません。
~
~
*グラデーションのコツ（色の勉強？）
グラデーションをうまく見せるコツは、&color(red){開始色と終了色が十六進法表記であまり変わらない色にするということです。また、カラーパレットで近い色にして見せることです。カラーパレットを参照}
#image(width=400,カラーパレット.png)
※赤丸近辺ぐらいの範囲で開始色と終了色を選んでいく。
~
**綺麗なグラデーションの例
#image(width=500,001.png)
#image(width=500,002.png)
~
**汚いグラデーションの例
#image(width=500,003.png)
#image(width=500,004.png)
&color(red){※開始色と終了色の差が激しい。}
~
~
*背景色のグラデーション
divでなにかボックスを作ったり、liタグでメニューを作ったり、h1タグで見出しを作ったりとボックスレベル要素があるタグを使う場合、有効です。今回は真っ白（#FFFFFF）から白に近い灰色（#CCCCCC）にグラデーションをかけていきたいと思います。
**今後メンテナンスしやすいように記述するコツ
グラデーションはとにかくブラウザ間での挙動が違いすぎます。
&color(red){毎回、グラデーションを書きたい部分に記述していくと、行数もかさみますし、後々変更したいときに、すべてのグラデーションを再び直していかなければなりません。そこでグラデーションだけのクラスを作っておき、自分の記述したいdivないしはliやh1を指定するときに、それぞれの基本属性＋グラデーション用の記述をさせておくと、あとあとメンテナンスが楽になります。}~
&u(){HTML部}~
&u(){クラス2つの場合}
<div class="box gradient"><!--このようにスペースをあけてbox用のクラスとgradientのクラスを両方指定しておく。-->
</div>
&u(){ID１つクラス1つの場合}
<div id="box" class="gradient"><!--こんな記述でもよい。-->
</div>
&u(){CSS部}
.boxまたは#box{
margin:10px auto;
width: 800;;
height: 100px;
}
.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以上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以上で必要*/
}
*それぞれの表示を確認してみる。
挙動を確認してみましょう。
&u(){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>
&u(){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以上で必要*/
}
このように記述しました。
**IE(11.0)
#image(width=600,ie.png)
**GoogleChrome(43.0)
#image(width=600,chrome.png)
**Firefox(38.0)
#image(width=600,firefox.png)
**Opera(29.0)
#image(width=600,opera.png)
あれ？Operaがwebkitの認識になってる・・・調べてみる。
>2013年2月13日に、今後はレンダリングエンジンとしてのPrestoの開発とOpera Browserでの使用を終了し、今後のリリースにおいてはOpera Browserで使用するレンダリングエンジンをWebKitに変更すると発表した
~
[[wikipedia:http://ja.wikipedia.org/wiki/Opera]]
ほうほう。今はWebkit系なのか。とういことで、&color(red){最新2015年5月25日現在operaは必要ないが、昔のブラウザのために一応指定はしておく。}ことがいいかもしれません。
*謎が残る
でもなぜだろう。liner-gradientはサポートされてるはずなんだが・・・
http://caniuse.com/を見ると、つけなくてもいけるよ！という表が書かれています。小さくて見にくいですが、右上が黄色くなっているところが、ベンダープレフィックスを付ける必要ありという意味です。
#image(width500,対応表.png)
謎です。コメントください。
#comment
