要素を移動およびサイズ変更する方法

HTML5 を使用して要素の位置とサイズを変更するには、2 つの方法があります。1 つ目は、要素の上座標と左座標を使用して位置を指定し、要素の幅と高さを使用してサイズを指定する方法です。2 つ目は、CSS transform プロパティを使用して、要素の平行移動とスケーリングを行う方法です。

Google Web Designer では、この 2 つの方法を使用しています。要素のレイアウトでは、上と左の値を使用して要素の位置を設定し、幅と高さの値を使用してサイズを設定します。CSS transform プロパティは、より高いフレームレートでスムーズなアニメーションを実現できるため、CSS ベースのアニメーションの作成時には、この方法がデフォルトとなります。

変形ツールは、デフォルト設定でレイアウトとアニメーションのどちらに対しても正しく動作します。要素のスケーリング方法や位置設定方法は、必要に応じて変更できます。

制限事項

モーションパスは、上位置 / 左位置に基づく位置設定には対応していません。
AMPHTML 広告内のアニメーションは、上位置 / 左位置に基づく位置設定、幅 / 高さに基づくサイズ設定には対応していません。

位置設定スタイルを変更する

位置設定スタイルを変更するには:

ツールバーで、選択ツールアイコンをクリックします。
位置設定スタイルオプションボタンをクリックします。

ポップアップメニューから以下の位置スタイルを選択します。

位置スタイル	説明
デフォルトの位置を使用	レイアウトには上と左の位置情報が使用され、アニメーションの位置設定時には `transform:translate3d()` が使用されます。
上 / 左の位置を使用	キーフレーム内での要素の位置設定には上と左の値が使用されます。
3D 変換を使用	キーフレーム内での要素の位置設定には `transform:translate3d()` の値が使用されます。

サイズスタイルを変更する

サイズ設定スタイルを変更するには:

ツールバーで、選択ツールアイコンをクリックします。
サイズ設定スタイルオプションボタンをクリックします。

ポップアップメニューから以下のサイズスタイルを選択します。

サイズスタイル	説明
デフォルトのサイズを使用	レイアウトでは幅と高さのサイズ設定を使用し、アニメーションのサイズ設定時には `transform:scale3d()` を使用します。
幅と高さを使用	キーフレーム内での要素のサイズ設定時には幅と高さの値が使用されます。
3D スケーリングを使用	キーフレーム内での要素のスケーリング時には、`transform:scale3d()` の値が使用されます。

変形コントロール

ツールオプションバーの [変形コントロール] チェックボックスがオンになっている場合は、選択ツールを使って、選択した要素のサイズや回転を変更することができます。

選択範囲を回転するには:

ツールバーで、選択ツールをクリックします。
ツールオプションバーで [変形コントロール] チェックボックスがオンになっていることを確認します。
1 つまたは複数のオブジェクトを選択します。選択範囲の中ほどに回転コントロール（ネストされた 2 つのリング）が表示されます。
必要に応じて、回転コントロールの内側のリングをドラッグして、回転の中心を変更します。
回転コントロールの外側のリングをドラッグして、選択範囲を回転します。
- Shift キーを押しながらドラッグすると、回転が 45 度単位に制限されます。

選択範囲をサイズ変更するには:

ツールバーで、選択ツールをクリックします。
ツールオプションバーで [変形コントロール] チェックボックスがオンになっていることを確認します。
1 つまたは複数のオブジェクトを選択します。選択した要素の周囲に青色のボックスが表示されます。
境界ボックスの辺または角にあるコントロールポイントのいずれかをドラッグします。
- Shift キーを押しながらドラッグすると、選択範囲の元のアスペクト比を維持することができます。

SVG のサイズを変更する

SVG 画像またはシェイプのサイズを変更して大きくする場合は、3D スケーリングではなく、幅と高さのプロパティを使用します。選択ツールの [変形コントロール] を使用する場合、サイズスタイルの変更が必要になることがあります。

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。