CSSスキル - 第5章 Lesson6

グラデーションの背景を設定する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

背景にグラデーションを設定するためのプロパティについて、初心者向けに解説しています。



この動画で学べること

・背景をグラデーションにする方法
・ベンダープレフィックスとは



背景をグラデーションにする方法

背景を一色塗りつぶしではなく、グラデーションにしていきたいと思います。
このとき使うのはbackgroundのプロパティですが、値には「linear-gradient: (上の色, 下の色);」と入力します。
では、<footer>タグの中のid名twitterの<a>タグにかけていきましょう。



footer a#twitter {
background: linear-gradient(#91CDF7, #4993CC);
}



一度、保存してブラウザで見てみましょう。
ボタンの背景が、薄い水色から濃い水色のグラデーションになりました。




ベンダープレフィックスでグラデーションを設定しよう

グラデーションは、CSS3になってから新しくできたもので、古いブラウザやIEのバージョンによっては見れない場合があります。
そういう時のため、ベンダープレフィックスというものを追加して、それぞれのブラウザに対応したグラデーションをかけられるようにする必要があります。






ベンダープレフィックスの書き方は少し難しいので、自分で値を設定するのではなく、Webサービスを使って数値を計算し、コピー&ペーストで貼り付けるというやり方をします。
インターネットで「CSS gradient generator」と検索すると、グラデーションを自動生成してくれるサービスがたくさん出てくるので、このようなものを活用して効率化していきましょう。



実際に、今回は「CSSmatic」というWebサービスを使って生成したグラデーションのコードを、先ほどのid名twitterの<a>タグに貼り付けていきたいと思います。



footer a#twitter {
background: rgba(145,205,247,1);
background: -moz-linear-gradient(top, rgba(145,205,247,1) 0%, rgba(73,147,204,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(145,205,247,1)), color-stop(100%, rgba(73,147,204,1)));
background: -webkit-linear-gradient(top, rgba(145,205,247,1) 0%, rgba(73,147,204,1) 100%);
background: -o-linear-gradient(top, rgba(145,205,247,1) 0%, rgba(73,147,204,1) 100%);
background: -ms-linear-gradient(top, rgba(145,205,247,1) 0%, rgba(73,147,204,1) 100%);
background: linear-gradient(to bottom, rgba(145,205,247,1) 0%, rgba(73,147,204,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91cdf7', endColorstr='#4993cc', GradientType=0 );
}



保存してブラウザで見てみましょう。
ボタンに綺麗なグラデーションを書けることができましたし、ベンダープレフィックスも追加したので、自分とは違うブラウザでもちゃんと表示することができるようになりました。