概要へ移動

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

実行結果
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
複数色
3回繰り返す
傾ける/回転
0deg
30deg
60deg
90deg
120deg
150deg
180deg
210deg
240deg
270deg
300deg
330deg
360deg
to を使った指定
to top
to top right
to right
to bottom right
to bottom
to bottom left
to left
to top left
色を混ぜる
3色を重ねる
重ねる順番を変える
ちょっと変えた
デフォルト HTML & CSS

このページの実行結果には、以下のコードをデフォルトとして使用している。

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>
実行結果

linear-gradient()関数の概要

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

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

下は「上半分をred」「下半分をyellow」にする例。(redyellow境目(さかいめ)は真ん中)

CSS : linear-gradient
.sample {
background-image: linear-gradient( red, yellow );
}
HTML : 適用するHTML
<div class="sample"></div>
実行結果

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

つまり、redyellowの境目が「上から25%(1/4)の位置」に来る。

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

25%にすると「yellowだけの領域が(上から)25%の場所から始まる」ということ。

よって、redyellowの境目は「上から12.5%(1/8)の位置」になる。

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

この設定は数値(+ 単位)でも指定できる。

このボックスの高さは200pxである。よって、yellow 100pxと指定するとyellow 50%と同じことになる。

CSS : yellow 100px
.sample {
background-image: linear-gradient( red, yellow 100px );
}
「yellow 50%」と同じ

yellow 50pxとすると、(50px ÷ 高さ200px = 0.25 = 25%なので)yellow 25%と同じことになる。

CSS : yellow 50px
.sample {
background-image: linear-gradient( red, yellow 50px );
}
「yellow 25%」と同じ

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

この場合「上から50%はredだけの領域」となるので、redyellowの境目が上から75%(3/4)の位置に来る。

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

red 75%とすると、境目が上から7/8の位置に来る。

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

red 150pxred 75%と指定するのと同じ。(150px ÷ 高さ200px = 0.75 = 75%なので)

CSS : red 150px
.sample {
background-image: linear-gradient( red 150px, yellow );
}
red 75% と同じ

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

red 40%, yellow 60%とする。

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

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

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

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

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

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

CSS : まとめ
.sample-0-10 { background-image: linear-gradient( red , yellow 10% ); }
.sample-0-20 { background-image: linear-gradient( red , yellow 20% ); }
.sample-0-30 { background-image: linear-gradient( red , yellow 30% ); }
.sample-0-40 { background-image: linear-gradient( red , yellow 40% ); }
.sample-0-50 { background-image: linear-gradient( red , yellow 50% ); }
.sample-0-60 { background-image: linear-gradient( red , yellow 60% ); }
.sample-0-70 { background-image: linear-gradient( red , yellow 70% ); }
.sample-0-80 { background-image: linear-gradient( red , yellow 80% ); }
.sample-0-90 { background-image: linear-gradient( red , yellow 90% ); }
.sample-0-100 { background-image: linear-gradient( red , yellow ); }
.sample-10-100 { background-image: linear-gradient( red 10%, yellow ); }
.sample-20-100 { background-image: linear-gradient( red 20%, yellow ); }
.sample-30-100 { background-image: linear-gradient( red 30%, yellow ); }
.sample-40-100 { background-image: linear-gradient( red 40%, yellow ); }
.sample-50-100 { background-image: linear-gradient( red 50%, yellow ); }
.sample-60-100 { background-image: linear-gradient( red 60%, yellow ); }
.sample-70-100 { background-image: linear-gradient( red 70%, yellow ); }
.sample-80-100 { background-image: linear-gradient( red 80%, yellow ); }
.sample-90-100 { background-image: linear-gradient( red 90%, yellow ); }
div {
width: 3em; /* */
}
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: linear-gradient( red , yellow ); }
.sample-10-90 { background-image: linear-gradient( red 10%, yellow 90% ); }
.sample-20-80 { background-image: linear-gradient( red 20%, yellow 80% ); }
.sample-30-70 { background-image: linear-gradient( red 30%, yellow 70% ); }
.sample-40-60 { background-image: linear-gradient( red 40%, yellow 60% ); }
.sample-50-50 { background-image: linear-gradient( red 50%, yellow 50% ); }
.sample-40-50 { background-image: linear-gradient( red 40%, yellow 50% ); }
.sample-30-50 { background-image: linear-gradient( red 30%, yellow 50% ); }
.sample-20-50 { background-image: linear-gradient( red 20%, yellow 50% ); }
.sample-10-50 { background-image: linear-gradient( red 10%, yellow 50% ); }
.sample-0-50 { background-image: linear-gradient( red , yellow 50% ); }
div {
width: 3em; /* */
}
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-linear-gradient()関数

復習。redyellowで半分に分ける。

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

最後のyellow50%にすると、下部50%はyellowになる。

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

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

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

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

これは100pxを指定するのと同じである。(高さ200px50%100px

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

50pxを指定すると4回繰り返す。(高さ200px ÷ 50px = 4回)

※ これは25%と指定するのと同じ。

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

割り切れない値を設定すると、途中で切れる。(高さ200px ÷ 80px = 2回 あまり 40px

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

複数の色を指定

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

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

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

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

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

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

加えてred 50%にする。上部50%がred、50%~75%がyellow、残りにgreenblueになる。

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

もちろん、同じ色を複数回指定しても良い。

red, yellow, yellowは、

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

red, yellow 50% と同じである。

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

しかし、ややこしいので推奨しない。

repeating-linear-gradientに複数指定

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

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

最後のgreen50%にすると、下部50%はgreenになる。

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

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

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

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

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

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

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

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

たとえば、yellow 10%にしたり、

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

orangeを足してみたりするとパターンが変わる。

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

傾ける

下記で説明することをまとめておく。

degtoデフォルト
0degto top
45degto top right
90degto right
135degto bottom right
180degto bottom
225degto bottom left
270degto left
315degto top left

まず復習。

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

傾けるには、色の前に傾ける角度を指定する。(その後ろにカンマ「,」が必要。)

とりあえず、横に傾ける。90°(90deg)を指定。

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

180deg(さか)さまになりそうだが、そうでもないらしい。無指定と同じ

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

270deg90degとは左右逆になっている。

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

30°ずつ傾けてみる。なんと、0degor360degの時に逆さまになっている。つまり、逆さまから始まり、逆さまで終わる。

CSS : 30°ずつ
.deg0 { background-image: linear-gradient( 0deg, red, yellow ); }
.deg30 { background-image: linear-gradient( 30deg, red, yellow ); }
.deg60 { background-image: linear-gradient( 60deg, red, yellow ); }
.deg90 { background-image: linear-gradient( 90deg, red, yellow ); }
.deg120 { background-image: linear-gradient( 120deg, red, yellow ); }
.deg150 { background-image: linear-gradient( 150deg, red, yellow ); }
.deg180 { background-image: linear-gradient( 180deg, red, yellow ); }
.deg210 { background-image: linear-gradient( 210deg, red, yellow ); }
.deg240 { background-image: linear-gradient( 240deg, red, yellow ); }
.deg270 { background-image: linear-gradient( 270deg, red, yellow ); }
.deg300 { background-image: linear-gradient( 300deg, red, yellow ); }
.deg330 { background-image: linear-gradient( 330deg, red, yellow ); }
.deg360 { background-image: linear-gradient( 360deg, red, yellow ); }
div {
width: 70px; /* */
height: 70px; /* 高さ */
}
HTML : 適用するHTML
<div class="deg0"> 0deg </div>
<div class="deg30"> 30deg </div>
<div class="deg60"> 60deg </div>
<div class="deg90"> 90deg </div>
<div class="deg120"> 120deg </div>
<div class="deg150"> 150deg </div>
<div class="deg180"> 180deg </div>
<div class="deg210"> 210deg </div>
<div class="deg240"> 240deg </div>
<div class="deg270"> 270deg </div>
<div class="deg300"> 300deg </div>
<div class="deg330"> 330deg </div>
<div class="deg360"> 360deg </div>
実行結果
0deg
30deg
60deg
90deg
120deg
150deg
180deg
210deg
240deg
270deg
300deg
330deg
360deg

to を使った指定

to rightにすると、左から右へ。90degと同じ。

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

to leftにすると、右から左へ。270degと同じ。

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

to topにすると、下から上へ。0degと同じ。

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

to bottomにすると、上から下へ。180degと同じ。(デフォルト=無指定と同じ)

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

縦方向と横方向の2つを設定することもできる。

to top right45degと同じ
to bottom right135degと同じ
to bottom left225degと同じ
to top left315degと同じ
CSS : 2つ指定する
.top { background-image: linear-gradient( to top , red, yellow ); }
.top-right { background-image: linear-gradient( to top right , red, yellow ); }
.right { background-image: linear-gradient( to right , red, yellow ); }
.bottom-right { background-image: linear-gradient( to bottom right , red, yellow ); }
.bottom { background-image: linear-gradient( to bottom , red, yellow ); }
.bottom-left { background-image: linear-gradient( to bottom left , red, yellow ); }
.left { background-image: linear-gradient( to left , red, yellow ); }
.top-left { background-image: linear-gradient( to top left , red, yellow ); }
div {
width: 8em; /* */
height: 5em; /* 高さ */
}
HTML : 適用するHTML
<div class="top"> to top </div>
<div class="top-right"> to top right </div>
<div class="right"> to right </div>
<div class="bottom-right"> to bottom right </div>
<div class="bottom"> to bottom </div>
<div class="bottom-left"> to bottom left </div>
<div class="left"> to left </div>
<div class="top-left"> to top left </div>
実行結果
to top
to top right
to right
to bottom right
to bottom
to bottom left
to left
to top left

色を混ぜる

これと

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

これを

CSS : 90deg
.sample {
background-image: linear-gradient( 90deg, #333, white );
}
実行結果

混ぜてみる。

混ぜるには、linear-gradient()をカンマ「,」でつなぐ。

CSS : 2つ指定
.sample {
background-image: linear-gradient( red, yellow ),
linear-gradient( 90deg, #333, white );
}
混ざらない

1つ目の設定が優先され、混ざらない。 これは「色が半透明」でないから。

半透明にするには、色をrgba()関数で指定する必要がある。

redrgb( 255, 0, 0 )である。

カラーコードrgbrgb()
red25500rgb( 255, 0, 0 )

これを使って書き直す。

CSS : linear-gradient
.sample {
background-image: linear-gradient( rgb( 255, 0, 0 ), yellow );
}
実行結果

これをrgba()にして、不透明度を0.4(40%)にする。

CSS : linear-gradient
.sample {
background-image: linear-gradient( rgba( 255, 0, 0, 0.4 ), yellow );
}
赤は半透明になった

これをlinear-gradient( 90deg, #333, white );に重ねる。

CSS : 2つ指定(赤は半透明)
.sample {
background-image: linear-gradient( rgba( 255, 0, 0, 0.4 ), yellow ),
linear-gradient( 90deg, #333, white );
}
混じった

上部のredは半透明であるので、下の色が透けて見える。

左側が暗く、右側が明るいので、上部左側が暗く、上部右側が明るく見える。

下部のyellowは不透明なので黄色に見える。

このように、3色(のような)グラデーションを作ることができた。

さらなる実験

次に、重ねる順番を変えてみる。モノクロを上にする。(半透明ではないのでモノクロになる)

CSS : 重ねる順番を変える
.sample {
background-image: linear-gradient( 90deg, #333, white ),
linear-gradient( red, yellow );
}
実行結果

モノクロを半透明(0.3)にする。

カラーコードrgbrgb()rgba( , 0.3 )
#333515151rgb( 51, 51, 51 )rgba( 51, 51, 51, 0.3 )
white255255255rgb( 255, 255, 255 )rgba( 255, 255, 255, 0.3 )
CSS : モノクロを半透明に
.sample {
background-image: linear-gradient( 90deg, rgba( 51, 51, 51, 0.3 ), rgba( 255, 255, 255, 0.3 ) ),
linear-gradient( red, yellow );
}
実行結果

回転を90degから60degに変えると少し(やわ)らぐ

CSS : 60deg
.sample {
background-image: linear-gradient( 60deg, rgba( 51, 51, 51, 0.3 ), rgba( 255, 255, 255, 0.3 ) ),
linear-gradient( red, yellow );
}
実行結果

transparentを使ってみる。

transparentは完全な透明であり、rgba()で表すとrgba( n, n, n, 0 )と同じである。(透明なのでnが何であっても関係ない)

よって、これ(red)と

CSS : red
.sample {
background-image: linear-gradient( to top right, transparent 20%, red );
}
実行結果

これ(lime)と

CSS : lime
.sample {
background-image: linear-gradient( to top left , transparent 20%, lime );
}
実行結果

これ(blue)を合わせると

CSS : blue
.sample {
background-image: linear-gradient( to bottom , transparent 20%, blue );
}
実行結果

こうなる。(redlimeblueの順)

CSS : 重ねる
.sample {
background-image: linear-gradient( to top right, transparent 20%, red ),
linear-gradient( to top left , transparent 20%, lime ),
linear-gradient( to bottom , transparent 20%, blue );
}
実行結果

重ねる順番で結果が変わることに注意。(limeredblueの順)

CSS : 順番を変える
.sample {
background-image: linear-gradient( to top left , transparent 20%, lime ),
linear-gradient( to top right, transparent 20%, red ),
linear-gradient( to bottom , transparent 20%, blue );
}
実行結果

20%to bottomのところを少し変えて調整してみる。

CSS : 調整
.sample {
background-image: linear-gradient( to top left , transparent 40%, lime ),
linear-gradient( to top right, transparent 10%, red ),
linear-gradient( 220deg , transparent, blue );
}
実行結果