コース: Adobe XD 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
パディング機能を使用する
このレッスンでは、 パディング機能について説明します。 教材として exercise ファイルの フォルダにある 09 フォルダの中の 09_02.xd を使います。 XD では、グループまたは コンポーネントに対して 固定パディング値を 設定することができます。 パディング値を設定すると、 コンテンツ内容に応じて 自動的に背景の大きさが変わります。 ここに角丸長方形と、「ボタン」という テキストを用意しています。 まずは、コンポーネント化しましょう。 ライブラリパネルを表示して 「ドキュメントアセット」という タイトルになっていることを確認します。 角丸長方形のテキストを囲むように 両方を選択し、 ライブラリパネルの「コンポーネント」の ＋のボタンを押します。 コンポーネントの名前は button としておきます。 この button のコンポーネントを選択して プロパティインスペクターの 「パディング」というところの項目の チェックボックスをオンにして パディングを有効にします。 切り替えボタンがありますが、 まずは左を押しましょう。 すべての方向に同じパディングを 設定できる項目です。 数字を 20 と変更し return キーを押します。 上方向、右方向、下方向、左方向、 すべてに 20 ピクセル分の パディングが設定されています。 続いて、右のボタンに切り替えて、 10、20、10、20 と変更します。 上に 10 ピクセル、 右に 20ピクセル、 下に 10 ピクセル、 左に 20 ピクセル、 パディングが設定されました。 レイヤーパネルに切り替えて レイヤーの構成を確認すると、 「ボタン」という文字、 「ボタンベース」という 角丸長方形がありますが、 この一番下のレイヤーが 自動的に背景として 認識されている状態です。 このメインコンポーネントを 複製しましょう。 Mac は option+shift キー、 Windows は Alt+Shift キーを押しながら ドラッグして複製を作ります。 もうひとつ複製を作っておきます。 この２つはインスタンスの状態です。 「ボタン」という文字をダブルクリックし もう一度ダブルクリックして、 「会社概要」というテキストに 置き替えました。 パディング値が固定されて 自動的にボタンの幅が変更されています。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。