アートボードをスクロール可能にし、隠れてしまったコンテンツを表示する方法について説明します。

必要な情報

このサンプルファイルは、このチュートリアルの学習内容の練習に使用できるAdobe Stock素材です。このチュートリアル以外でサンプルファイルを使用する場合には、Adobe Stockのライセンスを購入してください。このサンプルファイルの使用に適用される利用条件については、フォルダー内のReadMeファイルを参照してください。

学習した内容:アートボードのサイズを変更してコンテンツを垂直にスクロール可能にする方法

XDでデザインを作成している際に、アートボードの高さがコンテンツより小さい場合があります。アートボードの高さをコンテンツに合わせることで、自動的に、様々なデバイスサイズに合わせて垂直にスクロールできるようになります。

アートボードのサイズ変更

コンテンツが収まるようにアートボードの高さを大きくするには、アートボードを選択します。

  • 選択ツールで、アートボード名をクリックするか、アートボードをドラッグして選択します。
  • レイヤーパネルでアートボード名をクリックし、ドキュメントウィンドウで選択することもできます。

選択したアートボードの高さを大きくするには、アートボードの下端を下にドラッグします。アートボードの元の高さが破線で表示されます。

スクロールのプレビュー

アートボードのスクロールをプレビューするには、デスクトッププレビューオプションを使用して、XDで直接プレビューできます。

  • スクロールするアートボードを選択した状態、またはアートボード上のコンテンツを選択した状態で、アプリの右上隅のデスクトッププレビューボタンをクリックします。選択したアートボードが表示されたウィンドウが開きます。ウィンドウのサイズは、選択したアートボードのサイズによって決まります。表示されているアートボードの領域は、ビューポートと呼ばれます。
  • ウィンドウ内でクリック&ドラッグし、アートボードを縦にスクロールします。
  • デスクトッププレビューウィンドウを閉じます。

スクロール機能をオフにする

  • プロパティインスペクターの「スクロール」セクションから「なし」を選択すると、アートボードのスクロールを無効にできます。デバイスのビューポートより大きいアートボードのスクロールが無効にされると、アートボード領域がビューポートに合わせて拡大されます。

ヒント:アートボードのスクロールを有効にすると、ビューポートの縦のサイズを調整することもできます。アートボード上の破線の先端をドラッグして、その位置を変更します。

このページは役に立ちましたか。