こんにちは、初心者向けCSS講座 第17回目の講座です 。 前回は、CSSで背景画像の表示位置を設定する方法についてご紹介しました。 今回は今までご紹介してきたbackgroundプロパティをまとめて指定する方法についてご紹介します。
目次
複数のプロパティを指定する
前回までの講座では「background」プロパティを使い、背景に対してできる以下の指定をご紹介してきました。
- 背景に画像を入れる「background-image」プロパティ
- 背景画像の繰り返しを指定する「backgorund-repeat」プロパティ
- 背景画像の大きさを指定する「backgorund-size」プロパティ
- 背景画像の表示位置を指定する「backgorund-position」プロパティ
backgroundプロパティは複数同時に使用することが可能です。 例えば背景色や背景画像、サイズ、繰り返しの表示など… これまでの指定方法は一つずつプロパティを記入していました。
div {
background-color: #fff;
background-image: url(image/orange.jpg);
background-repeat: no-repeat
background-size: cover;
background-position: center bottom ;
height: 100vh;
}
しかし、この書き方だとそれぞれプロパティを指定する必要があるので、時間がかかってしまいます。 ですので、背景に関するすべての値は一括して設定をする方法をご紹介します。
プロパティを一括指定
一括する方法はすべてのプロパティを指定する必要はありません。指定してないものは初期値が適用されます。 プロパティ同士は半角スペースで区切ります。 それでは上で指定した内容を一括で記述してみましょう。 HTMLはこちらを使用します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プロパティの一括指定</title>
<meta name="description" content="プロパティの一括指定">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1>backgroundプロパティを一括指定する</h1>
</div>
</body>
</html>
CSSで一括指定をします。
@charset "UTF-8";
div{
background: #fff url(image/orange.jpg) no-repeat center bottom / cover ;
height: 100vh;
}
h1{
color:#fff;
}
ブラウザで表示するとこのように表示されます。
一括指定でも正しく表示されたことがわかります。
「background-size」と「background-position」の指定の際の注意点
一括指定で「background-size」と「background-position」を指定するときにはbackground-positionのすぐ後ろに「/」で区切る必要があります。その後ろにbackground-sizeの指定を入れましょう。
次回
今回はCSSで「background」プロパティをまとめて指定する方法についてご紹介しました。 今回でbackgroundプロパティの紹介講座は終了となります。 次回からはCSSで要素の幅と高さを指定する「width」「height」についてご紹介します！ それでは、また次回もよろしくお願いします。
