ボタンのスタイル設定
組み込みのボタン スタイルとカスタム デザインを適用します。
「ボタンのスタイル設定」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Default Looks Are Fine
SwiftUI gives every button a sensible default style for the platform. But you can reshape its look in seconds with a single modifier. 🎨
The buttonStyle Modifier
Apply a built-in look with the buttonStyle modifier. It changes the whole appearance without you touching the label or action.
Button("Save") { save() }
.buttonStyle(.bordered)Bordered for Soft Buttons
The .bordered style draws a soft, tinted capsule around your label. It is great for secondary actions that should look calm.
Button("Cancel") { dismiss() }
.buttonStyle(.bordered)Prominent for the Main Action
Use .borderedProminent to make the primary action pop with a filled background. Reserve it for the one button that matters most.
Button("Continue") { next() }
.buttonStyle(.borderedProminent)Tinting a Button
Set the accent color of a styled button with the tint modifier. It changes the fill or border to match your brand.
Button("Delete") { remove() }
.buttonStyle(.borderedProminent)
.tint(.red)Controlling Size
The controlSize modifier scales a button between mini, small, regular, and large, so it fits the importance of the action.
Button("Go") { go() }
.buttonStyle(.bordered)
.controlSize(.large)Rounding the Corners
Want a different shape? Pair a style with buttonBorderShape to switch between capsule, rounded rectangle, and more.
Button("Join") { join() }
.buttonStyle(.bordered)
.buttonBorderShape(.capsule)Styling the Label Yourself
For full control, style the label view directly with padding, background, and color, just like any other SwiftUI view.
Button("Buy") { buy() }
.padding()
.background(.blue)
.foregroundStyle(.white)Order of Modifiers
Modifier order matters. Padding before background gives roomy color; background before padding leaves an outer margin instead.
Plain and Borderless
For a text-only look with no chrome, reach for the .plain style. It strips decoration so only your label shows.
Button("Skip") { skip() }
.buttonStyle(.plain)Keep It Consistent
Pick a few styles and reuse them across your app. Consistency helps people instantly know what is tappable and what is primary.
Quick Check
Time to test your styling instincts.
Recap
Great job! Use buttonStyle for built-in looks, tint and controlSize to refine them, or style the label directly for full control. 🎨
よくある質問
「ボタンのスタイル設定」レッスンは無料ですか？
はい。「ボタンのスタイル設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。
「ボタンのスタイル設定」で何を学びますか？
組み込みのボタン スタイルとカスタム デザインを適用します。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
SwiftUI Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「ボタンのスタイル設定」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwiftUI Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。