先生と生徒の会話形式で理解しよう

生徒

「背景画像を繰り返すときに、縦だけ・横だけにできるって聞いたのですが、本当ですか？」

先生

「はい、CSSのbackground-repeatというプロパティを使えば、縦方向だけ、横方向だけの繰り返しができますよ。」

生徒

「どんな風に書けばよいんですか？初心者でも使えますか？」

先生

「もちろん大丈夫です！まずは基本からわかりやすく説明しますね。」

1. CSSで背景画像を繰り返すとは？

CSS（シーエスエス）では、背景画像を指定することで、ウェブページの背景に画像を表示させることができます。背景画像は、デフォルトでは縦にも横にも自動的に繰り返される（リピート）設定になっています。

これは「同じ画像を何回もコピーして貼り付ける」イメージです。たとえば小さな模様の画像を背景に使うときに、ページ全体にその模様が敷き詰められるようになります。

2. background-repeatプロパティとは？

background-repeat（バックグラウンド・リピート）は、背景画像がどのように繰り返されるかを指定するためのCSSプロパティです。

このプロパティにはいくつかの指定方法があります。

repeat：縦にも横にも繰り返します（初期設定）。
no-repeat：繰り返しなし。画像は一回だけ表示されます。
repeat-x：横方向にだけ繰り返します。
repeat-y：縦方向にだけ繰り返します。

3. repeat-xとrepeat-yの違いを理解しよう

repeat-xを使うと、画像が横方向（X軸）にだけ繰り返されます。縦には繰り返されません。

一方、repeat-yを使うと、画像が縦方向（Y軸）にだけ繰り返されます。横には繰り返されません。

このようにすることで、たとえば「横に広がるライン状の画像」を使って、ページの上部に装飾を入れることが簡単にできます。

4. 実際にコードで使ってみよう！

ここでは、小さなアイコン画像を背景に設定し、repeat-xとrepeat-yをそれぞれ使って、どう表示が変わるのかを見てみましょう。

横方向に繰り返す（repeat-x）


<style>
.box-x {
    width: 100%;
    height: 150px;
    background-image: url('https://www.w3schools.com/cssref/paper.gif');
    background-repeat: repeat-x;
    border: 2px solid #333;
}
</style>

<div class="box-x"></div>

ブラウザ表示

縦方向に繰り返す（repeat-y）


<style>
.box-y {
    width: 150px;
    height: 300px;
    background-image: url('https://www.w3schools.com/cssref/paper.gif');
    background-repeat: repeat-y;
    border: 2px solid #333;
}
</style>

<div class="box-y"></div>

ブラウザ表示

5. どんなときに使うと便利？

たとえば、横に長く続く背景を作りたいとき（見出しの下に線を引くようなデザイン）にはrepeat-xがぴったりです。

逆に、縦に装飾を入れたいとき（例えば、サイドバーの背景など）にはrepeat-yが便利です。

どちらも画像を少しだけ用意するだけで、繰り返しの力で広範囲に表示できるので、画像サイズも軽く、ページの表示速度も速くなります。

6. 注意点と豆知識

背景画像のサイズが合っていないと、つなぎ目がズレてしまうことがあります。なるべくつなぎ目がわからないようなデザインを選ぶのがポイントです。
repeat-xやrepeat-yは、ページのデザインにリズム感や統一感を出すときにとても便利です。
画像のサイズは小さくても構いません。うまく繰り返されることで、パターンのように見えるのです。
スマホやタブレットなど、画面の幅が変わる場面でも、繰り返しの背景は柔軟に対応してくれます。

まとめ

背景画像を活用したウェブデザインは、見た目の印象を大きく変える大切な要素です。今回扱ったbackground-repeatのrepeat-xとrepeat-yは、その中でも特に使い勝手が良く、初心者でも扱いやすいプロパティです。背景画像を横方向だけに繰り返したいとき、あるいは縦方向だけに繰り返したいときにrepeat-xやrepeat-yを使うことで、無駄な大きさの画像を用意する必要がなくなり、軽量で美しいデザインを実現できます。背景画像というものは、ページ全体の雰囲気を形づくる大きな役割を持っています。模様やラインを繰り返すことで視線を誘導したり、読みやすい構成にしたりすることができます。背景画像の繰り返し方を理解することで、より豊かな表現が可能になります。

repeat-xは横に広がるデザインを作りたい場合にとても有効です。例えば、見出しの下に細いライン状の模様を繰り返して装飾したいとき、小さな画像一枚をrepeat-xで繰り返すだけで、どれだけ広い画面幅でも自然に見せることができます。逆にrepeat-yは縦のパターンに最適で、サイドバーや縦長の領域を柔らかく彩る背景として役立ちます。縦方向の飾りを長く続けたい場合でもrepeat-yを使えば画像が縦に連続して表示され、境目もほとんど気になりません。背景画像の繰り返しは固定画像よりもデザインの自由度が高く、ページ全体の軽さを保ちながら印象に残る見栄えを作ることができる点が魅力と言えるでしょう。

また、背景画像を綺麗に繰り返すためには、画像選びもとても重要になります。つなぎ目が自然に見えるように工夫された画像を使うことで、背景全体が滑らかにつながり、途切れのない質感を演出できます。スマートフォンやタブレットなど、画面幅が変化しやすい環境でもrepeat-xやrepeat-yは柔軟に表示を調整してくれます。もし背景画像が急に途切れてしまうと違和感につながるため、自然に繰り返せる模様を使うと安心です。背景のリズムや統一感を整えるためにも、繰り返しのパターンは非常に便利です。大きな画像を用意しなくても、小さな画像で画面全体をカバーできるため、読み込み速度にも良い影響があります。

さらに、背景画像を繰り返すときにサイズや比率が適切でないと、貼り合わせた部分がずれてしまったように見えることがあります。特につなぎ目がはっきりした画像を使う場合は注意が必要です。repeat-xやrepeat-yのような動きを理解しておくと、スタイルの調整も行いやすくなるため、初心者の方にはぜひ繰り返しの仕組みを覚えてほしいところです。背景画像を繰り返すという考え方は、シンプルなようでいてとても奥深いものがあります。模様の種類やサイズによって、印象が大きく変わりますので、用途に合わせてrepeat-xとrepeat-yを使い分けると良いでしょう。

背景画像の繰り返しサンプルコード


<style>
.sample-box-x {
    width: 100%;
    height: 120px;
    background-image: url('https://www.w3schools.com/cssref/paper.gif');
    background-repeat: repeat-x;
    border: 2px solid #333;
}
.sample-box-y {
    width: 150px;
    height: 250px;
    background-image: url('https://www.w3schools.com/cssref/paper.gif');
    background-repeat: repeat-y;
    border: 2px solid #333;
}
</style>

<div class="sample-box-x"></div>
<div class="sample-box-y"></div>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「背景画像を繰り返すだけで、こんなに表現が広がるなんて驚きました。repeat-xとrepeat-yの違いもよくわかりました。」

先生

「背景の繰り返しはシンプルですが、とても効果的なんですよ。特に模様の背景では必須とも言えるテクニックです。」

生徒

「repeat-xは横長の装飾に便利で、repeat-yは縦方向なんですよね。用途ごとに選ぶといいんですね。」

先生

「その通りです。画面幅が変わっても自然に対応できるので、背景を軽くしながら見やすさも保てます。」

生徒

「小さな画像でもページ全体に広がるのが便利ですね。軽い画像で済むのも助かります。」