概要へ移動

このページで解説するコードの実行結果。

実行結果
0
10
0
20
0
30
0
40
0
50
0
60
0
70
0
80
0
90
0
100
10
100
20
100
30
100
40
100
50
100
60
100
70
100
80
100
90
100
実行結果
0
100
10
90
20
80
30
70
40
60
50
50
40
50
30
50
20
50
10
50
0
50
実行結果
実行結果
実行結果
楕円
横に移動
-20%
-10%
0
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
110%
120%
縦に移動
-20%
-10%
0
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
110%
120%
楕円: closest-side
楕円: closest-corner
楕円: farthest-side
楕円: farthest-corner
円: closest-side
円: closest-corner
円: farthest-side
円: farthest-corner
色を重ねる

このページの説明は、以下のコードから始める。

CSS : デフォルトCSS
div {
border: 1px solid gray; /* 境界線 */
width: 200px; /* */
height: 200px; /* 高さ */
display: inline-block; /* 横並び */
vertical-align: top; /* 上揃え */
margin: 3px; /* 外側の余白 */
background-color: white; /* 背景色 */
}
HTML : 適用するHTML
<div class="sample"></div>
実行結果

radial-gradient()関数の概要

backgroundプロパティにradial-gradient()関数を設定すると、円形なグラデーションになる。

※ 注意: backgroundプロパティにしか設定できない。 background-colorプロパティにも、colorプロパティにも設定できない。

複数の色はカンマ「,で指定する。

CSS : radial-gradient
.sample {
background-image: radial-gradient( red, yellow );
}
実行結果

上図の中心がred、4つの角がyellowであり、その間をグラデーションしている。

さて、yellowの後ろに(カンマではなく)スペースでつなげて50%と書くと「内側の円をredyellowで分け」、「外側の円はyellow」になる。

CSS : yellow 50%
.sample {
background-image: radial-gradient( red, yellow 50% );
}
実行結果

25%にすると、さらに赤い円は縮まる。

CSS : yellow 25%
.sample {
background-image: radial-gradient( red, yellow 25% );
}
実行結果

次に、red 50%とする。(yellowには無指定)

この場合、赤い円は大きくなる。

CSS : red 50%
.sample {
background-image: radial-gradient( red 50%, yellow );
}
境目は上から3/4

red 75%とすると、さらに大きく。

CSS : red 75%
.sample {
background-image: radial-gradient( red 75%, yellow );
}
境目は上から7/8

最後に両方指定した場合。

red 40%, yellow 60%とする。

内側から「0 ~ 40%」のところはredのみ、「60% ~ 100%」のところはyellowのみとなる。

残った「40% ~ 60%」の領域のみがグラデーションになる。

CSS : red 40%, yellow 60%
.sample {
background-image: radial-gradient( red 40%, yellow 60% );
}
両方指定

下はred, yellowのみの指定。上の結果の方が(にじ)んでいる領域が少ない。

CSS : radial-gradient
.sample {
background-image: radial-gradient( red, yellow );
}
実行結果

まとめる。sample-0-100クラスが無指定(デフォルト)の状態。

CSS : まとめ
.sample-0-10 { background-image: radial-gradient( red , yellow 10% ); }
.sample-0-20 { background-image: radial-gradient( red , yellow 20% ); }
.sample-0-30 { background-image: radial-gradient( red , yellow 30% ); }
.sample-0-40 { background-image: radial-gradient( red , yellow 40% ); }
.sample-0-50 { background-image: radial-gradient( red , yellow 50% ); }
.sample-0-60 { background-image: radial-gradient( red , yellow 60% ); }
.sample-0-70 { background-image: radial-gradient( red , yellow 70% ); }
.sample-0-80 { background-image: radial-gradient( red , yellow 80% ); }
.sample-0-90 { background-image: radial-gradient( red , yellow 90% ); }
.sample-0-100 { background-image: radial-gradient( red , yellow ); }
.sample-10-100 { background-image: radial-gradient( red 10%, yellow ); }
.sample-20-100 { background-image: radial-gradient( red 20%, yellow ); }
.sample-30-100 { background-image: radial-gradient( red 30%, yellow ); }
.sample-40-100 { background-image: radial-gradient( red 40%, yellow ); }
.sample-50-100 { background-image: radial-gradient( red 50%, yellow ); }
.sample-60-100 { background-image: radial-gradient( red 60%, yellow ); }
.sample-70-100 { background-image: radial-gradient( red 70%, yellow ); }
.sample-80-100 { background-image: radial-gradient( red 80%, yellow ); }
.sample-90-100 { background-image: radial-gradient( red 90%, yellow ); }
div {
width: 5em; /* */
height: 5em; /* 高さ */
}
HTML : 適用するHTML
<div class="sample-0-10"> 0 <br> 10 </div>
<div class="sample-0-20"> 0 <br> 20 </div>
<div class="sample-0-30"> 0 <br> 30 </div>
<div class="sample-0-40"> 0 <br> 40 </div>
<div class="sample-0-50"> 0 <br> 50 </div>
<div class="sample-0-60"> 0 <br> 60 </div>
<div class="sample-0-70"> 0 <br> 70 </div>
<div class="sample-0-80"> 0 <br> 80 </div>
<div class="sample-0-90"> 0 <br> 90 </div>
<div class="sample-0-100"> 0 <br> 100 </div>
<div class="sample-10-100"> 10 <br> 100 </div>
<div class="sample-20-100"> 20 <br> 100 </div>
<div class="sample-30-100"> 30 <br> 100 </div>
<div class="sample-40-100"> 40 <br> 100 </div>
<div class="sample-50-100"> 50 <br> 100 </div>
<div class="sample-60-100"> 60 <br> 100 </div>
<div class="sample-70-100"> 70 <br> 100 </div>
<div class="sample-80-100"> 80 <br> 100 </div>
<div class="sample-90-100"> 90 <br> 100 </div>
実行結果
0
10
0
20
0
30
0
40
0
50
0
60
0
70
0
80
0
90
0
100
10
100
20
100
30
100
40
100
50
100
60
100
70
100
80
100
90
100

その2。

CSS : まとめ2
.sample-0-100 { background-image: radial-gradient( red , yellow ); }
.sample-10-90 { background-image: radial-gradient( red 10%, yellow 90% ); }
.sample-20-80 { background-image: radial-gradient( red 20%, yellow 80% ); }
.sample-30-70 { background-image: radial-gradient( red 30%, yellow 70% ); }
.sample-40-60 { background-image: radial-gradient( red 40%, yellow 60% ); }
.sample-50-50 { background-image: radial-gradient( red 50%, yellow 50% ); }
.sample-40-50 { background-image: radial-gradient( red 40%, yellow 50% ); }
.sample-30-50 { background-image: radial-gradient( red 30%, yellow 50% ); }
.sample-20-50 { background-image: radial-gradient( red 20%, yellow 50% ); }
.sample-10-50 { background-image: radial-gradient( red 10%, yellow 50% ); }
.sample-0-50 { background-image: radial-gradient( red , yellow 50% ); }
div {
width: 5em; /* */
height: 5em; /* 高さ */
}
HTML : 適用するHTML
<div class="sample-0-100"> 0 <br> 100</div>
<div class="sample-10-90"> 10 <br> 90 </div>
<div class="sample-20-80"> 20 <br> 80 </div>
<div class="sample-30-70"> 30 <br> 70 </div>
<div class="sample-40-60"> 40 <br> 60 </div>
<div class="sample-50-50"> 50 <br> 50 </div>
<div class="sample-40-50"> 40 <br> 50 </div>
<div class="sample-30-50"> 30 <br> 50 </div>
<div class="sample-20-50"> 20 <br> 50 </div>
<div class="sample-10-50"> 10 <br> 50 </div>
<div class="sample-0-50"> 0 <br> 50 </div>
実行結果
0
100
10
90
20
80
30
70
40
60
50
50
40
50
30
50
20
50
10
50
0
50

repeating-radial-gradient()関数

radial-gradient()の復習。

CSS : radial-gradient
.sample {
background-image: radial-gradient( red, yellow );
}
実行結果

最後のyellow50%にすると、外側50%はyellowになる。

CSS : yellow 50%
.sample {
background-image: radial-gradient( red, yellow 50% );
}
実行結果

radial-gradientrepeating-radial-gradientに変更すると繰り返しになる。

50%を指定しているので、2回繰り返す。

CSS : repeating-radial-gradient
.sample {
background-image: repeating-radial-gradient( red, yellow 50% );
}
実行結果

33%を指定すると3回繰り返す。

CSS : yellow 33%
.sample {
background-image: repeating-radial-gradient( red, yellow 33% );
}
実行結果

25%を指定すると4回繰り返す。

CSS : yellow 25%
.sample {
background-image: repeating-radial-gradient( red, yellow 25% );
}
実行結果

複数の色を指定

3色の色を指定する。それぞれ1/3に分ける。

CSS : 3色
.sample {
background-image: radial-gradient( red, yellow, green );
}
実行結果

blueを加えて4色にする。それぞれ25%に分けられる。

CSS : 4色
.sample {
background-image: radial-gradient( red, yellow, green, blue );
}
実行結果

yellow 75%と指定する。「内側の75%をredyellowで半分に分け」、「残りの25%をgreenblueが分ける」ことになる。

CSS : yellow 75%
.sample {
background-image: radial-gradient( red, yellow 75%, green, blue );
}
実行結果

加えてred 50%にする。内側の50%がred、50%~75%がyellow、残りにgreenblueになる。

CSS : red 50%
.sample {
background-image: radial-gradient( red 50%, yellow 75%, green, blue );
}
実行結果

repeating-radial-gradientに複数指定

復習。 radial-gradientの3色指定。

CSS : 3色
.sample {
background-image: radial-gradient( red, yellow, green );
}
実行結果

最後のgreen50%にすると、外側50%はgreenになる。

CSS : green 50%
.sample {
background-image: radial-gradient( red, yellow, green 50% );
}
実行結果

radial-gradientrepeating-radial-gradientに変更すると繰り返しになる。

CSS : repeating-radial-gradient
.sample {
background-image: repeating-radial-gradient( red, yellow, green 50% );
}
実行結果

ちなみにrepeating-radial-gradientを使う場合、開始と終了の色を同じにすると見た目が良い。

最後のgreenredに変更してみる。

CSS : repeating-radial-gradient
.sample {
background-image: repeating-radial-gradient( red, yellow, red 50% );
}
実行結果

三回繰り返すには、33%にする。

CSS : repeating-radial-gradient
.sample {
background-image: repeating-radial-gradient( red, yellow, red 33% );
}
目が回りそう

円/楕円(だえん)

さて、これまで縦(height)横(width)ともに200pxの正方形の中でradial-gradient()を使ってきたが、長方形にしたらどうなるのだろうか?

CSS : 長方形にする
.sample {
background-image: radial-gradient( red 40%, yellow 60% );
}
div {
height: 120px; /* 高さ */
}
楕円

楕円になる。

redの前に「circle, 」を記述すると円になる。

CSS : circle
.sample {
background-image: radial-gradient( circle, red 40%, yellow 60% );
}
div {
height: 120px; /* 高さ */
}

円のサイズを小さくすると、長方形内に収まる。

CSS : circle
.sample {
background-image: radial-gradient( circle, red 20%, yellow 40% );
}
div {
height: 120px; /* 高さ */
}
円を小さくする

なお、デフォルト値は「ellipse = 楕円」である。

CSS : ellipse
.sample {
background-image: radial-gradient( ellipse, red 40%, yellow 60% );
}
div {
height: 120px; /* 高さ */
}
ellipse = 楕円

移動

横位置

位置をずらしてみる。まず、真ん中に小さい円を描く。

CSS : circle
.sample {
background-image: radial-gradient( circle, red 10%, yellow 15% );
}
小さい円

circle at 30px, 」と指定すると左に寄る。なお、円の大きさが変わっているが、今のところは無視する。

30pxは一番左端からの距離である。(横幅は200px

CSS : 30px
.sample {
background-image: radial-gradient( circle at 30px, red 10%, yellow 15% );
}
左寄り

横幅は200pxだから、中心は100px120pxだと、やや右に寄る。

CSS : 150px
.sample {
background-image: radial-gradient( circle at 120px, red 10%, yellow 15% );
}
右寄り

100pxだと中心。

CSS : 100px
.sample {
background-image: radial-gradient( circle at 100px, red 10%, yellow 15% );
}
中心

中心はcenterと書くこともできる。(これがデフォルト値になっているので、無指定と同じ)

CSS : center
.sample {
background-image: radial-gradient( circle at center, red 10%, yellow 15% );
}
中心

%」で書くこともできる。(左端が0%、右端が100%

CSS : 20%
.sample {
background-image: radial-gradient( circle at 20%, red 10%, yellow 15% );
}
実行結果

なお、circleを省略すると、デフォルトのellipse(楕円)になる。

CSS : circleを省略
.sample {
background-image: radial-gradient( at 20%, red 10%, yellow 15% );
}
実行結果

まとめ。(マイナス値も指定できる)

CSS : まとめ
.m20 { background-image: radial-gradient( circle at -20%,red 10%, yellow 15% ); }
.m10 { background-image: radial-gradient( circle at -10%,red 10%, yellow 15% ); }
.p0 { background-image: radial-gradient( circle at 0, red 10%, yellow 15% ); }
.p10 { background-image: radial-gradient( circle at 10%, red 10%, yellow 15% ); }
.p20 { background-image: radial-gradient( circle at 20%, red 10%, yellow 15% ); }
.p30 { background-image: radial-gradient( circle at 30%, red 10%, yellow 15% ); }
.p40 { background-image: radial-gradient( circle at 40%, red 10%, yellow 15% ); }
.p50 { background-image: radial-gradient( circle at 50%, red 10%, yellow 15% ); }
.p60 { background-image: radial-gradient( circle at 60%, red 10%, yellow 15% ); }
.p70 { background-image: radial-gradient( circle at 70%, red 10%, yellow 15% ); }
.p80 { background-image: radial-gradient( circle at 80%, red 10%, yellow 15% ); }
.p90 { background-image: radial-gradient( circle at 90%, red 10%, yellow 15% ); }
.p100 { background-image: radial-gradient( circle at 100%,red 10%, yellow 15% ); }
.p110 { background-image: radial-gradient( circle at 110%,red 10%, yellow 15% ); }
.p120 { background-image: radial-gradient( circle at 120%,red 10%, yellow 15% ); }
div { height: 50px; display: block; }
横に移動
-20%
-10%
0
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
110%
120%

縦位置

横位置の直後にスペースで続けて縦位置を指定できる。

40% 20%にすると、横位置は40%(やや左寄り)、縦位置は上から20%

CSS : center 20%
.sample {
background-image: radial-gradient( circle at 40% 20%, red 10%, yellow 15% );
}
上に

横位置とほぼ同じなので、説明は省略。

CSS : まとめ
.m20 { background-image: radial-gradient( circle at center -20%,red 10%, yellow 15% ); }
.m10 { background-image: radial-gradient( circle at center -10%,red 10%, yellow 15% ); }
.p0 { background-image: radial-gradient( circle at center 0, red 10%, yellow 15% ); }
.p10 { background-image: radial-gradient( circle at center 10%, red 10%, yellow 15% ); }
.p20 { background-image: radial-gradient( circle at center 20%, red 10%, yellow 15% ); }
.p30 { background-image: radial-gradient( circle at center 30%, red 10%, yellow 15% ); }
.p40 { background-image: radial-gradient( circle at center 40%, red 10%, yellow 15% ); }
.p50 { background-image: radial-gradient( circle at center 50%, red 10%, yellow 15% ); }
.p60 { background-image: radial-gradient( circle at center 60%, red 10%, yellow 15% ); }
.p70 { background-image: radial-gradient( circle at center 70%, red 10%, yellow 15% ); }
.p80 { background-image: radial-gradient( circle at center 80%, red 10%, yellow 15% ); }
.p90 { background-image: radial-gradient( circle at center 90%, red 10%, yellow 15% ); }
.p100 { background-image: radial-gradient( circle at center 100%,red 10%, yellow 15% ); }
.p110 { background-image: radial-gradient( circle at center 110%,red 10%, yellow 15% ); }
.p120 { background-image: radial-gradient( circle at center 120%,red 10%, yellow 15% ); }
div { width: 50px; }
縦に移動
-20%
-10%
0
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
110%
120%

内接(ないせつ)外接(がいせつ)

数学で言うところの「内接」と「外接」である。

設定値意味デフォルト
closest-side内接: 近い辺に接する
closest-corner近い角に接する
farthest-side遠い辺に接する
closest-corner外接: 遠い角に接する

まず、無指定の場合(長方形の中心からずれた位置に「楕円」がある)

CSS : 無指定
.sample {
background-image: repeating-radial-gradient(
at 30% 30%, red, yellow );
}
div { height: 120px; /* 高さ */ }
外接: 遠い角に接する(デフォルト)
CSS : closest-side
.sample {
background-image: repeating-radial-gradient(
closest-side at 30% 30%, red, yellow );
}
div { height: 120px; /* 高さ */ }
内接: 近い辺に接する
CSS : closest-corner
.sample {
background-image: repeating-radial-gradient(
closest-corner at 30% 30%, red, yellow );
}
div { height: 120px; /* 高さ */ }
近い角に接する
CSS : farthest-side
.sample {
background-image: repeating-radial-gradient(
farthest-side at 30% 30%, red, yellow );
}
div { height: 120px; /* 高さ */ }
遠い辺に接する
CSS : farthest-corner
.sample {
background-image: repeating-radial-gradient(
farthest-corner at 30% 30%, red, yellow );
}
div { height: 120px; /* 高さ */ }
外接: 遠い角に接する(デフォルト)

円の場合

無指定の場合(長方形の中心からずれた位置に「円」がある)

CSS : 無指定
.sample {
background-image: repeating-radial-gradient(
circle at 30% 30%, red, yellow );
}
div { height: 120px; /* 高さ */ }
一番遠い角に接する(デフォルト)
CSS : closest-side
.sample {
background-image: repeating-radial-gradient(
circle closest-side at 30% 30%, red, yellow );
}
div { height: 120px; /* 高さ */ }
一番近い辺に接する
CSS : closest-corner
.sample {
background-image: repeating-radial-gradient(
circle closest-corner at 30% 30%, red, yellow );
}
div { height: 120px; /* 高さ */ }
一番近い角に接する
CSS : farthest-side
.sample {
background-image: repeating-radial-gradient(
circle farthest-side at 30% 30%, red, yellow );
}
div { height: 120px; /* 高さ */ }
一番遠い辺に接する
CSS : farthest-corner
.sample {
background-image: repeating-radial-gradient(
circle farthest-corner at 30% 30%, red, yellow );
}
div { height: 120px; /* 高さ */ }
一番遠い角に接する(デフォルト)

移動すると大きさが変わる理由

縦や横に移動すると、円の大きさが変わった。

横に移動
-20%
-10%
0
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
110%
120%
縦に移動
-20%
-10%
0
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
110%
120%

この理由を説明する。

デフォルトではfarthest-corner、つまり、「一番遠い角までの距離 = 100%」になる。

中心から離れると、「一番遠い角までの距離は大きく」なる。 よって、相対的な100%の距離は大きくなる。

よって、「中心から離れる」→「円が大きく」なる。

色を混ぜる

詳しくは線形グラデーションを参照。

テキトーにやってみる。

CSS : farthest-corner
.sample {
background-image: radial-gradient( circle at 20% 30%, transparent, red );
}
div { width: 250px; }
実行結果

limeを加える。( カンマ「,」でつなぐ。 )

CSS : farthest-corner
.sample {
background-image: radial-gradient( circle at 120% 75%, lime, transparent 60% ),
radial-gradient( circle at 20% 30%, transparent, red );
}
div { width: 250px; }
実行結果

moccasinを加える。

CSS : farthest-corner
.sample {
background-image: radial-gradient( transparent 30%, moccasin ),
radial-gradient( circle at 120% 75%, lime, transparent 60% ),
radial-gradient( circle at 20% 30%, transparent, red );
}
div { width: 250px; }
実行結果

イマイチやな。(そのうち芸術的なのに替えとく)