目次

フレームのサイズに合わせて可変する枠線のある枠を作成する

目次

ベアラー
質問: カード型フレームの作成
カード型のフレームを作成しようと思っています。フレームに角丸の矩形を配置して、 この矩形がフレームのサイズに合わせて伸縮すればよいと考えています。どのように設定すればよいでしょうか?
フレームのサイズに合わせて可変する枠線のある枠を作成する:画像1

方針

カード型のフレームを作成する際に、長方形を配置して実現しようとしていますが、この方法ではうまくいかないです。
フレーム自体を角丸にして枠線を追加する方法で比較的容易に実現できます。

操作手順

フレームを作成します。
フレームのサイズに合わせて可変する枠線のある枠を作成する:画像2

右側の[外見]のカテゴリの[角の半径]の部分の数値を増やし、フレームを角丸にします。
フレームのサイズに合わせて可変する枠線のある枠を作成する:画像3


[塗り]のカラーを設定し、[線]の項目の[+]ボタンをクリックして枠線を追加します。
フレームのサイズに合わせて可変する枠線のある枠を作成する:画像4


フレームのサイズを変更します。フレームのサイズに応じて枠線もリサイズされます。
フレームのサイズに合わせて可変する枠線のある枠を作成する:画像5 フレームのサイズに合わせて可変する枠線のある枠を作成する:画像6

内部にコンテンツ(画像、テキスト)を配置します。
フレームのサイズに合わせて可変する枠線のある枠を作成する:画像7

フレームを選択してオートレイアウトを追加します。操作手順についてはこちらの記事を参照してください。
フレームのサイズに合わせて可変する枠線のある枠を作成する:画像8

内部のテキストボックスが大きくなったり、オートレイアウトのマージンが広がり全体のサイズが大きくなると、フレームのサイズも自動で大きくなり、枠線も追従します。
フレームのサイズに合わせて可変する枠線のある枠を作成する:画像9


フレームのサイズに合わせて可変する枠線のある枠を作成できました。

AuthorPortraitAlt
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2025-12-25