フォント、太さ、色
font、fontWeight、foregroundStyle を使ってテキストをスタイル設定します。
「フォント、太さ、色」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Styling Starts Here
A plain Text view shows words, but real apps style them. In this lesson you will set font, weight, and color to make text feel intentional. 🎨
The font Modifier
The font modifier picks a text style. Apple ships semantic sizes like title, headline, and body that adapt to the user automatically.
Text("Welcome")
.font(.title)Semantic Font Styles
Prefer semantic styles over fixed point sizes. Names like .largeTitle and .caption scale with the device and the user accessibility settings.
Text("Big").font(.largeTitle)
Text("Small").font(.caption)Custom Point Sizes
Need an exact size? Pass .system(size:) with a number. It is handy for logos, but semantic styles are better for body text.
Text("Logo")
.font(.system(size: 40))Adding Weight
The fontWeight modifier sets how thick the strokes look. Try .bold for emphasis or .light for a softer, airier feel.
Text("Strong")
.fontWeight(.bold)Weight Inside font
You can also bake the weight right into the font call. This keeps related styling in one tidy place.
Text("Heavy")
.font(.title.weight(.heavy))Coloring Text
Use foregroundStyle to color text. Pass a Color like .red or a brand color, and the words pick up that tint instantly.
Text("Alert")
.foregroundStyle(.red)Semantic Colors
Reach for semantic colors like .primary and .secondary. They adapt to light and dark mode so your text stays readable everywhere.
Text("Hint")
.foregroundStyle(.secondary)Italic and Bold Shortcuts
SwiftUI offers quick toggles: .bold() and .italic(). They read cleanly and skip the longer modifier names.
Text("Note")
.bold()
.italic()Chaining Modifiers
Modifiers stack top to bottom. Combine font, weight, and color on one Text to shape its full look in a single chain.
Text("Title")
.font(.title)
.bold()
.foregroundStyle(.blue)Order Can Matter
Most text modifiers commute, but order matters once layout enters. Keep styling first, then add padding or background later.
Quick Check
Which modifier sets the text color?
Lesson Recap
You styled text with font, fontWeight, and foregroundStyle. Lean on semantic styles and colors so your UI adapts beautifully. ✨
よくある質問
「フォント、太さ、色」レッスンは無料ですか？
はい。「フォント、太さ、色」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。
「フォント、太さ、色」で何を学びますか？
font、fontWeight、foregroundStyle を使ってテキストをスタイル設定します。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
SwiftUI Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「フォント、太さ、色」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwiftUI Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。