テキストのサイズに応じてサイズが追従するフレームを作成する

ペンとろ
質問: テキストボックスのサイズに合わせて伸縮するフレーム
フレーム内のテキストのサイズに合わせてサイズが変化するフレームを作成したいです。どのように操作すればよいですか?

内部のテキストのサイズに合わせて伸縮するフレーム

内部のテキストのサイズに合わせてサイズが変化するフレームを作成する場合にはオートレイアウトの機能を利用します。


下図のフレーム内にテキストが配置されている状態です。テキストがフレームからはみ出している状態です。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像1

フレームをクリックして選択します。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像2

右クリックします。ポップアップメニューが表示されますので、メニューの[オートレイアウトを追加]の項目をクリックします。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像3

または右側のパネルの[オートレイアウトを切り替える]のボタンをクリックします。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像4 テキストのサイズに応じてサイズが追従するフレームを作成する:画像5

オートレイアウトが追加されるとテキストボックスのサイズに合わせてフレームのサイズが変化します。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像6

テキストボックスのテキストを修正すると、テキストボックスの大きさに合わせてフレームのサイズが変化します。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像7
テキストのサイズに応じてサイズが追従するフレームを作成する:画像8 テキストのサイズに応じてサイズが追従するフレームを作成する:画像9

複数のテキストが配置されている場合

フレーム内に複数のテキストが配置されている場合の動作を確認します。 下図はフレーム内に4つのテキストが配置されています。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像10

フレームをクリックしてフレームを選択し、先に紹介した手順でオートレイアウトを追加します。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像11

オートレイアウトが追加されました。テキストのサイズに合わせてフレームがリサイズされました。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像12

内部のテキストはオートレイアウト設定になっており、共通のマージンが設定された状態になります。 マージン部分をドラッグしてみます。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像13

マージンが広がり、全体の高さも広く無なります。同時にサイズに合わせてフレームのサイズも変化します。
テキストのサイズに応じてサイズが追従するフレームを作成する:画像14

また、テキストを編集して行が増えたり、減ったりした場合も全体の高さに合わせて、フレームのサイズが変化します。

テキストのサイズに応じてサイズが追従するフレームを作成する:画像15

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