CSSシェアするLINE!0今回はradial-gradientについて見ていきます。終了色と開始色をスムーズにする同様によく使うlinear-gradientについては別のページで解説しています。併せて確認しておきましょう。今回はlinear-gradientについてみていきます。22:20radial-gradientとは?radial-gradientはグラデーションの種類の一種で、linear-gradient:線形のグラデーションradial-gradient:放射線状のグラデーションrepeating-linear-gradient:線形グラデーションの縞々repeating-radial-gradient:放射線状のグラデーションの縞々この4種類のグラデーションの種類がCSSで指定ができます。重要なのが、『〇〇-gradient』はimageとして扱われます。gradientが指定できるbackgroundプロパティbackground-imageプロパティgradientが指定できないbackground-colorプロパティグラデーションなので色関連だからbackground-colorの指定をしてしまいそうですが、『〇〇-gradient』はimageとして扱われます。対応ブラウザについてradial-gradientはブラウザによって対応状況が異なるので、ベンダープレフィックスを付けといたほうが無難です。ベンダープレフィックスについてはこちらをご覧ください。prefix)について見ていきます。yellow);ベンダープレフィックスから書いて最後に通常の指定方法を書いていきます。radial-gradientの値ここからはradial-gradientの実際の指定方法について見ていきます。終了色);半角スペースではなく、,(カンマ)で区切る。borderプロパティなどの一括指定プロパティは値を指定する時には、半角スペースで値を区切りますが、gradientの値は,(カンマ)で区切るというのを間違えないようにしましょう。開始色は円の中心側で、指定する順番が後ろにいくにつれて円の外側の指定になっていきます。radial-gradient(#fff,orange);開始色は#fff、終了色はorangeで色の範囲は特に指定していないのでグラデーションになっています。50%);色の範囲を指定してあげることで、きれいに塗り分けることも可能です。今回は終了色をtransparentにして透明にしたので、orangeの円だけが残っている状態になっています。円の形状radial-gradientの初期値では『楕円系が要素の中心』に来ている状態になっています。さきほどまでの例では縦横300pxでそろえていましたが、今度は縦200pxの横300pxで長方形にしてみるとやはりradial-gradientは楕円になっています。指定方法はellipse:楕円(初期値)circle:正円この2通りです。終了色);円の種類を正円に保ちたい場合は最初に円の種類で『circle』を指定してあげます。50%);要素のサイズはさきほどと同じ縦200px、横300pxですが円の形は正円になっています。円の大きさ『px』や『%』で指定することもできますが、初期値含めたその他の指定方法についても見ていきます。farthest-corner要素の最も遠いコーナーがグラデーションの終了位置となる(初期値)closest-corner要素の最も近いコーナーがグラデーションの終了位置となるfarthest-side要素の最も遠い辺がグラデーションの終了位置となるclosest-side要素の最も近い辺がグラデーションの終了位置となる順番に見ていきます。farthest-cornerfarthest-cornerは円の中心から一番遠い角を円の半径にします。四角は縦横200px三角形は底辺200px、高さ100px三角形の斜辺の部分が円の半径になります。50%にしているので『半径の半分=斜辺の半分』がちょうどグラデーションの境目になっているのがわかりますね。closest-cornerclosest-cornerは円の中心から一番近い角を円の半径にします。四角は縦横200px三角形は底辺200px、高さ100px三角形の高さの部分が円の半径になります。100%にしているので『半径=高さ』がちょうどグラデーションの境目になっているのがわかりますね。farthest-sidefarthest-sideは円の中心から一番遠い辺を円の半径にします。四角は縦200px、横300px三角形は底辺200px、高さ150px三角形の高さの部分が円の半径になります。100%にしているので『半径=高さ』になっていて、要素の縦部分ははみ出してしまっています。closest-sidefarthest-sideは円の中心から一番近い辺を円の半径にします。四角は縦200px、横300px三角形は底辺300px、高さ100px三角形の高さの部分が円の半径になります。100%にしているので『半径=高さ』になっています。長方形で要素ギリギリまでにしたい場合は『closest-side』に設定するといいと思います。円の位置は初期値では要素の真ん中ですがこれを動かす場合には円の形状を指定した後に続けて指定します。位置で指定する方法は以下のようになっています。位置は大きさなどとも関わってくるのでしっかりと確認しながら自分でもいろいろ作りながらどのようになるのか見てみると理解が深まるかと思います。要素の上下左右端や中心を指定することが出来ます。初期値はcenterになっています。1;}円の中心が左辺になります。高さについては指定していないのでcenterになっています。1;}円の中心が左下隅の角になります。注意しないといけないのは『closest-corner』で円の大きさを指定すると円の中心に来るはずの角(今回なら左下)が最寄の角になる為、半径が0になって円が消えてしまいます。100%』で「円の直径=辺の長さ」になる四隅に円の中心を持ってくるなら、closest-cornerは外す。(半径0になる為)簡単にまとめるとこうですね。続いて円の中心の位置を詳細に設定する方法です。atの後に『〇〇px』『〇〇%』と指定します。開始位置は要素の左上になります。初期位置では左上隅に円の中心が来ています。円の中心を縦横50pxずつずらしています。位置を細かく指定するならば円の大きさも併せて固定したほうが扱いやすいです。%で指定するのは要素の幅などが大きく変わる場合などに使いましょう。repeating-radial-gradientの書き方ここまではradial-gradientについて見てきましたが、ここからはrepeating-radial-gradientについて見ていきます。基本的にはradial-gradientと同じですが、値を指定しないとあまり意味がありません。background-image:repeating-radial-gradient(orange,gray)gradientには『色の範囲(位置)を指定していない場合は要素範囲を最大限の間隔で均等に割り振る』という性質があるので、値を指定しない場合には繰り返しをせずに1回で終わってしまいます。5%)値を指定すると終了色の直後に最初の色が来るようになります。終了色と開始色をスムーズにする値を指定してグラデーションが連続して掛かるようにはなりましたが色の境目がはっきりしてしまっているので、よりグラデーションらしくぼかしてみます。10%)終了色のあとに開始色を同じ間隔で加えるだけです。『at』のあとにtopなどでしていするか、『px』や『%』で指定も可ここらへんから使いこなせるようにしておきましょう。同様によく使うlinear-gradientについても確認して表現方法を増やしていきましょう。今回はlinear-gradientについてみていきます。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。