CSS グラデーションを作るlinear-gradientの使い方
Coding,Web coding basic
Tags:CSS
CSSでグラデーションをしたい時はlinear-gradientを使うと思います。ボタンに使ったり、タイトルに使ったり、様々な場面で使う事もあると思いますが、詳しく理解を深めていなかったので改めて学習し、記録したいと思います。少しでも皆様の参考にもなれば幸いです。
CONTENTS
1.グラデーションの基本
CSSでグラデーションを使いたいときはbackgroundにlinear-gradientプロパティを使います。基本はこの下記の値（background:linear-gradient(#ffde00,#fff);の部分）を入力すればグラデーションを作ることができます。
サンプルの基本のCSS
|
1 2 3 4 5 6 7 8 9 |
<div class="gradient1"> </div> .gradient1{ background:linear-gradient(#ffde00,#fff); margin:20px 0; width:200px; height:200px; } |
〇〇-gradient(開始色,終了色）のように（）かっこの中をカンマで区切って色を入れます。
円形のグラデーション
円形のグラデーションにしたい場合はlinearの部分をradialに変更します。
|
1 |
background:radial-gradient(#ffde00,#fff); |
円形のグラデーションは他にも種類があります。
radial-gradient:(形状 サイズ at 中心の位置, 開始色 開始位置, 終了色 終了位置);
のように線形のグラデーションにはない形状とサイズと中心の位置を指定できます。closet-sideとclosest-cornerについては中心の位置の指定が出来ません。また、開始位置はtop,left,bottom,right,centerと指定ができる他、pxや%などの指定も可能です。以下に例をいくつか記載しましたので参考にされてください。
形状：楕円形 サイズ：closet-side（円の中心からもっとも近い辺に合わせる）
|
1 |
background:radial-gradient(ellipse closest-side at center,#ffde00,#f86f00); |
形状：楕円形 サイズ：closest-corner（円の中心からもっとも近い角に合わせる）
|
1 |
background:radial-gradient(ellipse closest-corner at center,#ffde00,#f86f00); |
形状：楕円形 サイズ：farthest-side（円の中心からもっとも遠い辺に合わせる）
|
1 |
background:radial-gradient(ellipse farthest-side at center,#ffde00,#f86f00); |
形状：楕円形 サイズ：farthest-corner（円の中心からもっとも遠い角に合わせる 初期値）
|
1 |
background:radial-gradient(ellipse farthest-corner at center,#ffde00,#f86f00); |
形状：正円 サイズ：farthest-corner 開始位置：right top 開始色開始位置：30% 終了色開始位置：70%
|
1 |
background:radial-gradient(ellipse farthest-corner at right top,#ffde00 30%,#f86f00 70%); |
形状：正円 サイズ：farthest-corner 開始位置：px指定
|
1 |
background:radial-gradient(ellipse farthest-side at 10px 20px,#ffde00,#f86f00); |
形状
- circle 正円
- ellispe 楕円形（初期値）
サイズ
- closest-side(円の中心からもっとも近い辺に合わせる)
- closest-corner(円の中心からもっとも近い角に合わせる)
- farthest-side(円の中心からもっとも遠い辺に合わせる)
- farthest-corner(円の中心からもっとも遠い辺に合わせる 初期値)
2.グラデーションの方向の指定
グラデーションの指定方法は下記の通りになります。
background:linear-gradient(to 方向,開始色,終了色);
なのでグラデーションの方向を決めるときはto 方向の部分を変更して指定します。toは「〜へ」とか「〜に」という意味ですよね。なので方向をbottomを入力すれば開始色が上から下方向へグラデーションになります。下の例ではto topと指定していますので下から色が始まり、上に向けてグラデーションしています。
|
1 |
background:linear-gradient(to top,#ffde00,#fff); |
横方向の指定
横方向の例です。左から始まり、右へグラデーションしています。
|
1 |
background:linear-gradient(to right,#ffde00,#fff); |
斜めに指定する場合
斜めに指定する場合は上下左右の値両方を半角スペースで区切り、入力します。
下記の例では左上から右下へグラデーションさせています。to right bottomなので「右下へ」ですね。
|
1 |
background:linear-gradient(to right bottom,#ffde00,#fff); |
逆の場合はleft topとなります。
|
1 |
background:linear-gradient(to left top,#ffde00,#fff); |
角度を細かく指定したい場合
ただこれまでの方法だと縦横斜めの決まった角度にしか対応できません。そこでもっと細かく指定したい場合はdegを使います。0degは下から上へグラデーションします。
0deg
|
1 |
background:linear-gradient(0deg,#ffde00,#fff); |
20deg
|
1 |
background:linear-gradient(20deg,#ffde00,#fff); |
このようにdegで指定する場合0degから時計回りでグラデーションが変化していきます。20degだと左下から右上へ、表示は前項のサンプルと同じなので割愛しますが、90degだと左から右へ180degだと上から下へ、そして180degからあえて10度だけずらして表示させてみたのが下記の例です。
190deg
|
1 |
background:linear-gradient(190deg,#ffde00,#fff); |
このようにdegを入力することで細かな角度の調節ができます。角度の調節もベンダープレフィックスで入力する場合は少し勝手が違います。詳しくは後ほどご紹介いたします。
3.グラデーションの割合位置の指定
続いてはグラデーションの割合の指定方法です。色の後に%をつけます。3色使いました。色を追加する場合はカンマで区切っていけば大丈夫です。この場合は開始色を0%から間の色を50%で真ん中ぐらいというようにその色が表示される位置を指定しています。
|
1 |
background:linear-gradient(to bottom,#ffde00 0%,#ffae00 50%,#fff 100%); |
例えば下記の3色目ように100%以上の値を入力することも可能です。一番最後の白が消えていますね。これは白が200%の位置まではみ出したので消えてしまっています。そうすることで２番目の色をゆったりとしたグラデーションになっていますね。
|
1 |
background:linear-gradient(to bottom,#ffde00 0%,#ffae00 60%,#fff 200%); |
4.ベンダープレフィックスでの書き方
いままでは通常の書き方で書いてきましたが、この書き方が対応していないブラウザの場合はベンダープレフィックスをつかって書かなければなりません。その場合は少し書き方が変りますのでご注意を。現在ではほとんどのブラウザでlinear-gradientは対応はしているらしいのですが、念のため覚えておきましょう。
基本的な書き方は一緒なのですが、方向をアルファベットで指定する場合が異なります。通常の書き方だとto bottom（下へ）となるのをベンダープレフィックスだとtop（上から）になります。開始する場所を指定します。
|
1 2 3 4 5 |
-o-background:linear-gradient(top,#ffde00 0%,#ffae00 60%,#fff 200%); -ms-background:linear-gradient(top,#ffde00 0%,#ffae00 60%,#fff 200%); -moz-background:linear-gradient(top,#ffde00 0%,#ffae00 60%,#fff 200%); -webkit-background:linear-gradient(top,#ffde00 0%,#ffae00 60%,#fff 200%); background:linear-gradient(to bottom,#ffde00 0%,#ffae00 60%,#fff 200%); |
全てのブラウザ用の属性が効かなかった時の為に、必ず一番下に通常の記述も入力するのを忘れずに。
ベンダープレフィックスで角度をつける場合
ベンダープレフィックスで角度をつける場合、少し勝手が違います。通常の書き方で20degと指定したい場合をベンダープレフィックスで表現したい場合は
90-20deg=-moz-などのブラウザ指定角度deg
というふうに90から指定したい値を引かなければなりません。なので今回の場合は70となります。
|
1 2 3 4 5 |
-o-background:linear-gradient(70deg,#ffde00 0%,#ffae00 60%,#fff 200%); -ms-background:linear-gradient(70deg,#ffde00 0%,#ffae00 60%,#fff 200%); -moz-background:linear-gradient(70deg,#ffde00 0%,#ffae00 60%,#fff 200%); -webkit-background:linear-gradient(70deg,#ffde00 0%,#ffae00 60%,#fff 200%); background:linear-gradient(20deg,#ffde00 0%,#ffae00 60%,#fff 200%); |
今回は以上になります。お付き合いいただきありがとうございました。
