SwiftUI Text の色とスタイル

Text の見た目は様々なモディファイアでカスタマイズできます。色、太さ、スタイルなど、用途に応じて自由に組み合わせられます。

テキストの色

.foregroundStyle() で色を指定します。iOS 15 以前の .foregroundColor() も使えますが、新しいコードでは foregroundStyle が推奨されています。

Text("赤いテキスト")
    .foregroundStyle(.red)

Text("セカンダリカラー")
    .foregroundStyle(.secondary)

グラデーションも適用できます。

Text("グラデーション")
    .foregroundStyle(
        LinearGradient(
            colors: [.blue, .purple],
            startPoint: .leading,
            endPoint: .trailing
        )
    )

太字・斜体

.bold() と .italic() でスタイルを変更します。

Text("太字").bold()
Text("斜体").italic()
Text("太字で斜体").bold().italic()

フォントウェイト

.fontWeight() で細かくウェイトを指定できます。

VStack(alignment: .leading) {
    Text("Ultra Light").fontWeight(.ultraLight)
    Text("Thin").fontWeight(.thin)
    Text("Light").fontWeight(.light)
    Text("Regular").fontWeight(.regular)
    Text("Medium").fontWeight(.medium)
    Text("Semibold").fontWeight(.semibold)
    Text("Bold").fontWeight(.bold)
    Text("Heavy").fontWeight(.heavy)
    Text("Black").fontWeight(.black)
}

下線・取り消し線

.underline() と .strikethrough() で装飾を追加します。

Text("下線付き")
    .underline()

Text("色付き下線")
    .underline(color: .blue)

Text("取り消し線")
    .strikethrough()

Text("赤い取り消し線")
    .strikethrough(color: .red)

カーニングと行間

文字間隔は .kerning() または .tracking()、行間は .lineSpacing() で調整します。

Text("文字間隔を広げる")
    .tracking(5)

Text("複数行の\nテキストで\n行間を広げる")
    .lineSpacing(10)

これらのモディファイアは組み合わせて使えるので、デザインに合わせて自由にスタイリングできます。