どうも7noteです。CSSで虹をつくろう！
先生「今日はCSSで虹を作ります♪用意するものはクレヨンではなくエディタを用意します。」
園児「はーい！」
園児「（机からPCをとりだす園児たち）」
・
・
・
こんな未来がこないことを祈ります。
ソース
index.html
<divclass="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(transparent30px,#CD35F030px,#CD35F040px,#5B96E240px,#5B96E250px,#66D1F050px,#66D1F060px,#9FF54D60px,#9FF54D70px,#FBFF5270px,#FBFF5280px,#F8A95280px,#F8A95290px,#E7474D90px);/* 虹になるよう内側の色から指定 */background-size:100%100%;/* 背景のサイズを100%に指定 */}解説
作成するイメージとしては、円形グラデーションを疑似要素で作成しておき、半分だけ親要素からはみ出しておきます。はみ出た分を非表示にして完成。
円形のグラデーションを作成するにはradial-gradient()を使います。内側から順番に色を書いていくのですが、円の中心部分は透明になるのでtransparentを指定します。その後順番に10pxずつ色を指定します。
円形なので、10pxずつ指定しても疑似要素の幅は20pxずつ増えていくのでサイズを指定する際は注意してください。
まとめ
園児くらいの子でもわかるように説明するのってとても難しい。
説明上手な人はキレイなプログラムが書けそう。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ