---
title: "グラデーション背景が表示されない・縞模様になるときの対処"
description: "背景グラデーションが表示されないか、滑らかなはずが縞模様（バンディング）に見えると困っている制作者向け。構文ミスと色の段差という二つの原因を症状別に切り分けて解決できます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/gradient-banding-or-invisible"
markdown: "https://giga-site.com/articles/gradient-banding-or-invisible/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# グラデーション背景が表示されない・縞模様になるときの対処

背景にグラデーションを当てたのに無地のまま、あるいは滑らかなはずが縞模様（バンディング）に見える。前者は構文や指定の誤り、後者は色の段差や表示の限界が原因です。本記事ではlinear-gradientのつまずきを表示されないケースと縞になるケースに分け、原因別の対処を整理します。

> Source HTML: https://giga-site.com/articles/gradient-banding-or-invisible
> Article index: https://giga-site.com/articles/index.md

## そもそも表示されないときの構文確認

linear-gradientはbackgroundまたはbackground-imageに指定する画像であり、background-colorには使えません。background-colorに書いていると無効になり、無地のままになります。

色を2つ以上指定しているか、カンマや単位の書き方が正しいかも確認しましょう。linear-gradient(to right, #fff, #000)のように方向と複数の色を正しく並べる必要があります。

## 要素のサイズと重なりで見えないことも

グラデーションは効いていても、要素に高さがなければ面積が生まれず見えません。背景を付けた要素のheightやmin-heightを確認してください。インライン要素や中身が空の要素で起きがちです。

前面に別の背景や要素が重なって隠している可能性もあります。z-indexや重なり順、上に乗っている不透明な背景の有無を見直すと原因が分かることがあります。

## 症状別チェック表

グラデーション背景が表示されない・縞模様になるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## 縞模様（バンディング）が出る理由と緩和

バンディングは、隣り合う色の差を画面の色数で滑らかに表現しきれず、境界が縞に見える現象です。特に近い色どうしの広い面積のグラデーションや、暗い色の領域で目立ちます。CSSの誤りではなく表示上の限界に近い現象です。

緩和策としては、中間色のカラーストップを増やして色変化をなだらかにする、グラデーションの方向や範囲を調整する、わずかなノイズを重ねるといった手法があります。完全には消せない場合もあると理解しておくと判断が楽です。

## 原因を切り分ける手順

表示されない場合とバンディングは原因が別なので、まず症状を見極めてから進めます。

1. linear-gradientをbackgroundまたはbackground-imageに書いているか確認する
2. 色を2つ以上、正しい構文で指定しているか確認する
3. 要素にheightやmin-heightがあり面積があるか確認する
4. 上に重なる背景や要素で隠れていないか確認する
5. 縞が出るならカラーストップを増やすなど段差を緩和する

## 見え方はディスプレイ差を含めて確認する

バンディングはディスプレイの性能や明るさ設定によって見え方が変わります。自分の画面では目立たなくても、別環境では縞がはっきり出ることがあります。複数の環境で実際の表示を見比べて許容範囲を判断するのが確実です。

ギガサイト便なら、検証用ページをドロップして発行した〇〇.giga-site.comのURLを各自の端末で開き、ディスプレイ差を含めた見え方を集められます。CDNのエッジ配信で表示が速く、同じURLのままカラーストップを差し替えながら詰められます。社外に見せたくない検証は認証を併用しましょう。

## よくある質問

### グラデーションが無地のままになります

linear-gradientはbackgroundまたはbackground-imageに指定します。background-colorに書いていると無効です。指定先を確認してください。

### バンディングはCSSのミスですか

ミスではなく、近い色の差を画面が滑らかに表現しきれず縞に見える表示上の現象です。カラーストップを増やすなどで緩和できますが完全には消せない場合もあります。

### グラデーションを当てた要素が表示されません

要素に高さがないと面積が生まれず見えません。heightやmin-heightを指定し、上に重なる不透明な背景や要素がないかも確認してください。

### 自分の画面では縞が見えないのに指摘されました

バンディングはディスプレイの性能や明るさで見え方が変わります。複数の環境で実際の表示を見比べ、許容範囲をすり合わせるのが確実です。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [プレースホルダーの文字が切れる・見えないときの対処](https://giga-site.com/articles/placeholder-text-cut-or-invisible/index.md)
- [影（box-shadow）や角丸が効かないときの原因と対処](https://giga-site.com/articles/shadow-or-border-radius-not-applied/index.md)
- [2カラムが縦並びにならない・重なるときのレスポンシブ対処](https://giga-site.com/articles/two-column-stacks-or-overlaps/index.md)
- [グラデーションとは？CSSで色を滑らかに変化させる基礎](https://giga-site.com/articles/css-gradient-term/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "グラデーション背景が表示されない・縞模様になるときの対処",
  "description": "背景グラデーションが表示されないか、滑らかなはずが縞模様（バンディング）に見えると困っている制作者向け。構文ミスと色の段差という二つの原因を症状別に切り分けて解決できます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/gradient-banding-or-invisible",
  "url": "https://giga-site.com/articles/gradient-banding-or-invisible",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "グラデーションが無地のままになります",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "linear-gradientはbackgroundまたはbackground-imageに指定します。background-colorに書いていると無効です。指定先を確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "バンディングはCSSのミスですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ミスではなく、近い色の差を画面が滑らかに表現しきれず縞に見える表示上の現象です。カラーストップを増やすなどで緩和できますが完全には消せない場合もあります。"
      }
    },
    {
      "@type": "Question",
      "name": "グラデーションを当てた要素が表示されません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "要素に高さがないと面積が生まれず見えません。heightやmin-heightを指定し、上に重なる不透明な背景や要素がないかも確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "自分の画面では縞が見えないのに指摘されました",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "バンディングはディスプレイの性能や明るさで見え方が変わります。複数の環境で実際の表示を見比べ、許容範囲をすり合わせるのが確実です。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```