.png)
Wix Studio 利用中の方必見｜Wix Studio で良く耳にする「マージン」と「パディング」とは！？
- 2024年3月22日
- 読了時間: 3分
こんにちは、ラジャのけんいちです！
2023年8月に「Wix Studio」が発表されました。
今回は、Wix StudioでWebサイトの余白を操る「マージン」と「パディング」の使い方について徹底解説します！
Wixエディターから変わっていないものについては解説を省略していますので、基本的な操作は「日本Wix研究所」のYouTubeをご参照ください。
Wix Studioエディター「マージン/パディング」
スタックの解説のときにも出ていた「マージン/パディング」について解説しましょう。
「マージン」とは要素の外側に余白をつけること、「パディング」とは内側に余白をつけることです。
Wix Studioエディター「マージン」
最初に、「マージン」とはどういうものか実際に画面で解説します。
まずはわかりやすくコンテナを用意します。
上に青い点々と、左にも青い点々があります。
これはボックスの位置がセクションに対して上からマージンが効いている状態、左からマージンが効いている状態です。
右パネルの下をスクロールすると、上へのマージン18.6%が今指定されていて、左へのマージンが今17.3%に指定されていることがわかります。
Wix Studioエディター 「パディング」
続いて「パディング」について解説します。
実際どういうときに使うのかというと、たとえばコンテナ内にテキストを追加するときなどに使います。
テキストを追加すると、テキストも現在ボックスに対してマージンが指定されているのがわかります。
テキストのマージンを使用してもいいのですが、もしテキストが2つの場合はマージンを設定するのが複雑になってしまうので、コンテナに対してパディングを指定します。
プラスボタンのもう一つ外側に「パディング」という指定があるので、たとえば左右40ピクセルを指定します。
このままだとコンテナのパディングとテキストのマージンが効いている状態なので、テキストを選択した状態で右パネルの上部にある「左揃え、上揃え」を選択してマージンを0にします。
ここまではマージンとパディングを「ピクセル」で指定していましたが、他にも「%」と「vh」、「vw」が設定できます。
「%」は親要素の幅に対する比率で計算されます。
親要素の幅とは、たとえば今回はコンテナが1000ピクセルの場合、40%だと400ピクセルという計算になります。
「vh」と「vw」はそれぞれ「Viewport Height」「Viewport Width」の頭文字です。
「Viewport」とはブラウザーの表示領域のことを指します。
マージンやパディングで使用することはほとんどありませんが、コンテナやセクションの幅や高さを変更したいときに使用します。
たとえば、現在のウィンドウが1280ピクセルのとき、100vwは1280ピクセルです。
50vwだと、その半分の640ピクセルになります。
ウィンドウの幅が800ピクセルのときは100vwは800ピクセル、半分の50vwは40ピクセルという計算になります。
以上、「マージン」と「パディング」について解説しました。