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

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

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

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

変形コントロール

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

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

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

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

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