【CSS】conic-gradientで放射状の光線を放つ太陽を作る

CSSのグラデーションで最近追加されたconic-gradient。これを使うと放射状の光線を表現できるようなので、前々から存在は気になっていました。実際に触ってみた。光線ということで「太陽」を作ってみました。それでは、いきましょう！

【目次】

CSSグラデーションの種類

今回作った「太陽」はこちら。画像無し。CSSグラデーションを使っている。

今の所この3種類がある。

CSSグラデーション	備考
linear-gradient	線形グラデーション
radial-gradient	放射状グラデーション
conic-gradient	円錐状グラデーション（New!）

上の2つは以前からあるので、使う機会も多かったのではないだろうか。

※参考：CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN

ちなみに、以前にも書いたようにlinear-gradientは繰り返すとストライプ柄なども作ることができる。

※参考：linear-gradientでストライプじゃなくて斜線を作る方法【CSS de 幾何学模様】 - クモのようにコツコツと

3つ目が最近増えたconic-gradient。円錐状？はて？どんな感じか？

※参考：CSS Image Values and Replaced Content Module Level 4

実際に作ってみる。

linear-gradient（線形グラデーション）

既存のグラデとも見え方を比較したい。まずは線形のグラデーションlinear-gradient。たぶん一番よく使う。

See the Pen tailyo- 1 by イイダリョウ (@i_ryo) on CodePen.

中央にはCSSのみで作った太陽は鎮座しているw（太陽CSSに興味がある方はCodePen参照）

body {
   /*中略*/
  background: linear-gradient(
    #fff ,
    #ffc 
  );
}

backgroundプロパティの値をCSS関数linear-gradient()に。引数の中にはグラデーションの開始色#fffと終了色#ffc。

デフォルトでは上から開始して下に終了する。この感じだと日の出っぽい雰囲気にはなったが、太陽自体の位置と背景の関連性は表現できない。

radial-gradient（放射状グラデーション）

次に放射状のグラデーション

See the Pen tailyo- 2 by イイダリョウ (@i_ryo) on CodePen.

太陽から光が出ている雰囲気になった。（ちなみに太陽自体の面にもradial-gradientを使っている）

body {
   /*中略*/
  background: radial-gradient(
    #fff ,
    #ffc 
  );
}

先ほどのbackgroundプロパティの値をCSS関数radial-gradient()に打ち変えただけ。

デフォルトでは中央が開始色で外側に向かって放射状に広がり外側が終了色。このままでもさっきより太陽っぽさは出ているのだがまだジンワリとしているので、せっかくなので放射状の光線を放ってまばゆい感じにしたい。

conic-gradient（円錐状グラデーション）

いよいよconic-gradientを使ってみる。円錐状とはどんなんか。

See the Pen tailyo- 3 by イイダリョウ (@i_ryo) on CodePen.

あーなるほど。クルッと一周一回転する感じかー。

body {
   /*中略*/
  background: conic-gradient(
    #fff ,
    #ffc 
  );
}

先ほどと同様にbackgroundプロパティの値をCSS関数conic-gradient()に打ち変えただけ。

デフォルトでは開始色が時計でいう0時の方向で右回りにクルッと一周して0時の手前が終了色。これは円グラフなどに使えそうだし、繰り返してかけば光線にもできそう。

repeating-conic-gradientでリピートする

繰り返しを何度も書くのは大変だが、あらかじめrepeating-conic-gradientというリピート様のCSS関数も用意されていた。

See the Pen tailyo- ４ by イイダリョウ (@i_ryo) on CodePen.

これでイメージ通りの光線を放つ太陽ができた！

body {
   /*中略*/
  background: repeating-conic-gradient(
    #fff 0,
    #fff 3%,
    #ffc 3%,
    #ffc 4%
  );
}

• backgroundプロパティの値をCSS関数conic-gradient()をrepeating-conic-gradient()に変更
• 引数は以前のストライプの時と同様に同じ色を2色続けて書くことで境界をクッキリさせる
• 白と薄黄の線の太さは変えたいため白を3%幅（0〜3%）、薄黄を1%幅（3〜4%）にしてみた

conic-gradientのブラウザ対応状況とポリフィル

ちなみに、conic-gradientのブラウザ対応状況をcaniuseで見ると、EdgeとFireFoxは未対応。しかしEdgeは次バージョンから対応予定！（IEはもちろん非対応w）

※参考：https://caniuse.com/#feat=css-conic-gradients

こちらの記事で、EdgeやFireFoxでも表示できるポリフィルがあることを知りました！

※参考：Chromeの最新機能が楽しいぞ! CSSで円グラフや集中線が描けるconic-gradient入門 - ICS MEDIA

ポリフィル紹介ページ

※参考：CSS conic-gradient() polyfill

ダウンロードファイルのURL（CDNはないっぽい。。）

※参考：GitHub - LeaVerou/conic-gradient: Polyfill for conic-gradient() and repeating-conic-gradient()

一緒に必要なprefixfree.jsはCDNあり！

※参考：prefixfree - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

ポリフィルのファイルをダウンロードしてサーバにあげてHTMLのheadにこう書く。

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="js/conic-gradient.js"></script>

FireFoxも対応してくれればファイルをダウンロードしなくて済む時代がくる…。早く対応してくれ〜

最後に

以前のストライプと同様、画像なしでCSSだけで放射状の光線が表現できるのは嬉しい限り！また、紹介ページにある市松模様もお正月のページなどに使えそうです！

CSSグラデーションはグラデーションだけでなく境界をくっきりすればいろいろな幾何学模様が作れそう。千鳥格子とか！！

※参考：6ステップで完成！CSS3でお洒落な「千鳥格子」を作る方法 | maesblog

楽しいですね♪ 今後もいろいろ試していきたい。それではまた！

---

※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com