SwiftUI Academy · レッスン

ビューの周囲に Padding を追加する

padding を使って余白を作ります。

「ビューの周囲に Padding を追加する」はCoddyKit上の無料SwiftUI Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Why Views Feel Cramped

By default a SwiftUI view sits flush against its neighbors and the screen edge. Padding is the breathing room you add so content never feels squeezed.

Meet the padding Modifier

The padding modifier adds space on the outside of a view. Attach it like any other modifier and SwiftUI grows the view's footprint to make room.

Text("Hello")
    .padding()

The Default Amount

Calling padding() with no value uses a system default that adapts to the platform, usually around 16 points. It is a safe, consistent starting point.

Setting an Exact Amount

Pass a number to control the gap precisely. Here padding(40) adds 40 points of space on every side of the text.

Text("Spaced")
    .padding(40)

Padding One Edge

You can target a single edge instead of all four. This adds 30 points only on top, leaving the other sides untouched.

Text("Top gap")
    .padding(.top, 30)

Horizontal and Vertical

The .horizontal and .vertical edge sets are handy shortcuts. This pads the left and right sides at once with one clean call.

Text("Sides")
    .padding(.horizontal, 24)

Combining Edge Sets

Stack two padding calls to mix amounts per direction. Here the view gets wide horizontal margins and a smaller vertical gap.

Text("Mixed")
    .padding(.horizontal, 32)
    .padding(.vertical, 8)

Order Matters

Modifiers apply outward in order, so where you place padding changes the result. Padding before a background pushes the color outward with the content.

Text("Hi")
    .padding()
    .background(.yellow)

Padding Then Background

Swap the order and the difference is clear: a background applied first, then padding, leaves the color tight to the text with empty space around it.

Text("Hi")
    .background(.yellow)
    .padding()

Padding on Containers

Padding works on stacks and any view, not just text. Wrap a VStack and pad it to push the whole group inward from the screen edges.

VStack {
    Text("Line one")
    Text("Line two")
}
.padding()

Padding vs Margins

SwiftUI has no separate margin concept. Padding is your single tool for spacing, and chaining it gives you full control over every edge.

Quick Check

Test your grip on the padding modifier.

Recap

Nice work! You learned that padding adds breathing room outside a view, with defaults, exact amounts, specific edges, and an order that shapes backgrounds.

よくある質問

「ビューの周囲に Padding を追加する」レッスンは無料ですか？

はい。「ビューの周囲に Padding を追加する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。

「ビューの周囲に Padding を追加する」で何を学びますか？

padding を使って余白を作ります。ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

SwiftUI Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「ビューの周囲に Padding を追加する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwiftUI Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← SwiftUI Academyに戻る