TECH I.S.

CSS 背景の短縮形


CSS の背景 - 省略形のプロパティ

コードを短くするために、すべての背景プロパティを 1 つのプロパティで指定することもできます。これは短縮プロパティと呼ばれます。

書く代わりに:

body {   background-color: #ffffff;   background-image: url("img_tree.png");   background-repeat: no-repeat;   background-position: right top; }

省略形のプロパティを使用できますbackground:

省略形プロパティを使用して、1 つの宣言で背景プロパティを設定します。

body {   background: #ffffff url("img_tree.png") no-repeat right top; }

自分で試してみる »

省略形プロパティを使用する場合、プロパティ値の順序は次のとおりです。

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

プロパティ値の 1 つが欠けていても、他の値がこの順序である限り問題ありません。値がないため、上記の例では background-attachment プロパティを使用していないことに注意してください。


演習で自分自身をテストする

エクササイズ:

<h1> 要素の背景色を「lightblue」に設定します。

<style>
h1 { : lightblue;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

演習を開始する


すべての CSS 背景プロパティ

財産

説明

バックグラウンド 1 つの宣言ですべての背景プロパティを設定します
背景添付ファイル 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します
背景クリップ 背景の描画領域を指定します
背景色 要素の背景色を設定します
背景画像 要素の背景画像を設定します
バックグラウンド原点 背景画像を配置する場所を指定します
背景位置 背景画像の開始位置を設定します
バックグラウンドリピート 背景画像の繰り返し方法を設定します
背景サイズ 背景画像のサイズを指定します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細