コース: Adobe XD 基本講座

今すぐコースを受講しましょう

今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。

スクロールグループを使用する

スクロールグループを使用する - Adobe XDのチュートリアル

コース: Adobe XD 基本講座

スクロールグループを使用する

このレッスンでは、 スクロールグループについて説明します。 教材として exercise ファイルの フォルダにある 09 フォルダの中の 09_04.xd を使います。 スクロールグループを使用すると、 アートボード内に 他の部分から独立してスクロールする 領域を制御することができます。 スクロール可能にしたいオブジェクトを 選択します。 今回はリピートグリッドを用意しています。 リピートグリッドの要素を選択して プロパティインスペクターの 「変形」の中にある 「水平方向のスクロール」を クリックします。 左右に青いハンドルが表示されて、 スクロール領域の大きさを 調整することができます。 今回は左のハンドルをドラッグして アートボードの左端に伸ばしておきます。 プレビューするには、画面右上の 「デスクトッププレビュー」のアイコンを クリックします。 スクロールグループを設定したところが 水平方向に このようにドラッグして スクロールすることが できるようになりました。 プレビューはxボタンを閉じておきます。 次のアートボードに行きます。 次のアートボードでは アートボードの右に テキストエリアを用意していますので、 こちらをアートボードの上に 乗せまして、 テキストエリアを選択している状態で 「中央揃え(水平方向)」をクリックして アートボードの中央に整列しておきます。 このテキストエリアを 今回は垂直方向にスクロールしたいので、 プロパティインスペクターの 「垂直方向のスクロール」を クリックします。 先ほどと同じように 上下に青いハンドルが表示されますので、 上のハンドルを少し上にドラッグして、 白い長方形の上の辺に合わせておきます。 下のハンドルもドラッグして 白い長方形の下の辺に合わせておきます。 02 のアートボードを選択している状態で 「デスクトッププレビュー」を クリックします。 このように水平方向に スクロールすることが できるようになりました。 プレビューはxボタンを押して 閉じておきます。 3枚めアートボードでは、 アートボードの右に 地図の画像を用意していますので、 この地図の画像をアートボードの上に 配置します。 この地図の画像を選択し プロパティインスペクターの 「水平方向と垂直方向のスクロール」を クリックします。…

目次