page 背景色関連

最終更新：2021/06/18

背景色関連

page.cssで作った背景色のクラス

背景色白のクラスがわかりづらいため、濃い背景色のクラスで囲んでいます。

「bg_color_b」のクラスです。
背景色が黒くなります。
背景色が黒いため、文字を白くするクラスを作りました。「font_color_w」のクラスで文字が白くなります。
aタグなどは文字が白くならない場合があります。

「bg_color_b」のクラスです。
背景色が灰色になります。
「gray-box」のクラスよりは若干暗い色です。

「bg_color_w」のクラスです。
背景色が白になります。

html

<div class="bg_color_b">
  <p class="txt-center font_color_w">「bg_color_b」のクラスです。<br>背景色が黒くなります。<br>背景色が黒いため、文字を白くするクラスを作りました。「font_color_w」のクラスで文字が白くなります。<br>aタグなどは文字が白くならない場合があります。</p>
	<div class="bg_color_g">
	  <p class="txt-center">「bg_color_b」のクラスです。<br>背景色が灰色になります。<br>「gray-box」のクラスよりは若干暗い色です。</p>
		<div class="bg_color_w">
			<p class="txt-center">「bg_color_w」のクラスです。<br>背景色が白になります。</p>
		</div>
	</div>
</div>

<p class="txt-center font_color_w">「bg_color_b」のクラスです。<br>背景色が黒くなります。<br>背景色が黒いため、文字を白くするクラスを作りました。「font_color_w」のクラスで文字が白くなります。<br>aタグなどは文字が白くならない場合があります。</p>

<p class="txt-center">「bg_color_b」のクラスです。<br>背景色が灰色になります。<br>「gray-box」のクラスよりは若干暗い色です。</p>

<p class="txt-center">「bg_color_w」のクラスです。<br>背景色が白になります。</p>

</div>

css

.bg_color_w{
	background-color: #fff;
	padding: 5%;
}
.bg_color_g{
	background-color: #ccc;
	padding: 5%;
}
.bg_color_b{
	background-color: #000;
	padding: 5%;
}

.bg_color_w{

background-color: #fff;

padding: 5%;

}

.bg_color_g{

background-color: #ccc;

padding: 5%;

}

.bg_color_b{

background-color: #000;

padding: 5%;

}

背景色透過

「bg_color_b_rgba」のクラスです。
背景色が黒く、透けて見えます。

「bg_color_b_rgba」のクラスです。
背景色が灰色に、透けて見えます。

「bg_color_w_rgba」のクラスです。
背景色が白に、透けて見えます。

html

<div class="bg_color_b_rgba">
  <p class="txt-center font_color_w">「bg_color_b_rgba」のクラスです。<br>背景色が黒く、透けて見えます。</p>
	<div class="bg_color_g_rgba">
	  <p class="txt-center">「bg_color_b_rgba」のクラスです。<br>背景色が灰色に、透けて見えます。</p>
		<div class="bg_color_w_rgba">
			<p class="txt-center">「bg_color_w_rgba」のクラスです。<br>背景色が白に、透けて見えます。</p>
		</div>
	</div>
</div>

<p class="txt-center font_color_w">「bg_color_b_rgba」のクラスです。<br>背景色が黒く、透けて見えます。</p>

<p class="txt-center">「bg_color_b_rgba」のクラスです。<br>背景色が灰色に、透けて見えます。</p>

<p class="txt-center">「bg_color_w_rgba」のクラスです。<br>背景色が白に、透けて見えます。</p>

</div>

css

.bg_color_w_rgba{
	background-color: rgba(255,255,255,0.80);
	padding: 5%;
}
.bg_color_g_rgba{
	background-color: rgba(204,204,204,0.80);
	padding: 5%;
}
.bg_color_b_rgba{
	background-color: rgba(0,0,0,0.80);
	padding: 5%;
}

.bg_color_w_rgba{

background-color: rgba(255,255,255,0.80);

padding: 5%;

}

.bg_color_g_rgba{

background-color: rgba(204,204,204,0.80);

padding: 5%;

}

.bg_color_b_rgba{

background-color: rgba(0,0,0,0.80);

padding: 5%;

}

振り分けページへ戻る

トップへ戻る