modifierで飾る ― font・color・padding

導入

ただの文字を、大きく・色付き・余白ありに。SwiftUIでは部品のうしろに .○○(...) を並べる modifier（修飾子） で見た目を整えます。

説明

modifierは「部品に化粧をする」もの。. でつないでいくつでも重ねられます。

struct ContentView: View {
    var body: some View {
        Text("スタイリッシュな文字")
            .font(.largeTitle)
            .fontWeight(.bold)
            .foregroundColor(.blue)
            .padding()
    }
}

• .font(.largeTitle) … 文字の大きさ（.title .headline .body .caption など）。
• .fontWeight(.bold) … 太さ。.bold() でも書けます。
• .foregroundColor(.blue) … 文字色（.red .green .orange など）。
• .padding() … まわりに余白を足す。

modifierを重ねる 順番 も意味を持ちます。上から順に「文字を作って→大きくして→太くして→色をつけて→余白を足す」と読めます。

やってみよう

色を .red や .green に変えたり、.font(.title) にサイズを変えたり、.padding() を消してみたりして、プレビューの変化を確かめましょう。

演習

文字色を .orange、フォントを .title にして表示してみましょう。