このレッスンでは、マルチカラムグリッドを設定して、その上にいくつかの少し凝った Web サイトのレイアウトを作成する手順を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
サイドメニューの背景を作成
長方形のドロップシャドウのチェックをオンにして、Y に 0、B に 4 を指定します。長方形を単体でコンポーネント化し、コンポーネント名は「side_wrap」にします。また、「スクロール時に位置を固定」をオンにします。
続けて、作成したコンポーネントに覆い被さるように長方形を配置します。線のチェックをオフにして、塗りの色を border に変更します。
検索アイテムのグループを作成
search_item コンポーネントをコピーして、インスタンスを長方形の上に作成します。これを単独でグループ化し、スタック機能をオンにして、並び方を垂直方向に設定します
グループをダブルクリックして中のコンポーネントを選択し、10 回複製します。間隔には 0 を指定します。
グループに覆い被さるように長方形を描き、線のチェックをオフにします。グループの下に重なり順を変更してから、この 2 つのオブジェクトをグループ化し、パディングをオンにします。上下のパディングには 16 を設定します。
サイドメニューを作成
site_title と search_title のインスタンスをそれぞれサイドメニュー内にコピーし、先ほど作成したグループと合わせてグループ化します。作成したグループのスタックをオンにして、間隔に 1 を指定します。
さらに、背景のグレーの長方形と合わせてコンポーネント化します。パディングをンにして、全てのフィールドを 0 にします。コンポーネント名は search_list とします。
search_list を編集して、search_title と search_item コピー & ペーストし、垂直方向に長いメニューにします。
スクロール機能の設定
search_list を選択した状態で、プロパディインスペクタのアイコンをクリックして「垂直方向のスクロール」を設定します。これで、サイドメニューだけスクロールすることが可能になります。
次に、「スクロール時に位置を固定」をオンにします。これで、メインエリアをスクロールしてもサイドメニューの位置が追従しないようになります。プレビューすると、サイドメニューが独自にスクロールできることを確認できます。
最後に、search_list と side_warp を age_post アートボードに複製します。