CSSのbackgroundショートハンド（一括指定）プロパティの使い方を解説
CSSのbackgroundショートハンド（一括指定）プロパティは、要素の背景をまとめて定義するための便利なプロパティです。1つの宣言で複数の背景関連プロパティを同時に設定できるため、コードが簡潔になり、可読性も向上します。
backgroundショートハンドに含まれる個別プロパティ
backgroundショートハンドを使うことで、以下の8つの個別プロパティを一度に指定できます。
- background-color：背景色
- background-image：背景画像
- background-repeat：画像の繰り返し方法
- background-position：画像の表示位置
- background-clip：背景の描画範囲
- background-size：画像のサイズ
- background-origin：背景の基準位置
- background-attachment：スクロール時の固定方法
構文
CSS backgroundプロパティの基本構文は以下のとおりです。
セレクタ {
background: /* 値 */;
}使用例1：bodyとdivへの適用
次の例では、body要素に背景色・背景画像・繰り返し設定・位置を一括で指定し、div要素にも半透明の背景色と画像を設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat 40% 20%;
}
div {
padding: 100px;
background: rgba(50,100,50,0.4) url("https://www.tutorialspoint.com/green/images/logo.png") no-repeat left;
}
</style>
</head>
<body>
<h2>Learn</h2>
<ul>
<li>Java</li>
<li>C#</li>
<li>Android</li>
<li>iOS</li>
<li>C++</li>
<li>C</li>
</ul>
<div></div>
</body>
</html>出力結果
上記のコードを実行すると、次のような出力が得られます。
使用例2：テーブルセルへの適用
次の例では、table、tr、td要素それぞれに異なる背景スタイルを一括指定しています。tdにはクラスではなくIDセレクタ「#demo」を使って個別の背景画像を設定している点に注目してください。
<!DOCTYPE html>
<html>
<head>
<style>
table, tr, td {
margin: auto;
border: 2px solid red;
padding: 40px;
}
td {
background: rgba(50,100,50,0.4) url("https://www.tutorialspoint.com/images/blockchain.png") no-repeat;
}
#demo {
background: rgba(50,100,50,0.4) url("https://www.tutorialspoint.com/images/reactjs.png") no-repeat;
}
table {
background: ivory url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat center;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<table>
<tr><td></td></tr>
<tr><td id="demo"></td></tr>
</table>
</body>
</html>出力結果
上記のコードを実行すると、次のような出力が得られます。
まとめ
backgroundショートハンドプロパティを使えば、背景色・背景画像・繰り返し・位置などを1行で効率的に指定できます。値を省略した場合は初期値が適用されるため、必要な項目だけを順に並べて記述するのがポイントです。
-
CSSのborder-colorプロパティの使い方を徹底解説
CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &
-
CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード
CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。 また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da