SwiftUIのbackgroundとoverlayの使い方を簡単に解説してみました！

SwiftUIでビューの見た目をカスタマイズする際に便利なのが、backgroundとoverlayです。

そもそもbackgroundとoverlayとは？

修飾子名	意味
background	背景に色や画像・図形を「後ろに」表示する
overlay	上にテキストや枠線などを「前に」重ねる

backgroundの基本的な使い方

Text("Hello!")
    .padding()
    .background(.yellow)

解説：
テキストの背景に黄色が付きます。

padding()でスペースを確保し、その外側にbackgroundが付きます。

overlayの基本的な使い方

Text("Hello, SwiftUI!")
    .padding()
    .overlay(
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.blue, lineWidth: 2)
    )

• テキストの上に青い枠線が付きます。
• overlayには任意のViewを載せることが可能です（今回は枠線用のRoundedRectangleを使用）
  

backgroundとoverlayの組み合わせを組み合わせると

Text("SwiftUI")
    .font(.title)
    .padding()
    .background(.black)
    .overlay(
        RoundedRectangle(cornerRadius: 12)
            .stroke(Color.orange, lineWidth: 3)
    )
    .foregroundColor(.white)

この例では：

• 背景は黒（background）
• 外枠はオレンジの線（overlay）
  

まとめ

修飾子	主な用途	使い方例
background	背景色・画像・形を後ろに配置	.background(Color.red)
overlay	枠線・テキスト・ラベルを前に重ねる	.overlay(RoundedRectangle(...))

終わりに

backgroundとoverlayを活用することで、SwiftUIの見た目を自由にデザインできます。
ぜひ参考にしてみてください！👏