CSS【 background】1 ~ 背景プロパティの種類とbackground-color

colmun_main4258

backgroundプロパティは、背景に関するスタイルをまとめて指定できるプロパティです。
背景に関するプロパティを使用すると、要素の背景に色や画像を表示させるだけでなく、ある画像をリピートして配置したり、色をグラデーションさせて表示したりと、さまざまな背景を作り出すこともできます。
今回は、このような背景に関するプロパティの種類と、使用頻度の高いbackground-colorプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background】1 ~ 背景プロパティの種類とbackground-color(本ページ)
CSS【 background】2 ~ background-imageでレイヤーやグラデーションも
CSS【 background】3 ~ background-repeat、background-attachment
CSS【 background】4 ~ background-position
CSS【 background】5 ~ background-size
CSS【 background】6 ~ background-clip、background-origin
CSS【 background】7 ~ 背景に関するショートハンドプロパティ

目次

1.背景に関するプロパティとその値
2.background-colorプロパティ

1.背景に関するプロパティとその値

背景に関するプロパティには、次のようなものがあります。

background-color 背景の色を指定する

値:CSSの色指定(カラーネーム、RGB(16進数,10進数)、HSL)、キーワード transparent(透明)、currentColor(文字色)
デフォルト値はtransparent

background-image 背景画像を指定する

値:url(“画像のURL”)、none
デフォルト値はnone

background-repeat 画像の繰り返し方法を指定する

値:repeat-x, repeat-y, repeat, no-repeat, space, round
デフォルト値はrepeat

background-attachment スクロール時の背景画像の動きを指定する

値:fixed, scroll, local
デフォルト値はscroll

background-position 画像の表示位置を指定する

値:数値(pxやemなどの単位を付けて)、%、top、right、bottom、left、center
デフォルト値は「0 0」

background-size 画像の表示サイズを指定する

値:数値(pxやemなどの単位を付けて)、%、auto、contain、cover
デフォルト値はauto

background-clip 背景の範囲を指定する

値:border-box、padding-box、content-box
デフォルト値はborder-box

background-origin 画像配置の基準位置を指定する

値:border-box、padding-box、content-box
デフォルト値はborder-box

background 背景に関するショートハンドプロパティ

値を半角スペースで区切って指定する
sizeはpositionとセットで「position/size」という順番でスラッシュで区切って指定する
originはclipの前に指定する
上記以外の指定は順不同

▲目次へ戻る

 

2.background-colorプロパティ

colmun_image1365_02

background-colorプロパティは、要素の背景色を指定するプロパティです。
指定する値には次のようなものがあります。

CSSの色指定 カラーネーム、RGB(16進数、10進数)、HSLなどのCSSの色指定
transparent デフォルト値
透明で、rgba(0,0,0,0)と同じ
currentColor 文字色(colorプロパティで指定された色)と同色

background-colorプロパティの値は、継承されません。
また、background-colorプロパティは、全ての要素で使用できます。

テキストに背景色を指定すると、次のような表示になります。

背景色:#993366

背景色:lightblue;

背景色:rgba(156,100,210,0.5)

背景色:hsla(181, 100%, 45%, 0.2)

背景色:transparent

背景色:currentColor

ソースは次の通りです。

(CSS)
div#sample {margin:0;}
div#sample p {margin:1em 0; padding:0.3em 1em; background-color:#993366;}
div#sample p:nth-child(2) {background-color:lightblue;}
div#sample p:nth-child(3) {background-color:rgba(156,100,210,0.5);}
div#sample p:nth-child(4) {background-color:hsla(181, 100%, 45%, 0.2);}
div#sample p:nth-child(5) {background-color:transparent;}
div#sample p:nth-child(6) {background-color:currentColor;}

(HTML)
<div id=”sample”>
<p>背景色:#993366</p>
<p>背景色:lightblue;</p>
<p>背景色:rgba(156,100,210,0.5)</p>
<p>背景色:hsla(181, 100%, 45%, 0.2)</p>
<p>背景色:transparent</p>
<p><font color=”#FFF”>背景色:currentColor</font></p>
</div>

最後に指定したcurrentColorは、その要素の文字色(ここでは黒)と同色になるため、本来テキストの文字は背景色に紛れて読めませんが、HTMLのタグ内に別のフォントカラー(白)を設定しているので、文字が判別できています。

p:nth-child(N)というセレクタは、N番目のp要素をセレクタにするという擬似クラスです。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です