背景関連のCSSプロパティ
この記事では背景関連のCSSプロパティについて説明します。
背景の設定や位置、繰り返しなどのプロパティについて記述の仕方を学べます。
YouTube Video
プレビュー用のHTMLの作成
css-background.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-background.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>Background-Related CSS Properties Example</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Background And Decoration</h2>
20 </header>
21 <article>
22 <h3>background-color</h3>
23 <section>
24 <header><h4>background-color: red</h4></header>
25 <section class="sample-view">
26 <div class="red-example">This is a red background.</div>
27 </section>
28 <header><h4>background-color: #FF5733</h4></header>
29 <section class="sample-view">
30 <div class="hex-example">This is a background with hex color (#FF5733).</div>
31 </section>
32 <header><h4>background-color: rgb(255, 87, 51)</h4></header>
33 <section class="sample-view">
34 <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
35 </section>
36 <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
37 <section class="sample-view">
38 <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
39 </section>
40 <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
41 <section class="sample-view">
42 <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
43 </section>
44 <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
45 <section class="sample-view">
46 <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
47 </section>
48 <header><h4>background-color: transparent</h4></header>
49 <section class="sample-view">
50 <div class="transparent-example">This is a background with transparency (transparent).</div>
51 </section>
52 </section>
53 </article>
54 <article>
55 <h3>background-image</h3>
56 <section>
57 <header><h4>background-image: url('image.jpg')</h4></header>
58 <section class="sample-view">
59 <div class="background-image-example">This is a background image.</div>
60 </section>
61 <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
62 <section class="sample-view">
63 <div class="background-image-gradient">This is a background gradient.</div>
64 </section>
65 </section>
66 </article>
67 <article>
68 <h3>background-position</h3>
69 <section>
70 <header><h4>background-position: top left</h4></header>
71 <section class="sample-view">
72 <div class="top-left-example">Top Left</div>
73 </section>
74 <header><h4>background-position: center</h4></header>
75 <section class="sample-view">
76 <div class="center-example">Center</div>
77 </section>
78 <header><h4>background-position: bottom right</h4></header>
79 <section class="sample-view">
80 <div class="bottom-right-example">Bottom Right</div>
81 </section>
82 </section>
83 </article>
84 <article>
85 <h3>background-size</h3>
86 <section>
87 <header><h4>background-size: cover</h4></header>
88 <section class="sample-view">
89 <div class="cover-example">Cover</div>
90 </section>
91 <header><h4>background-size: contain</h4></header>
92 <section class="sample-view">
93 <div class="contain-example">Contain</div>
94 </section>
95 <header><h4>background-size: 100px 100px</h4></header>
96 <section class="sample-view">
97 <div class="fixed-size-example">100px by 100px</div>
98 </section>
99 </section>
100 </article>
101 <article>
102 <h3>background-repeat</h3>
103 <section>
104 <header><h4>background-repeat: repeat</h4></header>
105 <section class="sample-view">
106 <div class="repeat-example">Repeat</div>
107 </section>
108 <header><h4>background-repeat: repeat-x</h4></header>
109 <section class="sample-view">
110 <div class="repeat-x-example">Repeat X</div>
111 </section>
112 <header><h4>background-repeat: no-repeat</h4></header>
113 <section class="sample-view">
114 <div class="no-repeat-example">No Repeat</div>
115 </section>
116 <header><h4>background-repeat: space</h4></header>
117 <section class="sample-view">
118 <div class="space-example">Space</div>
119 </section>
120 <header><h4>background-repeat: round</h4></header>
121 <section class="sample-view">
122 <div class="round-example">Round</div>
123 </section>
124 </section>
125 </article>
126 </main>
127</body>
128</html>背景・装飾
background-colorプロパティ
1/* Background color specification */
2.red-example {
3 background-color: red;
4}
5
6.hex-example {
7 background-color: #FF5733;
8}
9
10.rgb-example {
11 background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15 background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19 background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23 background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27 background-color: transparent;
28 color: black;
29}background-colorプロパティは、CSSで要素の背景色を設定するために使用されるプロパティです。テキストやその他の要素の背後に表示される色を指定することができ、さまざまな形式で色を定義できます。色の指定方法は、colorプロパティと同様ですが、transparent を指定して完全に透明な背景を指定することもできます。
説明:
red-exampleクラスはキーワードを使って背景色を赤に指定します。hex-exampleクラスは16進数コードを使って背景色を指定します。rgb-exampleクラスはRGB形式を使って背景色を指定します。rgba-exampleクラスはRGBA形式を使い、透明度を追加して背景色を指定します。hsl-exampleクラスはHSL形式を使って背景色を指定します。hsla-exampleクラスはHSLA形式を使い、透明度を追加して背景色を指定します。transparent-exampleクラスは背景を透明に設定しています。
background-imageプロパティ
1/* Background image styles */
2.background-image-example {
3 /* Specify the image URL */
4 background-image: url('image.jpg');
5 /* Scale the image to cover the entire element */
6 background-size: cover;
7 /* Center the image */
8 background-position: center;
9 /* Disable image repetition */
10 background-repeat: no-repeat;
11 color: white;
12 display: flex;
13 align-items: center;
14 justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19 /* Gradient from left to right */
20 background-image: linear-gradient(to right, red, blue);
21 color: white;
22 display: flex;
23 align-items: center;
24 justify-content: center;
25}background-imageプロパティは、要素の背景に画像を設定するために使用されます。指定した画像は要素の背景として表示され、画像のサイズや位置、繰り返し方法などは他の関連するプロパティで調整することができます。background-size, background-position, background-repeatなどの関連するプロパティについても後ほど説明します。
説明:
-
**
background-image-example**クラスではbackground-imageプロパティを使って、image.jpgという画像を背景として設定しています。background-size: coverで画像が要素全体にフィットし、background-position: centerで画像を中央に配置しています。繰り返しはbackground-repeat: no-repeatで無効にしています。 -
**
background-image-gradient**クラスではlinear-gradient()を使用して、赤から青へのグラデーションを背景に設定しています。グラデーションは左から右に向かって表示されます。
指定できる値の種類
background-imageプロパティには、次の値を指定できます。
url(): 背景画像のURLを指定します。画像ファイルはurl()の中に含めます。 (ex.url('image.jpg'))none: 背景画像を設定しないことを指定します。デフォルト値です。- グラデーション: CSSのグラデーション機能を使って背景画像としてグラデーションを設定することも可能です。 (ex.
linear-gradient(),radial-gradient())
background-imageプロパティのポイント
-
画像のサイズと配置: 背景画像のサイズと配置は他のプロパティで細かく制御できるため、デザインに合わせて調整が可能です。例えば
background-size: coverと指定すると、画像を全体に広げて見切れ部分をなくします。 -
グラデーションの利用: 背景画像として画像の代わりにグラデーションを使用することもでき、デザインに動的な要素を加えられます。
background-positionプロパティ
1/* Positioned at the top-left */
2.top-left-example {
3 background-image: url('image.jpg');
4 background-position: top left;
5 background-size: cover;
6 background-repeat: no-repeat;
7 background-color: lightblue;
8 height: 100px;
9}
10
11/* Centered */
12.center-example {
13 background-image: url('image.jpg');
14 background-position: center;
15 background-size: cover;
16 background-repeat: no-repeat;
17 background-color: lightcoral;
18 height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23 background-image: url('image.jpg');
24 background-position: bottom right;
25 background-size: cover;
26 background-repeat: no-repeat;
27 background-color: lightgreen;
28 height: 100px;
29}background-positionプロパティは、要素の背景画像の表示位置を指定するために使用されます。背景画像が要素内のどこに表示されるかをコントロールすることで、デザインに応じたレイアウトを作成できます。デフォルトは 0% 0%で画像が左上に配置されます。
説明:
- **
top-left-example**クラスでは画像位置がtop leftで指定され、左上に画像が配置されます。 - **
center-example**クラスでは画像はcenter指定で中央に配置されます。 - **
bottom-right-example**クラスでは画像位置がbottom rightで指定され、右下に画像が配置されます。
指定できる値の種類
background-positionプロパティには、次の種類の値を指定できます。
-
キーワード:
left,right,top,bottom,centerを指定できます。centerと指定すると、背景画像が要素の中央に配置されます。rightと指定すると、背景画像が右側に配置されます。top leftと指定すると、背景画像が左上に配置されます。bottom rightと指定すると、背景画像が右下に配置されます。
-
長さまたはパーセンテージ:
10px 20px,50% 50%などのように指定できます。10px 20pxと指定すると、左から10px、上から20pxの位置に背景画像を配置されます。50% 50%と指定すると、横方向・縦方向ともに中央に配置されます。
-
calc()関数: CSSの計算機能を使って、より細かい位置指定が可能です。
background-sizeプロパティ
1/* Fit the image to cover the entire area */
2.cover-example {
3 background-image: url('image.jpg');
4 /* The image covers the entire element */
5 background-size: cover;
6 background-color: lightblue;
7}
8
9/* Fit the image within the element */
10.contain-example {
11 background-image: url('image.jpg');
12 /* The image fits within the element */
13 background-size: contain;
14 background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19 background-image: url('image.jpg');
20 /* Fixed width of 100px and height of 100px */
21 background-size: 100px 100px;
22 background-color: lightcoral;
23}background-sizeプロパティは、要素の背景画像のサイズを指定するために使用されます。このプロパティを使うことで、背景画像がどのように表示されるか、要素全体を埋めるのか、元のサイズのままなのかなど、デザインに合わせた調整が可能です。デフォルト値はautoで、背景画像は元のサイズが保持されます。
説明:
- **
cover-example**クラスでは、coverを指定しています。画像が要素全体を覆うように拡大されますが、一部がトリミングされる可能性があります。 - **
contain-example**クラスでは、containで指定しています。画像は要素内に収まるように調整されますが、空白ができることがあります。 - **
fixed-size-example**クラスでは固定サイズで、背景画像の幅と高さをそれぞれ100pxに指定しています。
指定できる値の種類
background-sizeには次の種類の値を指定できます。
-
キーワード
auto: 画像のデフォルトサイズを維持します（幅と高さが自動で決定されます）。cover: 背景画像が要素を完全に覆うようにサイズを調整します。要素全体を埋めますが、画像の一部がトリミングされることがあります。contain: 画像が要素内に収まるように調整されますが、要素全体を覆うことはありません。画像のアスペクト比は保持されます。
-
数値(
px,%,emなど)- 幅と高さ: 幅と高さを具体的に指定します。1つの値のみを指定した場合、その値は幅に適用され、高さは自動で調整されます。
- パーセンテージ: 要素の大きさに対する背景画像の大きさをパーセンテージで指定します。例えば、
50% 50%は、画像を要素の半分の幅と高さにします。
background-repeatプロパティ
1/* Repeat vertically and horizontally */
2.repeat-example {
3 background-image: url('pattern.png');
4 background-repeat: repeat;
5 background-size: auto;
6}
7
8/* Repeat only horizontally */
9.repeat-x-example {
10 background-image: url('pattern.png');
11 background-repeat: repeat-x;
12 background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17 background-image: url('pattern.png');
18 background-repeat: no-repeat;
19 background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24 background-image: url('pattern.png');
25 background-repeat: space;
26 background-size: auto;
27 width: 90px;
28 height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33 background-image: url('pattern.png');
34 background-repeat: round;
35 background-size: auto;
36}background-repeatプロパティは、要素の背景画像がどのように繰り返されるかを制御するために使用されます。デフォルトでは、背景画像は要素の中で横方向および縦方向に繰り返されますが、このプロパティを使用して繰り返しの動作をカスタマイズできます。
説明:
- **
repeat-example**クラスは、画像が縦横に繰り返されて表示されます。 - **
repeat-x-example**クラスは、画像が横方向にのみ繰り返されます。 - **
no-repeat-example**クラスは、画像が1回のみ表示され、繰り返されません。 - **
space-example**クラスは、背景画像が均等に配置され、空いたスペースが等間隔に配置されます。 - **
round-example**クラスは、背景画像が自動でリサイズされて、要素全体を埋めるように繰り返されます。
指定できる値
background-repeatには次の種類の値を指定できます。
repeat: 背景画像が横方向（X軸）および縦方向（Y軸）に繰り返されます。これはデフォルトの値です。repeat-x: 背景画像がX軸方向（横方向）にのみ繰り返されます。repeat-y: 背景画像がY軸方向（縦方向）にのみ繰り返されます。no-repeat: 背景画像が繰り返されず、1回だけ表示されます。space: 背景画像が均等な間隔で繰り返され、余白が等間隔で配置されます。round: 背景画像が繰り返されますが、要素全体を埋めるようにサイズが調整されます。画像がリサイズされる可能性があります。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。