【Swift】.backgroundとは？使い方や活用シーン、注意点までわかりやすく解説

2025年9月28日 2025年9月28日

SwiftUIでビューの見た目を整える時に欠かせないのが .background です。

テキストやボタンの背後に色や画像を配置したり、別のビューを重ねて背景として見せたりできるモディファイアで、デザインの自由度をぐっと高めてくれます。

この記事では .background の基本的な意味や使い方、活用シーンまでわかりやすく解説します。

.background とは？

.background は SwiftUI に用意されているビュー修飾モディファイアで、「対象のビューの背景に別のビューを配置する」ために使います。

例えば、テキストの背景を赤色にしたい場合、次のように書きます。

Text("Hello, SwiftUI!")
    .background(Color.red)

Text("Hello, SwiftUI!")

.background(Color.red)

これで「Hello, SwiftUI!」の背後に赤色の四角形（矩形）が配置されます。

UIKit では UIView.backgroundColor プロパティを設定して背景色を変えていましたが、SwiftUI の .background は「単なる色だけでなく、任意のビューを背景にできる」のが大きな特徴です。

具体例：テキストの周りに背景色をつける

今度はテキストだけでなく、その余白にも背景色をつける具体例を見ていきましょう。

Text("背景色付きテキスト")
    .padding()
    .background(Color.yellow)

Text("背景色付きテキスト")

.padding()

.background(Color.yellow)

このコードを実行すると、文字の背後に黄色い長方形が表示されます。

.background を使う場合、デフォルトではテキストそのもののサイズ（文字の高さや幅）しか背景に反映されません（最初の例参考）

そのため、上のコードでは .padding() を使ってテキストの周囲に余白を作り、背景色が広がるようにしています。

こうするとよくアプリで見かける感じになりますよね？

つまり「背景を広げたい場合はパディングを併用する」というのが.background を使う場合の基本のテクニックです。

具体例：角丸や装飾をつけた背景

次に、角丸や装飾をつけた具体例をみていきましょう。

Text("装飾された背景")
    .padding()
    .background(
        RoundedRectangle(cornerRadius: 12)
            .fill(Color.blue)
    )
    .foregroundColor(.white)

Text("装飾された背景")

.padding()

.background(

RoundedRectangle(cornerRadius: 12)

.fill(Color.blue)

)

.foregroundColor(.white)

このコードではRoundedRectangleを使い、青色の角丸四角形を背景に敷いており、その上に白い文字が表示されています。

よくボタン風のデザインを作るときに使われる書き方です。

具体例：グラデーションを背景に

背景をグラデーションにすることもできます。

Text("グラデーション背景")
    .padding()
    .background(
        LinearGradient(
            colors: [.pink, .purple],
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
    )
    .foregroundColor(.white)

Text("グラデーション背景")

.padding()

.background(

LinearGradient(

colors: [.pink, .purple],

startPoint: .topLeading,

endPoint: .bottomTrailing

)

.foregroundColor(.white)

これにより、文字の背後にピンクから紫へと変化するグラデーションが表示されます。

いくつ加齢を見てきましたが、アプリの雰囲気に合わせて自由に背景を演出できるのが .background の魅力です。

主要な使い方

.background は、ビューの背後に「色・図形・グラデーション・画像」などを配置できる便利なモディファイアです。

主要な使い方を表にまとめてみました。

使い方	説明
`.background(Color.red)`	単純に色を背景にする
`.background(RoundedRectangle(cornerRadius: 10).fill(Color.blue))`	図形を背景にする（角丸の長方形など）
`.background(LinearGradient(...))`	グラデーションを背景にする
`.background(Image("xxx"))`	画像を背景にする

背景の大きさは「対象ビューのサイズ」に依存するため、必要に応じて .padding() や .frame() を組み合わせて調整するのが基本です。

.background の活用シーン

.backgroundはちょっとしたテキストをボタン風に見せたり、カードのように演出したいときによく使われます。

ラベルやテキストに色付きの背景をつける
ボタン風のデザインを作る（角丸や装飾背景を追加）
グラデーションや画像を敷いて視覚的にリッチなUIを演出
複数のビューを重ねてカード風のデザインを作る

特に「シンプルなテキストを見やすく装飾したい」ときに役立つモディファイアです。

.background を使うときの注意点

.background を使うときは、見た目だけでなく挙動にも気をつける必要があります。

背景サイズや描画の順序によって、思った通りに表示されないことがあるためです。

背景の大きさはビューのサイズで決まる
→ 文字に直接 .background をつけると、文字のまわりだけしか色がつきません。広い背景にしたいときは .padding() で余白を足しましょう。
背景は必ず前景（テキストや図形）の後ろに描かれる
→ もし前景を半透明にして背景を見せたいなら .opacity() を組み合わせて調整します。
背景を複雑にしすぎると動作が重くなることがある
→ グラデーションや画像をいくつも重ねると処理が大変になるので、できるだけシンプルにしましょう。
柔軟に重ねたいときは .overlay を使う
→ .background は「後ろ専用」ですが、.overlay を使うと前に配置できるので、デザインの幅が広がります。