要素の装飾（background、border）プロパティの仕様と使い方

カテゴリ：CSS編

要素に装飾を加えるプロパティ

要素の背景を変えたり枠線を表示したりなど、以下の要素に装飾を加えるプロパティについて解説いたします。

background-color

要素の背景色を指定する場合はbackground-colorプロパティを使用します。
背景色をカラーネームもしくはカラーコードで指定します。

カラーネーム、カラーコードについてはカラーネーム・カラーコード一覧をご参照ください。

p.infobox {
    background-color: honeydew;
}

<p class="infobox">今年の花火大会は8月26日に実施予定です。ぜひご参加ください。<br>
場所：○○自治会場<br>
時間：午後7時開始</p>

background-image

要素の背景に表示する画像ファイルを指定する場合はbackground-imageプロパティを使用します。
画像ファイルのパスをurl('パス')で指定します。
初期設定では画像が敷き詰められます。（横方向と縦方向に繰り返し）

例）

sample.pngファイルをp要素の背景に敷き詰める場合：

p.infobox {
    background-image: url('back_sample.gif');
}

要素の背景画像を使用しない場合：

p {
    background-image: none;
}

background-position

要素画像の表示位置を指定する場合はbackground-positionプロパティを使用します。
指定した位置はbackground-originプロパティからの相対位置になります。

background-positionプロパティに指定可能な値とキーワード

background-positionプロパティに指定可能な値とキーワードは以下となります。

長さで使用できる単位についてはCSSで使用できる単位をご参照ください。

p {
    background-position: 20% 50%;
}

background-size

要素画像のサイズを指定する場合はbackground-sizeプロパティを使用します。
値に応じて画像が引き延ばされたり縮小されて表示されます。

background-sizeプロパティに指定可能なキーワード

background-sizeプロパティに指定可能なキーワードは以下となります。

例）

画像を背景の配置領域内に収まるように表示：

p {
    background-size: contain;
}

画像を背景の配置領域を完全にカバーするように表示：

p {
    background-size: cover;
}

画像サイズを'90% 50%'で表示：

p {
    background-size: 90% 50%;
}

画像サイズを'5em 5em'で表示：

p {
    background-size: 5em 5em;
}

background-repeat

要素画像の繰り返し表示の方法を指定する場合はbackground-repeatプロパティを使用します。

background-repeatプロパティに指定可能なキーワード

background-repeatプロパティに指定可能なキーワードは以下となります。

例）

画像サイズを表示領域の整数倍に拡大・縮小してリピート：

p {
    background-repeat: round;
}

background-repeat: roundが無い場合：

background-clip

要素画像の境界（どこまで表示するか）を指定する場合はbackground-clipプロパティを使用します。

background-clipプロパティに指定可能なキーワード

background-clipプロパティに指定可能なキーワードは以下となります。

例）

画像をボーダーボックス内に描画：

p {
    background-clip: border-box;
}

画像をパディングボックス内に描画：

p {
    background-clip: padding-box;
}

画像をコンテンツボックス内に描画：

p {
    background-clip: content-box;
}

background-origin

背景画像の原点の位置を指定する場合にはbackground-originプロパティを使用します。
background-originプロパティで指定した地点を原点として背景画像が表示されます。
background-positionプロパティを使用した場合は、background-originプロパティからの相対位置で表示されます。

background-originプロパティに指定可能なキーワード

background-originプロパティに指定可能なキーワードは以下となります。

例）

画像の位置をボーダーボックスを基準とする：
background-clipプロパティにcontent-boxを指定した場合、背景画像はパディングボックスを基準に表示されるため、以下のようにおかしな位置から背景画像が表示されてしまします。

p {
    background-clip: content-box;
}

画像の位置をコンテンツボックスを基準とする：
背景画像をコンテンツボックスを基準にして表示すれば、以下のように画像がコンテンツボックスの左端上から表示されるようになります。

p {
    background-origin: content-box;
    background-clip: content-box;
}

background-attachment

要素をスクロールした際に背景画像をスクロールさせるか固定させるかを設定する場合はbackground-attachmentプロパティを使用します。

background-attachmentに指定可能なキーワード

background-attachmentに指定可能なキーワードと振る舞いは以下となります。

例）

背景をビューポートに固定：

p {
    background-attachment: fixed;
}

背景を要素のコンテンツに関して固定：

p {
    background-attachment: local;
}

背景を要素自体に固定：

p {
    background-attachment: scroll;
}

background

要素の背景の装飾をまとめて定義する場合にはbackgroundプロパティを使用します。
background-image、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment、background-colorの値もしくはキーワードを指定（順不同）します。
※但し、background-sizeを指定する場合のみ、background-positionの後ろに / で区切ってbackground-sizeを指定する必要があります。

例）

background-image、background-position、background-size、background-color、background-repeat、background-attachment、background-clipの順番で指定した例：

p {
    background: url("sample.png") 40% / 10em gray round fixed border-box;
}

border

要素の枠線を表示する場合はborderプロパティを使用します。

borderプロパティに指定可能な値

borderプロパティには線の幅、線のスタイル、線の色の3つの値を指定します。
※順不同

例）

p {
    border: 3px dash orange;
}

以上、要素に装飾を加えるプロパティについて解説いたしました。

公開日時：2019年06月30日 21:11:04