Wix Studio エディタ：要素のサイズを設定する
読了時間：9分
サイトをデザインする際、どの画面サイズでも綺麗に見えるようにしたいものです。Wix Studio エディタでは、サイズを px* で設定すると、レスポンシブ動作が残りの処理を行います。
すべての要素にはデフォルトの動作（例：比例してスケーリング）が設定されており、異なる画面でのサイズ変更方法を制御します。デフォルトの動作は、ニーズに合ったものにいつでも変更できます。
px* はフルードサイズ単位で、ページの編集サイズとの相対値です。
この記事では、Wix Studio エディタにおけるサイズ変更の仕組みについて説明します：
ヒント：
要素のサイズとレスポンシブ動作はブレイクポイントごとに設定できます。
要素のサイズを変更する
キャンバス上の要素を選択し、サイドハンドルをドラッグしてサイズを調整します。この操作で現在のブレイクポイントでの要素の表示方法を設定します。
要素設定パネルでは、要素の正確な幅と高さをピクセルで確認できます。必要に応じて、独自の幅 / 高さの値を入力することもできます。
要素設定パネルに計算してもらう：
サイズの値を入力する際は、足し算（ + ）、引き算（ - ）、掛け算（ * ）、割り算（ / ）を使用できます。たとえば、現在の幅の横に *3 を追加して、要素の幅を 3倍にします。
メディア要素のサイズを変更する
画像や動画などのメディア要素のサイズを変更する際、アスペクト比を固定して、幅と高さが常に比例するようにすることができます。
このオプションが含まれるメディア要素
つまり、幅を変更すると、要素の元の形状を維持するように高さが自動的に調整（またはその逆も同様）されます。
アスペクト比を固定する方法：
- 該当するメディア要素を選択します。
- 右上にある「要素設定パネルを開く」矢印
をクリックします。
- 「サイズ」下で「アスペクト比をロック」アイコン
をクリックします。
- 次のいずれかの方法で要素のサイズを変更します：
- 要素設定パネルに幅 / 高さの値を入力します（他の値は自動的に調整されます）。
- キャンバス上の要素の周りのハンドルをドラッグします。
注意：
このオプションは、高度なサイズ変更モードでは使用できません。
px* でサイズを設定する
px* は Wix Studio エディタのフルード測定単位です。実際の測定単位がレスポンシブでありながら、使い慣れた測定単位（ピクセル）でサイズを編集できます。
つまり、キャンバス上でのサイズを表すピクセル単位でデザインすると、それら要素はレスポンシブに動きます。特定の値とサイズの単位は、選択したレスポンシブ動作によって異なります。「px*」にマウスオーバーすると、計算方法と使用されているレスポンシブサイズの単位が表示されます。
以下の例では、現在のキャンバスでのコンテナの幅は 1000 px* です。実際の単位はパーセントであるため、幅はすべての画面（79.1％）を基準にしています。
px* と px はどう違いますか？
どちらもピクセル単位で編集できます。ただし：
- px* は、表示されているサイズが現在作業中のブレイクポイントでのサイズであることを意味します。
- px は、どのブレイクポイントでもサイズが固定されていることを意味します。
要素のレスポンシブ動作を選択する
ページに要素を追加すると、レスポンシブ動作がすでに組み込まれた状態になっています。つまり、異なる画面で要素がどのように表示されるかを心配する必要はありません。レスポンシブ動作により、サイズが変更されます。
ただし、デザインにより適したレスポンシブ動作に変更したい場合は、レスポンシブ動作を切り替えることができます。
利用可能な動作はそれぞれどう違いますか？
注意：
選択したレスポンシブ動作は、使用しているサイズ単位に影響します。たとえば、「固定」レスポンシブ動作を選択すると、計量単位が px* から px に変更されます。
異なるレスポンシブ動作を選択する方法：
- 該当するブレイクポイントを選択します。
- 要素を選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「レスポンシブ動作」ドロップダウンからオプションを選択します。
高度なサイズ測定単位を使用する
高度なサイズ変更を使用すると、ブレイクポイントごとに要素のサイズをより細かくカスタマイズできます。px* を操作してレスポンシブ動作を選択する代わりに、このモードではバックグラウンドで使用している計量単位（例： px、%、vh）が表示され、必要に応じて調整できます。
利用可能な測定単位
高度なサイズ変更を有効にすると、すべてのブレイクポイントで、選択した特定の要素に適用されます。高度なサイズ変更モードは、簡単にアクセスできるようその要素に対して有効になっていますが、いつでも無効にすることができます。
高度なサイズ設定にアクセスして編集する方法：
- エディタで該当するブレイクポイントを選択します。
- 要素を選択します。
- 右上にある「要素設定パネルを開く」矢印 をクリックします。
- 「サイズ」横の「その他のアクション」アイコン
をクリックします。 - 「高度なサイズ変更」トグルを有効にします。
- 幅、高さ、最小値と最大値を使い、必要に応じてサイズを編集します。
ヒント：要素設定パネルで単位をクリックして、別の単位（例：px から %）に切り替えることができます。クリックすると利用可能な測定単位のリストが開きます。
セクションの高さを設定する：
要素が意図したとおりに表示されない可能性があるため、高さをピクセル単位で設定することはおすすめしません。たとえば、オーバーフローしたり、クロップされて表示される場合があります。
サイズ設定を設定する
デザインしているサイトのサイズ設定を選択します。高度な CSS 測定単位を使用したい場合は、エディタ全体で高度なサイズ変更を有効にすることができます。または、要素ごとにサイズ変更モードを選択したい場合は、そのままにすることもできます。
サイトのサイズ設定を設定する方法：
- 左上の「Wix Studio」アイコン
をクリックします。 - 「表示」にマウスオーバーします。
- 「サイズの設定」にマウスオーバーします。
- 設定を選択します：
- 常に高度なサイズ変更を表示：要素設定パネルのサイズ変更は常に高度なサイズ変更に設定されています。
注意：このモードでは、特定の要素を高度なサイズ変更から元に戻すオプションが無効になります。 - 要素ごとに設定：要素ごとにサイズ設定を行います。
- 常に高度なサイズ変更を表示：要素設定パネルのサイズ変更は常に高度なサイズ変更に設定されています。
よくある質問
サイズ設定の詳細については、以下の質問をクリックしてください。
セクションを比例してスケーリングするように設定しましたが、要素はスケーリングされません。これはなぜでしょうか？
高度なサイズ変更はどのような場合に使用するべきですか？
お役に立ちましたか？
|