CSSの背景画像の繰り返しを制御しよう！初心者でもわかるrepeat-xとrepeat-yの使い方
生徒
「背景画像を繰り返すときに、縦だけ・横だけにできるって聞いたのですが、本当ですか？」
先生
「はい、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は縦方向なんですよね。用途ごとに選ぶといいんですね。」
先生
「その通りです。画面幅が変わっても自然に対応できるので、背景を軽くしながら見やすさも保てます。」
生徒
「小さな画像でもページ全体に広がるのが便利ですね。軽い画像で済むのも助かります。」
先生
「背景の使い方を覚えておくと、デザインの幅が大きく広がりますよ。ぜひ色々試してみてください。」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
CSSで背景画像を繰り返すにはどのプロパティを使えばよいですか？
CSSで背景画像を繰り返すには、background-repeatというプロパティを使います。これにより、画像を縦方向・横方向・両方・繰り返しなしなど柔軟に制御できます。
background-repeatの基本的な使い方を教えてください
background-repeatには「repeat」「no-repeat」「repeat-x」「repeat-y」などの指定があり、画像をどう繰り返すかを選べます。repeatは縦横両方に繰り返す初期設定です。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
