• このエントリーをはてなブックマークに追加

背景のサンプルコードスニペット。

単色背景色の指定

backgroundや、background-xxxなどは背景のスタイルを定義します。文字の背景・ボックス・ブロック・表・テーブルやリストなど様々な箇所の背景の指定が可能。

背景は単色を始め、グラデーション、画像を使ったタイル状の背景設定や複数の背景の指定も可能です。

HTML

<div class="background-1">背景を赤に</div>

CSS

<style>
	.background-1{
		color: rgba(255,255,255,1);
		background: rgba(255,0,0,1);
	}
</style>

デモ

グラデーションの指定

linear-gradient(始点色, 終点の色);と指定します。このサンプルでは色をコードではなく、文字名称で指定していますが、グラデーションはうまく表示できます。グラデーションの方向を指定しないと、縦方向にグラデーション背景となります。

HTML

<div class="background-2">背景をグラデーションに</div>

CSS

<style>
	.background-2{
		color: rgba(255,255,255,1);
		background: linear-gradient(black, gray);
	}
</style>

デモ

グラデーションの指定(角度指定)

linear-gradient(始点色, 終点の色);

HTML

<div class="background-3-1">デフォルトと同じ縦方向にグラデーション</div>
<div class="background-3-2">90度傾けてグラデーション</div>
<div class="background-3-3">180度傾けてグラデーション</div>
<div class="background-3-4">270度傾けてグラデーション</div>
<div class="background-3-5">10度傾けてグラデーション</div>

CSS

<style>
.background-3-1{
    margin: 0 0 1rem;
    color: rgba(255,255,255,1);
    background: linear-gradient(0deg, rgba(0,0,0,1), rgba(100,100,100,1));
}
.background-3-2{
    margin: 0 0 1rem;
    color: rgba(255,255,255,1);
    background: linear-gradient(90deg, rgba(255,0,0,1), rgba(255,150,0,1));
}
.background-3-3{
    margin: 0 0 1rem;
    color: rgba(255,255,255,1);
    background: linear-gradient(180deg, rgba(200,200,0,1), rgba(130,180,0,1));
}
.background-3-4{
    margin: 0 0 1rem;
    color: rgba(255,255,255,1);
    background: linear-gradient(270deg, rgba(0,100,150,1), rgba(50,180,0,1));
}
.background-3-5{
    margin: 0 0 1rem;
    color: rgba(255,255,255,1);
    background: linear-gradient(10deg, rgba(0,150,255,1), rgba(150,0,230,1));
}
</style>

デモ

背景を刻々と変化させるアニメーションの例1

背景は単色ならば、簡単に変化させることが可能。明るいコーラル(珊瑚っぽい色)・パープルへの変化。そして、コーラルに戻るの繰り返し。

linear-gradient(始点色, 終点の色);

HTML

<div class="background-animation1">sample</div>

CSS

<style>
@keyframes background-gradient1 {
	0% {
		background: rgba(255,80,80,1);
	}
	50% {
		background: rgba(100,0,150,1);
	}
	100% {
		background: rgba(255,80,80,1);
	}
}
.background-animation1 {
	padding: 1vw;
	font-size: 2rem;
	animation: background-gradient1 3s ease infinite;
	color: rgba(255,255,255,1);
	background: rgba(50,200,200,1);
}
</style>

デモ

背景を刻々と変化させるアニメーションの例2

明るいシアン・グリーンへの変化。そして、シアンに戻るの繰り返し。

linear-gradient(始点色, 終点の色);

HTML

<div class="background-animation2">sample</div>

CSS

<style>
@keyframes background-gradient2 {
	0% {
		background: rgba(50,200,200,1);
	}
	50% {
		background: rgba(0,200,50,1);
	}
	100% {
		background: rgba(50,200,200,1);
	}
}
.background-animation2 {
	padding: 1vw;
	font-size: 2rem;
	animation: background-gradient2 5s ease infinite;
	color: rgba(255,255,255,1);
	background: rgba(50,200,200,1);
}
</style>

デモ