PCとスマートフォンで異なる背景画像を使用するには

2025/3/28 WEBデザインのヒント, 未分類

PCとスマートフォンで異なる画像を使用するには、CSSのメディアクエリ やHTMLの要素を使用します。
以下では、それぞれの方法を説明し、PCとスマートフォンで異なる背景画像を設定する例を示します。

1. CSSのメディアクエリを使用する方法

(1) HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PCとスマホで画像を切り替える</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- コンテンツ -->
  <div class="content">
    <h1>ウェブサイトのタイトル</h1>
    <p>PCとスマートフォンで異なる画像が表示されます。</p>
    <div style="height: 150vh;">スクロールエリア</div>
  </div>
</body>
</html>

(2) CSS (styles.css)

/* 全体のリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ボディのスタイル */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-size: cover; /* 背景画像を拡大 */
  background-position: center; /* 中央寄せ */
  background-repeat: no-repeat; /* 繰り返しを無効化 */
}
/* PC用の背景画像 */
body {
  background-image: url("desktop-background.jpg"); /* PC用の画像 */
}
/* スマートフォン用の背景画像 */
@media (max-width: 768px) {
  body {
    background-image: url("mobile-background.jpg"); /* スマホ用の画像 */
  }
}
/* コンテンツのスタイル */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明の背景 */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

2. 要素を使用する方法

要素は、デバイスや画面サイズに応じて異なる画像を動的に選択できるHTMLの機能です。

(1) HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PCとスマホで画像を切り替える</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <!-- 背景画像の切り替え -->
  <picture>
    <!-- スマートフォン用の画像 -->
    <source srcset="mobile-background.jpg" media="(max-width: 768px)">
    <!-- PC用の画像 -->
    <img src="desktop-background.jpg" alt="背景画像" class="background-image">
  </picture>
<!-- コンテンツ -->
  <div class="content">
    <h1>ウェブサイトのタイトル</h1>
    <p>PCとスマートフォンで異なる画像が表示されます。</p>
    <div style="height: 150vh;">スクロールエリア</div>
  </div>
</body>
</html>

(2) CSS (styles.css)

/* 全体のリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 背景画像のスタイル */
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をカバー表示 */
  z-index: -1; /* 背景として配置 */
}
/* コンテンツのスタイル */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明の背景 */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

3. 動作の説明

(1) CSSのメディアクエリによる切り替え

@media (max-width: 768px):
画面幅が768px以下の場合は、background-image をスマートフォン用の画像（mobile-background.jpg）に切り替えます。
それ以外の場合は、PC用の画像（desktop-background.jpg）を表示します。

(2) 要素による切り替え

タグを使用して、条件に応じた画像を指定します。
media=”(max-width: 768px)” の条件を満たす場合、スマートフォン用の画像（mobile-background.jpg）が使用されます。
条件を満たさない場合、タグで指定されたPC用の画像（desktop-background.jpg）が使用されます。

(3) 固定背景の実現

CSSの position: fixed を使用することで、画像を固定背景として表示します。
object-fit: cover を適用して、画像が画面全体をカバーするように調整します。

4. 注意点

画像の解像度 :
PC用の画像は高解像度、スマートフォン用の画像は軽量化したものを使用すると、パフォーマンスが向上します。
レスポンシブデザイン :
スマートフォンでは縦長の画像が適している場合が多く、PCでは横長の画像が適しています。用途に応じて画像のアスペクト比を調整してください。
代替テキスト :
タグや要素を使用する場合、必ずalt属性を指定して、画像が表示されない場合でも意味が伝わるようにしてください。

5. 実行結果

このコードを実行すると、次のような特徴を持つサイトが作成されます：

デスクトップ :
PC用の画像（desktop-background.jpg）が背景として表示されます。
スマートフォン :
スマートフォン用の画像（mobile-background.jpg）が背景として表示されます。
これで、PCとスマートフォンで異なる画像を使用するウェブサイトを作成できます！