HTMLやCSSを使い、Webサイトの更新・修正は一通りできるようになった。そこからもう一段できることを増やしたい、そんな方に向けた本連載。
人気連載「HTML・CSSのいろは」からほんの少しステップアップした内容を、書籍『スラスラわかる HTML&CSSのきほん』の著者・狩野 祐東さんが解説します。
今回は「高画質な画像を背景に使用する方法」。目的にあわせたCSSの3つの書き方を紹介します。
高画質な画像をWebサイトの背景に使用するには？
きれいな画像を使えばWebサイトの魅力がアップします。可能な限り高画質な画像を使うのが、Webサイトを引き立てる重要なポイントです。
<img>タグを使って、高画質な画像を表示する方法は、以前の記事でも紹介しました。
▼画像を効率よく表示する方法
今回は、「背景に高画質な画像を使う」にはどのようにすればよいのか、考えたいと思います。
基本的に、ボックスの背景画像を高画質にするには、ピクセル数が多い画像を用意し、ボックスの大きさに合わせて縮小表示する必要があります。このCSSの書き方に、いくつかのバリエーションがありますので、ひとつずつ解説していきます。
<img>画像と背景画像、どう使い分ける？
背景画像に高画質な画像を使う方法
1. background-sizeプロパティのみを使う
2. メディアクエリを組み合わせる
3. image-set() プロパティ関数を使う
さいごに
<img>画像と背景画像、どう使い分ける？
そもそも、Webサイトの画像は、<img>タグを使うか、背景画像にするか——どちらにするか判断に悩むことは少なくありません。
その判断の基準は大きく「表示する画像が、ページのコンテンツとして重要かどうか」で分けられます。
ページに含まれる記事などの主要なコンテンツと関連性が高い画像の場合は、必ず<img>タグで表示し、装飾として使用する場合は背景画像にします。
■<img>タグで表示する画像の利点
<img>タグで表示する画像と背景画像の1番の違いは「alt属性を指定できるかどうか」です。<img>タグで表示するならalt属性を指定できますが、背景画像ではできません。
適切なalt属性をつけることは、アクセシビリティ向上のために有益なだけではなく、検索エンジン対策（SEO）にもなるため、とても重要です。
しかし、背景画像にはalt属性がつけられません。代わりになるような機能もありません。そのため、装飾的な画像でない限りは、原則として<img>タグを使います。
<img src="〜" alt=""> <!— alt属性を空の文字列にする —>
<img src="〜" alt=" "> <!— alt属性を半角スペース（全角でもよい）1文字にする —>
背景画像に高画質な画像を使う方法
<img>ではなく、背景画像として画像を表示することに決めたら、できるだけきれいに見せるために、ピクセル数が多い、高画質な画像を使用します。
具体的には、背景を表示したいボックスのサイズよりも、2倍程度大きい画像を用意するとよいでしょう。たとえば、ボックスが幅600px、高さ400pxで表示されるなら、1200px×800px程度の画像を用意します。
ボックスが伸縮する場合は、表示される最大サイズを基準にして、その2倍の大きさの画像が必要です。
適切なサイズの画像が用意できたら、CSSを書いていきます。大きく分けて3つのバリエーションがあります。
- background-sizeプロパティのみを使う（最も単純なCSS）
- メディアクエリを組み合わせる（少し高度）
- image-set() プロパティ関数を使う（少し高度・比較的新しい機能）
ここから、それぞれを詳しく見ていきましょう。サンプルデータも用意しましたので、ダウンロードして参考にしてください。
▼クリックするとzipファイルがダウンロードされます
サンプルデータのダウンロードはこちらから
1. background-sizeプロパティのみを使う
background-sizeプロパティのみを使って、背景として高解像度な画像を表示する方法です。もっとも基本的なテクニックです。
・CSSコードが単純なこと
・用意する画像が少なくて済むこと
スマートフォンのディスプレイはどれも高解像度なため、スマートフォン向けのWebサイトを作るのであれば、最もシンプルなこの方法で十分
■書き方と例
background-sizeプロパティは、背景画像の表示サイズを決めるプロパティです。ボックスのサイズよりもピクセル数が多い画像を背景に使うときは、値をcoverにします。
背景画像には、ボックスのサイズよりも2倍程度のピクセル数を持つ、大きな画像を1枚用意します。
以下の例では、最大600px×400pxで表示されるボックス<div class="box-600_400 bgsize">に、1280px×853pxの大きいサイズの画像（city-1280.webp）を表示しています。CSSは、セレクタが.bgsizeになっているスタイルで、background-sizeプロパティを使用しています。
ボックスの大きさに合わせて背景画像も伸縮するので、このスタイルだけで、レスポンシブデザインにも対応できます。
▼背景画像を表示するボックスのHTML（サンプル：background-size.html）
<div class="box-600_400 bgsize">
1280x858pxの画像を使用
</div>
▼背景に1280px×853pxの画像を表示するCSS（サンプル：background-size.html）
/* ボックスのサイズを設定するスタイル */
.box-600_400 {
margin: 20px auto;
border: 1px solid black;
padding: 8px;
max-width: 600px;
aspect-ratio: 3 / 2;
color: white;
}
/* 高解像度な（ボックスよりもサイズが大きい）背景画像を表示するスタイル */
.bgsize {
background-image: url(images/city-1280.webp);
background-repeat: no-repeat;
background-size: cover;
}
▲表示例（画像に「2x」と書かれているファイルを使用しています）
2. メディアクエリを組み合わせる
ページを表示するディスプレイの解像度に合わせて、標準的な画像とサイズが大きい画像を出し分ける方法です。メディアクエリを使用して、表示する画像を切り替えます。
・以前からある機能のため、古いブラウザで見たとしても正しく表示されること
・ソースコードが少し長くなること ・画像を2つ用意しないといけないこと
パソコンからも一定数以上見られるWebサイトには検討するとよい
■書き方と例
ディスプレイの解像度に合わせてスタイルを切り替えるとき、メディアクエリの「()」内は次のようにします。
▼ディスプレイの解像度でスタイルを切り替えるメディアクエリ
@media (resolution > 150dpi)
上記のコードは、「ディスプレイのピクセル密度が1インチ（約2.54cm）あたり150ピクセルより大きい」とき、{〜} のスタイルが適用されるように指定している、ということです。
続いて、標準解像度ディスプレイで表示されるパソコンには標準サイズの画像（street-640.webp）を、スマートフォンや4Kモニターなどの高解像度ディスプレイには大きいサイズの画像（street-1280.webp）を表示するようにします。書き方は次の通りです。
▼背景画像を表示するボックスのHTML（サンプル：media-query.html）
<div class="box-600_400 mq"></div>
▼メディアクエリを使ってディスプレイの解像度に合わせて表示する画像を切り替えるCSS（サンプル：media-query.html）
/* ボックスのサイズを設定するスタイル */
.box-600_400 {
省略
}
/* ディスプレイの解像度に合わせて画像を切り替える */
.mq {
/* 解像度が低いディスプレイには標準サイズの画像を表示 */
background-image: url(images/street-640.webp);
background-repeat: no-repeat;
background-size: cover;
/* 1インチあたりのピクセル数が150pxより大きいときは大きなサイズの画像を表示 */
@media (resolution > 150dpi) {
background-image: url(images/street-1280.webp);
}
}
▲表示例。高解像度のディスプレイでは左のように表示される。標準解像度のディスプレイは右のように表示される
3. image-set() プロパティ関数を使う
image-set() は2023年ごろ主要ブラウザで使用可能になった、比較的新しいプロパティ関数です。 プロパティ関数とは、url()など、CSSプロパティの値のうち、「()」がついていて、そのカッコの中になんらかの値を入れるものを指します。
・メディアクエリよりもソースコードがわかりやすいこと
・ブラウザが自動的に判別して、最適な画像を使用するため、ディスプレイの解像度だけでなく、通信速度が遅くなったときにも、データ量の小さい方の画像がダウンロードされる可能性が高いこと
・比較的新しい機能のため、古いブラウザは対応していないことに注意する必要があること
メディアクエリと同様に、パソコンからの閲覧が一定数以上あるWebサイトでは検討するとよい
■書き方と例
background-imageプロパティの値にimage-set()プロパティ関数を使い、表示するディスプレイの解像度に合わせて標準解像度のディスプレイと、高解像度のディスプレイで表示する画像を切り替えます。書き方は次の通りです。
▼image-set()を使ったbackground-imageプロパティの書き方
background-image: image-set(
url(標準解像度のディスプレイ用の画像のパス) 1x,
url(高解像度のディスプレイ用の画像のパス) 2x
);
例を見てみましょう。
標準解像度のディスプレイでは、背景画像として標準サイズの画像（train-640.webp）が、高解像度のディスプレイでは大きいサイズの画像（train-1280.webp）が表示されます。
▼背景画像を表示するボックスのHTML
<div class="box-600_400 imgset"></div>
▼image-set()を使ってディスプレイの解像度に合わせて表示する画像を切り替える（サンプル：image-set.html）
/* ボックスのサイズを決めるCSS */
.box-600_400 {
省略
}
/* 高解像度な（ボックスよりもサイズが大きい）背景画像を表示するCSS */
.imgset {
background-image: image-set(
url(images/train-640.webp) 1x,
url(images/train-1280.webp) 2x
);
background-repeat: no-repeat;
background-size: cover;
}
▲表示例。高解像度のディスプレイでは左のように表示される。標準解像度のディスプレイは右のように表示される
さいごに
今回は、背景画像に高画質のピクセル数が多い画像を使用する方法を3パターンに分けて紹介しました。
背景画像を使うときは、まず、本当に背景画像として表示してよいのかどうかを検討します。装飾としての画像であれば、背景で表示します。
背景で高画質な画像を使用する場合、3つのCSSの書き方から、閲覧されることの多いデバイスのディスプレイの解像度にあわせて、適切な方法を選ぶようにしましょう。
UIデザイナー、エンジニア、書籍著者。アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。著書に『スラスラわかるHTML&CSSのきほん』『これからのJavaScriptの教科書』(SBクリエイティブ)『WordPressデザインレシピ集』 (技術評論社)など多数。https://studio947.net
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿に記載されている情報は2025年12月時点のものです。
