Wix Studio Two エディタ：要素のサイズを設定する | ヘルプセンター

この記事では、2026年11月にリリースされた新しい Wix Studio Two エディタについて説明します。Wix Studio エディタまたは Wix Studio Two エディタのどちらを使用しているか不明な場合は、こちらで詳細を確認してください。

Wix Studio Two エディタでは、各要素のサイズを正確に指定して、あらゆる画面サイズに対応させることができます。サイズは、キャンバス上または要素設定パネルで正確に設定することが可能です。

サイズを変更すると、ピクセルを表す「px*」という単位が表示されます。これは、要素のレスポンシブ動作に基づいてブレイクポイントごとに調整されます。デフォルトの動作がデザインに合わない場合は、その動作を変更したり、詳細設定を有効にして幅と高さを直接調整したりすることができます。

要素のサイズを変更する

デザイン方法に応じて要素のサイズを変更する方法を選択します：

キャンバス上：ページ上で要素をクリックして選択し、要素が希望のサイズになるまでハンドルをドラッグします。ドラッグしている際は、要素の正確なサイズをピクセル単位で確認することができます。
要素設定パネル：要素をクリックし、要素設定パネルを開き、要素の正確な幅と高さを確認（および変更）します。

要素設定パネルの「サイズ」セクションには、Wix Studio Two エディタ固有の相対的な測定単位である px* が表示されます。

「px」の横にあるアスタリスク（*）は、そのサイズが現在作業中のブレイクポイントに対して相対的であることを意味しています。たとえば、デスクトップからモバイルのブレイクポイントに切り替えると、px* で指定された要素の幅や高さもそれに応じて小さくなります。

参考：

「px*」はピクセル単位の値を表していますが、内部での実際の単位はレスポンシブとなっています。パネルで「px*」にマウスオーバーすると、その計算や、使用されているレスポンシブなサイズ単位（例：パーセンテージ、アスペクト比など）を確認することが可能です。

要素設定パネルで「W（幅）」横の「px*」にマウスオーバーすると、ポップアップで実際の単位が「%」であることが表示されています

ブレイクポイントに応じて要素のサイズがどのように変化するかを指定する、レスポンシブ動作を設定します。各要素にはデフォルトの動作が設定されていますが、デザインに合わせて最適なものに変更することができます。

レスポンシブ動作にはどのような種類がありますか？

参考：

ドロップダウン内のオプションにマウスオーバーすると、アニメーションでその表示を確認できます。

「px」、「%」、「vh」など要素の単位を直接制御したい場合は、「詳細設定」にアクセスします。これにより、「px*」やレスポンシブ動作のみに頼るのではなく、自身で細かく指定することができます。

参考：

「詳細設定」を有効にすると、すべてのブレイクポイントで、選択した特定の要素に適用されます。詳細設定モードは、簡単にアクセスできるようその要素に対して有効になっていますが、いつでも無効にすることができます。

幅、高さ、最小値と最大値を使い、必要に応じてサイズを編集します。
ヒント：要素設定パネルで単位をクリックして、別の単位（例：px から %）に切り替えることができます。クリックすると利用可能な測定単位のリストが開きます。