Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】conic-gradientで描くドット絵風背景

 どうも!LSSです!!

 

ブログを始めてから1000日たちました - Little Strange Software

に使用した、「背景にうっすら『1000』の数字が並んでいる」コードを解説してみます。

 

 

こんなコードでした

コード

<style>
article{
background:
conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 15px 0/160px 80px,
conic-gradient(at 140px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 25px 30px/160px 80px,
conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 50px 0/160px 80px,
conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 50px 30px/160px 80px,
conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 90px 0/160px 80px,
conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 90px 30px/160px 80px,
conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 130px 0/160px 80px,
conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 130px 30px/160px 80px,
conic-gradient(at 140px 50%,#ffffff 89.9deg,#ffffff00 90deg) 0 0/160px 80px,
conic-gradient(#f8f8f8 89.9deg,#f8f8f800 90deg) 0 0/20px 80px,
#ffffff!important;
}
</style>

 

少し 分かりやすいように色をつけてみました。

まず、CSSの中で全体が
article{
と、
}
に囲まれています。

 

これは「 {  } の間に書かれているのは」、「articleというHTMLタグに対する指定」ですよ、と、記事を読んでいる人の端末(PCとかスマホとか)のブラウザに解釈してもらう指示となります。

そして、{ } の間に書いているのは「background」というプロパティで、「background-color」「background-image」「background-position」「background-size」…などの様々な「background-○○」系のプロパティを これひとつでまとめて指定できるものになります。

 

最期の「!important」はCSSの優先度を上げる指定(でないと、ブログテーマやデザインCSSの!important指定に負けてしまい、適用されなくなる事があります)。

;」は「プロパティへの値指定の終わり」を示す記号です。

 

 

下から見ていきましょう

今回、backgroundプロパティにたくさんの値を、カンマ区切りで書き並べています。

その場合、コードの最後に書いたものから順に、画像を積み重ねたような表示順になります。

そのカンマ区切りで並べたものの一番最後(一番下)にあるのは、

#ffffff

これは、「background-color:#ffffff;」と書くのと同じ意味になります。

「まず地の色は白(#ffffff)でベタ塗り」という指定ですね。

 

そのひとつ上にあるのは、
conic-gradient(#f8f8f8 89.9deg,#f8f8f800 90deg) 0 0/20px 80px,
です。

これは、
background-image:conic-gradient(#f8f8f8 89.9deg,#f8f8f800 90deg);
background-position:0 0;
background-size:20px 80px;
と書くのと同じ意味になります。

「conic-gradientで描いた画像を、一番左上(0 0)を起点に、横20縦80ピクセルで表示する」という指定です。

ちなみに、このconic-gradientで描いた画像、というのは、

 

↑こういう画像(分かりやすくするために色を濃くし、枠線をつけました)です。

conic-gradientは「at」を指定すると中央位置を指定できますが、「at」を書かない場合は「at 50% 50%(上下左右ともちょうど真ん中)」が中央位置となります。
そこから時計回りに90度まで薄いグレー、あとの270度は透過色、という指定を書いています→conic-gradient(#f8f8f8 89.9deg,#f8f8f800 90deg)

「background-repeat」という、背景画像の繰り返しをするかしないかを制御するプロパティもあるのですが、これは今回書いておらず、書かない場合は「上下にも左右にも繰り返す」事になります。

すると、↑の模様が敷き詰められて…

 

↑こんな風に並ぶ事になります。

 

 

その上に白で上書き

さて、その上に乗っている次のconic-gradientは、
conic-gradient(at 140px 50%,#ffffff 89.9deg,#ffffff00 90deg) 0 0/160px 80px,
ですね。
(今度は「at」を指定して、conic-gradientの中心位置がかなり右に寄る指定となっています)

 

これは、

 

↑こんな感じの画像になります。(また、分かりやすくするために透過部分を緑にし、枠線をつけました。白の部分だけ「塗り」になります。)

 

これを、前述の「|||||||||」みたいな画像の上に重ねると…

 

グレーの縦棒が8本に1本の割合で、白く上塗りされて消滅しました!

 

 

あとは同じ要領で…

7本の線の内、右から6本は2本づつ、上下を繋ぐようにconic-gradientを配置。

一番左の1本にちょこちょこと足してみます。

 

↑また、分かりやすいように足した部分をピンク色にしてみると、こういう配置になります。

 

background:
conic-gradient(at 150px 10px,#f88888 89.9deg,#f8888800 90deg) 15px 0/160px 80px,
conic-gradient(at 140px 10px,#f88888 89.9deg,#f8888800 90deg) 25px 30px/160px 80px,
conic-gradient(at 150px 10px,#f88888 89.9deg,#f8888800 90deg) 50px 0/160px 80px,
conic-gradient(at 150px 10px,#f88888 89.9deg,#f8888800 90deg) 50px 30px/160px 80px,
conic-gradient(at 150px 10px,#f88888 89.9deg,#f8888800 90deg) 90px 0/160px 80px,
conic-gradient(at 150px 10px,#f88888 89.9deg,#f8888800 90deg) 90px 30px/160px 80px,
conic-gradient(at 150px 10px,#f88888 89.9deg,#f8888800 90deg) 130px 0/160px 80px,
conic-gradient(at 150px 10px,#f88888 89.9deg,#f8888800 90deg) 130px 30px/160px 80px,
conic-gradient(at 140px 50%,#ffffff 89.9deg,#ffffff00 90deg) 0 0/160px 80px,
conic-gradient(#dddddd 89.9deg,#dddddd00 90deg) 0 0/20px 80px,
#ffffff!important;

 

このように、「たくさんの長方形を重ね合わせて表示」する事で、「ドット絵のような画像」をコードで表現する事ができます^^

 

 

atとpositionとsize

繰り返し模様を描くのに、位置決めの要素が「at」「position」「size」と3種もあって、どれが何を意味するのか?は掴みにくいところがありますね^^;

 

今回のような「90度の塗り」を行う場合は、

  • atは「塗る部分と塗らない部分の比率決め」
  • positionは「枠の中でどれだけズラすか」
  • sizeは「繰り返し単位となる大きさ」

という事になります。

conic-gradient(at 150px 10px,#f88888 89.9deg,#f8888800 90deg) 130px 30px/160px 80px

 

…と、分かっていても、思うようなドット絵を描くのにはだいぶ試行錯誤しちゃったりしますけどねw

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^