ページ上の他のコンテンツの幅がより明確になったので、セクション見出しの要素も更新しましょう。
- セクション見出しレイヤーを選択します。
- テキストリサイズを高さの自動調整に変更し、幅を
1000に設定します。
進む前に、ケーススタディ探究フレームを内部で整理しましょう。
フレーム内のすべての要素を揃える
- ケーススタディ探究フレームを選択し、Enterを押して内部のすべての子レイヤーを選択します。
- すべてを中心に配置するには、水平方向の中央揃えをクリックします。
- 位置セクションでその他のアクションメニューを開き、垂直方向に等間隔に分布を選択します。
これは、垂直軸上で要素を均等に分配し、スマートセレクションを使用して要素を素早く再配置できるようにします。
スマートセレクションを使用してレイヤーを再配置する
オブジェクトの選択が水平および垂直軸で均等に配置されている場合、スマートセレクションにアクセスできます。
スマートセレクションを使用すると、選択したレイヤー間のスペースを迅速に再配置および調整できます。
スマートセレクションが使用可能かどうかは、選択した要素の上にマウスを移動すると、ピンクの円とピンクのハンドルが表示されます。スマートセレクションについてもっと学びましょう。
ヒント: スマートセレクションは、デザインプロセスの初期段階で異なるレイアウトを試すのに役立つ優れたツールです。ケーススタディページの要素を使用してスマートセレクションを試してみてください。ただし、スペースとレイアウトの完璧さにこだわらないでください。オートレイアウトについて学ぶ次のレッスンで、これらの要素を再訪します。
レッスンのまとめ
よくできました!私たちは、ケーススタディのために必要な要素を構築しました。その際、フレームプリセットについて学び、テキスト、画像、フレームを使用して要素を構築しました。既存のレイヤーをフレームに追加する新しい方法も学び、制約を使うことで、子レイヤーが親フレームの変更にどのように反応するかを制御できることも確認しました。最後に、レイヤーを整理し、スマートセレクションを使用してレイヤーの再配置と間隔の調整に役立てました。
次のレッスンでは、オートレイアウトを使用してレスポンシブボタン要素を構築し、それをコンポーネントに変えてデザイン全体で再利用できるようにする方法を学びます。そこでお会いしましょう!