色コードは3桁に省略しないほうがいいよ! 大見出しのグラデがIEにも対応しました!

2012/11/11
ブログ / WordPress

Ie gradation

CSSは見よう見まねの初心者ブロガー、@jinnaitakumiです!

背伸びしてブログの大見出しにグラデーションを使っているんですが、これがChromeやsafariではちゃんと表示されるのに、InternetExplorerではちゃんと表示されませんでした。

この改善点がどうも色コードを省略していたのが、ダメだったようなのです。

delaymaniaさんからのありがたいお言葉

グラデーションの見出しは@delaymaniaさんのそれを全面的にパクらせていただいたものwなんですが、グラデの書き方は独自のものを使っていました。

delaymania.comの見出しはIE上でも表示されているので、う〜ん、と思っていたら@delaymaniaさんからありがたいお言葉が!

ということで遠慮無くソースをいただきましたw

見出しをIEに対応させる

delaymania.comのグラデのソースをもってくる

Chromeとかであれば普通にソースを見に行けます。

▼メニューを出して「ソースを表示」
1

▼「.css」のとこクリックすればCSSのソース見れます。
2

▼目的のグラデーションのソースに到達
3

ソースの色コードを自サイト用に変換

delaymania.comと、このブログではグラデーションの色が異なるので、色コードを変換します。

delaymania.comの「#008ee1」を「#36f」に、「#0073cc」を「#36c」に置換えました。
このとき色コードを3桁の省略形で書いていたのですが、これがまさかの。。。

▼もとのdelaymania.comのグラデーションのソース

background: #008ee1; /* Old browsers */
background: -moz-linear-gradient(top,  #008ee1 0%, #0073cc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008ee1), color-stop(100%,#0073cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #008ee1 0%,#0073cc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #008ee1 0%,#0073cc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #008ee1 0%,#0073cc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #008ee1 0%,#0073cc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008ee1', endColorstr='#0073cc',GradientType=0 ); /* IE6-9 */

▼置換後のグラデーションのソース

background: #36f; /* Old browsers */
background: -moz-linear-gradient(top,  #36f 0%, #36c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36f), color-stop(100%,#36c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #36f 0%,#36c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #36f 0%,#36c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #36f 0%,#36c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #36f 0%,#36c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36f', endColorstr='#36c',GradientType=0 ); /* IE6-9 */

しかし、置換後のグラデーションの書き方ではちゃんとIEで表示されませんでした。

delaymania.comとの違いを探す

なんでかな〜、とdelaymania.comとの違いを見比べて考えると、

「もしかして、色コードを省略してるのがダメなのか?」

delaymania.comではちゃんと色コードを6桁で記述していましたが、私の場合、3桁の省略形で記述していました。
Chromeやsafariはそれでもちゃんと表示されてましたしね。

色コードを3桁の省略形から、ちゃんと6桁で書いてみた

ふと思って、色コードを6桁にしてみると

▼6桁に変換後のソース

background: #3060f0; /* Old browsers */
background: -moz-linear-gradient(top,  #3060f0 0%, #3060c0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3060f0), color-stop(100%,#3060c0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #3060f0 0%,#3060c0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #3060f0 0%,#3060c0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #3060f0 0%,#3060c0 100%); /* IE10+ */
background: linear-gradient(to bottom,  #3060f0 0%,#3060c0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3060f0', endColorstr='#3060c0',GradientType=0 ); /* IE6-9 */

するとついにIEでもグラデーションがちゃんと表示されたのです!
良かった、良かった。

というか、これはもとのコードも色コードさえ直せば大丈夫だったのかもw

おわりに

やっぱり人のソースをいろいろ見てみると勉強になります。
ていうか、人のブログを見ていると、全部真似したくなっちゃいますよw

ブログのデザインを格好良くすることって、印象を変えますし、大事だと思います。

見やすい分かりやすい見出し作りは、読者のためにもやるべきことだと思いますので、「この見出しは超クールで見やすい!」と思ったらソースみたり、真似してみたりするのは、やったほうがいいと思いますよ!

わかってくれば自分好みにどんどんいじれるようになってきますし!

ちなみに私のソースも持っていっていいですよ!
(ちゃんと表示されるか保証はしませんがw)