3.1 background-repeatプロパティ
CSSのbackground-repeatとbackground-sizeプロパティは、背景画像が要素内でどのように繰り返され、拡大縮小されるかを制御するために使われるよ。これらのプロパティはウェブ開発者に視覚的に魅力的な背景を作成するための柔軟なツールを提供するよ。一つずつ詳しく見ていこう。
background-repeatプロパティは、要素内で背景画像がどのように繰り返されるかを決定するんだ。デフォルトでは、背景画像は水平と垂直の両方で繰り返されるよ。
値
repeat: 画像は水平と垂直に繰り返される (デフォルト)repeat-x: 画像は水平にのみ繰り返されるrepeat-y: 画像は垂直にのみ繰り返されるno-repeat: 画像は繰り返されない
1. 値: repeat
画像を水平と垂直に繰り返す。
CSS
.repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat;
border: 1px solid #000;
}
HTML
<div class="repeat">水平と垂直に繰り返し</div>
2. 値: repeat-x
画像を水平に繰り返す。
CSS
.repeat-x {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-x;
border: 1px solid #000;
}
HTML
<div class="repeat-x">水平にのみ繰り返し</div>
3. 値: repeat-y
画像を垂直に繰り返す。
CSS
.repeat-y {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-y;
border: 1px solid #000;
}
HTML
<div class="repeat-y">垂直にのみ繰り返し</div>
4. 値: no-repeat
画像は繰り返されない。
CSS
.no-repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: no-repeat;
border: 1px solid #000;
}
HTML
<div class="no-repeat">繰り返さない</div>
コードの説明
.repeat: 画像は水平と垂直に繰り返され、全体を満たす.repeat-x: 画像は水平にのみ繰り返される.repeat-y: 画像は垂直にのみ繰り返される.no-repeat: 画像は繰り返されず、一度だけ表示される
3.2 background-sizeプロパティ
background-sizeプロパティは背景画像のサイズを制御するんだ。このプロパティを使って、画像のサイズを変更し、要素にうまく収まるようにできるよ。
値:
auto: 画像のサイズは自動的に決定される（デフォルト）cover: 画像は要素を完全に覆うように拡大縮小され、比率を保つcontain: 画像は要素に完全に収まるように拡大縮小され、比率を保つ- 絶対値: 例: 100px 50px 画像の幅と高さをピクセルで指定
- パーセント値: 例: 50% 50% 要素のサイズに対する画像の幅と高さをパーセントで指定
1. デフォルトサイズ (auto):
画像のサイズは自動的に決定される（デフォルト）。
CSS
.size-auto {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-size: auto;
border: 1px solid #000;
}
HTML
<div class="size-auto">デフォルトサイズ (auto)</div>
2. cover:
画像は要素を完全に覆うように拡大縮小され、比率を保つ。
CSS
.size-cover {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: cover;
border: 1px solid #000;
}
HTML
<div class="size-cover">要素を完全に覆う (cover)</div>
3. contain:
画像は要素に完全に収まるように拡大縮小され、比率を保つ。
CSS
.size-contain {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: contain;
border: 1px solid #000;
}
HTML
<div class="size-contain">完全に収まる (contain)</div>
4. 絶対値:
例えば、100px 50pxは画像の幅と高さをピクセルで指定する。
CSS
.size-pixels {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 100px 50px;
border: 1px solid #000;
}
HTML
<div class="size-pixels">ピクセルサイズ (100px 50px)</div>
5. パーセント値:
例えば、50% 50%は要素のサイズに対する画像の幅と高さをパーセントで指定する。
CSS
.size-percent {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 50% 50%;
border: 1px solid #000;
}
HTML
<div class="size-percent">パーセントサイズ (50% 50%)</div>
コードの説明:
.size-auto: 画像のサイズは自動で決められる.size-cover: 画像は要素を完全に覆うように拡大縮小され、比率を保つ。画像の一部が切り取られることがある.size-contain: 画像は要素に完全に収まるように拡大縮小され、比率を保つ。画像全体が表示されるが、空白の領域ができることがある.size-pixels: 画像サイズをピクセル単位で指定（幅100px、高さ50px）.size-percent: 画像サイズを要素に対するパーセントで指定（幅50%、高さ50%）
3.3 background-repeatとbackground-sizeの併用
background-repeatとbackground-sizeプロパティは、背景画像の表示効果を達成するためにしばしば一緒に使われるんだ。
使用例:
CSS
.combined {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #000;
}
HTML
<body>
<div class="combined">背景画像が繰り返されずに要素を完全に覆うように拡大縮小される</div>
</body>
コードの説明:
background-repeat: no-repeat;: 画像は繰り返されないbackground-size: cover;: 画像は要素を完全に覆うように拡大縮小され、比率を保つ。画像の一部が切り取られることがある
GO TO FULL VERSION