【初心者でもわかる】CSSで虹を書こう！CSSでの虹の書き方

どうも7noteです。CSSで虹をつくろう！

先生「今日はCSSで虹を作ります♪用意するものはクレヨンではなくエディタを用意します。」

園児「はーい！」

園児「（机からPCをとりだす園児たち）」

・
・
・

こんな未来がこないことを祈ります。

ソース

index.html

<div class="rainbow"></div>

style.css

.rainbow {
  width: 200px;  /* 幅を200pxに指定 */
  height: 100px; /* 高さを100pxに指定 */
  overflow: hidden;   /* はみ出た部分を非表示 */
  position: relative; /* 基準位置とする */
}

.rainbow::after {
  content: '';        /* 疑似要素に必須の指定 */
  width: 100%;        /* 幅いっぱいに指定 */
  height: 200%;       /* 高さいっぱいの二倍（正方形になるよう）に指定 */
  border-radius: 50%; /* 角丸で正円にする */
  position: absolute; /* 相対位置とする */
  top: 0;             /* 上から0pxの位置に指定 */
  left: 0;            /* 左から0pxの位置に指定 */
  background: radial-gradient(transparent 30px, #CD35F0 30px,#CD35F0 40px, #5B96E2 40px,#5B96E2 50px, #66D1F0 50px,#66D1F0 60px, #9FF54D 60px,#9FF54D 70px, #FBFF52 70px,#FBFF52 80px, #F8A952 80px,#F8A952 90px, #E7474D 90px); /* 虹になるよう内側の色から指定 */
  background-size: 100% 100%; /* 背景のサイズを100%に指定 */
}

解説

作成するイメージとしては、円形グラデーションを疑似要素で作成しておき、半分だけ親要素からはみ出しておきます。はみ出た分を非表示にして完成。

円形のグラデーションを作成するにはradial-gradient()を使います。内側から順番に色を書いていくのですが、円の中心部分は透明になるのでtransparentを指定します。その後順番に10pxずつ色を指定します。
円形なので、10pxずつ指定しても疑似要素の幅は20pxずつ増えていくのでサイズを指定する際は注意してください。

まとめ

園児くらいの子でもわかるように説明するのってとても難しい。
説明上手な人はキレイなプログラムが書けそう。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ