VIDEO LESSON

CSSのbackground-repeatの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:39動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、バックグラウンドリピートです。
0:06これは、背景画像を繰り返して表示するかどうか、そしてどのように繰り返すかを指定するプロパティです。
0:12たとえば、小さなドットの模様を一つだけポツンと置くのか、それとも壁紙のように領域いっぱいに敷き詰めるのか、
0:17その違いがこの一つの指定で変わります。
0:22この動画では、基本の書き方から、横だけ、縦だけ繰り返す値、間隔を調整する少し進んだ値までを順番に見ていきます。
0:29背景画像を扱うときには必ずセットで考える、とても基本的なプロパティですので、
0:33最初に全体像をつかみましょう。
0:36模様の見え方は、画像の大きさや置く位置とも深く関わっていますので、それらのプロパティとの組み合わせも意識しながら聞いてみてください。
0:45まず基本の書き方です。
0:47スライドのように、対象のクラスにバックグラウンドリピートと、繰り返し方を表す値を書きます。
0:54プロパティ名の後ろにコロン、値の最後にセミコロンを置く、通常の宣言と同じ形です。
1:01クラス名は、エイチティーエムエルのクラス属性と一致させてください。
1:06大切なのは初期値です。
1:08何も指定しなければ、値はリピート、つまり背景画像は自動で繰り返されます。
1:14だから、繰り返したくない場合は、必ず自分でノーリピートと書く必要があります。
1:20通常は親から子へ継承しませんので、背景が欲しい要素ごとに指定しましょう。
1:26最もよく使う二つの値から見ていきましょう。
1:30リピートは、背景画像を縦と横の両方向に繰り返し、領域全体を敷き詰めます。
1:36初期値がこれなので、小さな模様を指定すると、自動的にタイルのように並ぶわけです。
1:42一方、ノーリピートは、画像を一つだけ表示し、繰り返しません。
1:47写真やロゴのように、大きく一枚だけ見せたい背景では、こちらが定番です。
1:53この二つを切り替えるだけで、模様が一つだけになるか、領域いっぱいに広がるかがはっきり変わります。
2:01まずはこの二つの違いを、自分の言葉で説明できるようになることが目標です。
2:07迷ったときは、まず模様を敷き詰めたいのか、一枚だけ見せたいのかを先に決めると、
2:11値の選択で悩まなくなります。
2:16次に、方向を限定する二つの値です。
2:19リピートエックスは横方向だけに繰り返し、縦には繰り返しません。
2:24横一列に模様が並ぶので、見出しの下の帯や、区切り線のような装飾に向いています。
2:30リピートワイはその逆で、縦方向だけに繰り返し、横には広がりません。
2:36サイドバーの縁を飾るような場面で使えます。
2:39覚え方はシンプルで、エックスは横軸、ワイは縦軸、と座標の考え方と結びつけると忘れにくくなります。
2:47全体に敷き詰める必要がないときは、方向を絞ることで、意図しない場所に模様が出るのを防げます。
2:55少し進んだ値も紹介します。
2:56スペースは、画像が途中で切れないように、画像どうしの間隔を自動で調整して並べます。
3:03端で半端に切れるのが気になるときに便利です。
3:06ラウンドは、画像そのものを少し伸ばしたり縮めたりして、領域にぴったり収まる個数で並べます。
3:13間隔ではなく大きさで調整するのがスペースとの違いです。
3:17また、このプロパティは値を二つ並べて書くこともでき、最初が横方向、二番目が縦方向の指定になります。
3:24たとえば、横は繰り返さず、縦だけ繰り返す、といった細かな組み合わせも表現できます。
3:30ここからは実例です。
3:32エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
3:39中には短い文章が入っていて、背景の上で文字がどう見えるかも一緒に確認できるようにしています。
3:46頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
3:51シーエスエスでは、ステージに幅の上限と余白と点線の枠を付け、デモには余白と緑色の太い枠と文字色を付けます。
3:59この土台は変えずに、最後のバックグラウンドリピートの行だけを切り替えて比べていくのが、
4:03この実例の進め方です。
4:07土台のシーエスエスの続きです。
4:09デモの箱には、高さの下限と、背景画像として円形のグラデーションを指定します。
4:15これで緑色の小さなドットが一つ描かれます。
4:18ポイントは、バックグラウンドサイズを四十ピクセルかける四十ピクセルと、小さく指定していることです。
4:25画像の大きさが領域と同じだと、繰り返しても違いが見えません。
4:30あえて小さな模様にしておくことで、繰り返すかどうかがはっきり分かるようになります。
4:36色付きの丸がタイルの一枚にあたる、と考えてください。
4:40この準備が、次の比較を分かりやすくしてくれます。
4:44このように、実験では見え方を確かめやすくする工夫が大切で、原因と結果を一つずつ結びつけて理解できるようになります。
4:52では、今回変更するプロパティとして、バックグラウンドリピートにノーリピートを指定した状態を見てみましょう。
5:01ファイルを保存してブラウザーを再読み込みすると、ドットの模様は左上に一つだけ表示されます。
5:08残りの広い部分には、土台で指定した薄い緑の背景色がそのまま見えています。
5:13あれ、背景が消えた、と感じるかもしれませんが、これは指定通りの一つだけ表示です。
5:20画像が一枚だけだと、領域のほとんどは背景色になる、という関係をここでつかんでください。
5:27繰り返しの有無で、印象が大きく変わることが分かります。
5:31次に、最後の行の値だけをリピートに置き換えてみましょう。
5:35他の指定はすべて同じです。
5:37今度は小さなドットが縦にも横にも繰り返され、箱の領域いっぱいに規則正しい水玉模様が広がります。
5:45さきほどの一つだけの状態との違いは一目瞭然ですね。
5:49これが、初期値がリピートであることの意味でもあります。
5:53小さな画像をタイルのように使うテクニックは、模様の背景やテクスチャ表現の基本です。
5:59逆に、写真を背景にするときにうっかりリピートのままだと、写真が何枚も並んでしまうので、
6:04ノーリピートの指定が欠かせません。
6:08値を一つだけ変えて比べる方法は、ほかのプロパティを学ぶときにも役立つ、とても大切な確かめ方です。
6:16効かないと感じたときの確認です。
6:18一番多いのは、指定は効いているのに、違いが見えないケースです。
6:23背景画像の大きさが領域と同じだと、繰り返しても見た目が変わりません。
6:28そんなときは、バックグラウンドサイズを小さくしてから比べ直してください。
6:33次に基本の確認として、スタイルシートが読み込めているか、セレクターとクラスが一致しているかを確かめ、
6:40開発者ツールのスタイルズで宣言が無効や上書きになっていないかを見ます。
6:46最後にコンピューテッドで最終的な値を確認しましょう。
6:50小さな画面幅や文字を拡大した状態でも、模様の上で文字が読めるかどうかも大切な確認です。
6:56最後に互換性とまとめです。
6:58バックグラウンドリピートは、クロームいち以降、エッジじゅうに以降、ファイアフォックスいち以降、
7:03サファリいち以降と、非常に古くからすべての主要ブラウザーで対応している、
7:08安心して使えるプロパティです。
7:13まとめます。
7:14初期値はリピートで継承はせず、ノーリピートで一つだけ、リピートエックスとワイで方向を絞れました。
7:22練習として、ノーリピートとリピートの違いを言葉で説明し、サイズを小さくする理由も言えるか確かめてみてください。
7:30関連するポジション、サイズ、イメージの記事もあわせて読むと、背景の理解がぐっと深まります。
7:37お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

background-repeatの役割と主な指定値を解説。模様が1つだけ表示されるか、領域に繰り返されるかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのbackground-repeatの使い方：指定値・実例・効かない原因とブラウザー互換性 →