SwiftUI Academy · レッスン

frame でビューのサイズを設定する

幅、高さ、最小・最大の制約を設定します。

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

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

Views Size Themselves

By default a SwiftUI view is exactly as big as its content needs. When you want a specific size, you reach for the frame modifier to ask for one.

A Fixed Width and Height

The frame modifier lets you request an exact size. Here the text is placed inside a box that is 200 points wide and 80 points tall.

Text("Card")
    .frame(width: 200, height: 80)

Width Only

You do not have to set both dimensions. Give only a width and the height stays natural, sized to fit the content as usual.

Text("Wide")
    .frame(width: 250)

Filling Available Space

Set maxWidth to infinity to let a view stretch across all the space its parent offers. This is great for full-width buttons and rows.

Text("Stretch")
    .frame(maxWidth: .infinity)

Aligning Inside the Frame

A roomy frame centers its content by default. The alignment argument moves that content, like pinning text to the leading edge.

Text("Left")
    .frame(maxWidth: .infinity, alignment: .leading)

Minimum Sizes

Use minWidth or minHeight to guarantee a view never shrinks below a floor, even when content is tiny. Handy for consistent tap targets.

Text("OK")
    .frame(minWidth: 120)

Maximum Sizes

The maxWidth and maxHeight values cap how large a flexible view can grow, so it stretches only up to a limit you choose.

Text("Capped")
    .frame(maxWidth: 400)

Combining Min and Max

Mix minWidth and maxWidth for a flexible range. The view grows with its parent but stays between a comfortable lower and upper bound.

Text("Flexible")
    .frame(minWidth: 100, maxWidth: 300)

Frame and Background Together

A frame defines the area a background fills. Set a frame, then add a color, and the whole sized region is painted, not just the text.

Text("Tile")
    .frame(width: 120, height: 120)
    .background(.mint)

Frame Wraps, It Does Not Clip

A frame proposes a size but never trims content by itself. If content is larger than the frame, it can spill out unless you also clip it.

Frame Plus Padding

Combine the two tools for polished layouts: a frame sets the overall size and padding adds the inner breathing room around the content.

Text("Spaced")
    .padding()
    .frame(maxWidth: .infinity)

Quick Check

Check your understanding of the frame modifier.

Recap

Great progress! You can now use frame to set exact sizes, flexible ranges, fill space with infinity, and align content inside the area.

よくある質問

「frame でビューのサイズを設定する」レッスンは無料ですか？

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

「frame でビューのサイズを設定する」で何を学びますか？

幅、高さ、最小・最大の制約を設定します。ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「frame でビューのサイズを設定する」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← SwiftUI Academyに戻る