スペーシング、マージン、パディングの編集
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
概要: マージンとパディングは、それぞれ要素の周囲と内部のスペースを制御する上で、Webデザインにおける重要な要素です。これらはコンテンツの整理とWebページの視覚的レイアウトの向上に役立ちます。
Webサイト上のスペースについて、すべてのWebエレメントには以下に示すようなスペース属性があります。
ボーダー
パディングとコンテンツの外側にある境界線です。
パディング
要素/コンテナの内側のスペース。コンテナの端からその内部にある要素までのスペースを作成します（例: セクションの端からその内部にある段落まで）。
コンテンツ
ボックス/コンテナの内側の要素。
マージンとパディングの設定方法に関する視覚的なガイドについては、このビデオチュートリアルをご覧ください。
PageFlyのフレックスエディターでマージンとパディングを編集するには、2つの方法があります。
要素のマージンとパディングを編集するには：
ステップ1：要素を選択し、[スタイリング]タブ > [スペース]セクションに進みます。
ステップ2：パディング/マージンの設定で、各辺の値を変更します。
上、右、下、左の4つの辺それぞれに値を入力できる4つの空のボックスがあります。
例：
中央のフィールドに数値を入力すると、上、右、下、左のすべての辺に同じ数値が適用されます。
ステップ1：要素を選択します
ステップ2：マージン/パディング領域にカーソルを合わせます
ステップ3：領域を拡張・縮小して、各要素のスペースを調整します。
オレンジ色の領域はマージンの編集に使用され、緑色の領域はパディングに使用されます。[スタイリング]タブのマージンとパディングの値は、それに応じて変更されます。
PageFlyのベーシックエディターを使用している場合は、以下のスペース編集方法をご確認ください。
要素のマージンとパディングを編集するには：
ステップ1：要素を選択し、[スタイリング]タブ > **[スペース]**セクションに進みます。
ステップ2：パディング設定の各辺の値を変更します。
上、右、下、左の4つの辺それぞれに値を入力できる4つの空のボックスがあります。
例：
中央のフィールドに数値を入力すると、上、右、下、左のすべての辺に同じ数値が適用されます。
`
ステップ1：要素を選択します
ステップ2：エディターキャンバス上のドットをドラッグして、各要素のスペースを調整します。
オレンジ色のドットはマージンの編集に使用され、緑色のドットはパディングに使用されます。[スタイリング]タブのマージンとパディングの値は、それに応じて変更されます。
注：モバイル表示モードでのスペースの変更は、モバイル表示にのみ反映され、全デバイスモードや他の表示モードの設定には影響しません。
コンテナの内側にスペースを作成するには、そのパディングを調整する必要があります。例えば、「Mother’s Day」の見出しを少し下に押し下げるために、その見出し要素に上部パディングを追加します。
ステップ1：編集したい要素を選択し、[スタイリング]タブ > [スペース]セクションに進みます。 ステップ2：上部パディング（例：50ピクセル）を追加して、コンテナの内側のスペースを増やします。
上部パディングは、コンテナの上端とその子要素の間のスペースを増やし、それらの子要素を下に押し下げます。
モバイルデザインのスペースを最適化するには：
ステップ1：トップバー > [デバイススイッチャー] > [モバイル]を選択して、モバイル表示に切り替えます。
ステップ2：要素を選択し、[スタイリング]タブ > [スペース]セクションに進み、パディングを調整します。
「全デバイス」モードで設定されたパディング（例：50px）は、全デバイス表示の設定から自動的に継承されます。モバイルデバイスで適切に表示されるように調整してください。
隣接する2つの要素のスペースを作成するには、要素の辺のマージンを編集します。
例えば、「Mother’s Day」の見出しから段落要素をさらに離すために、見出しの下部マージンに値を追加します。
ステップ1：見出し要素を選択し、**[スタイリング]**タブ > **[スペース]**セクションに進みます。
ステップ2：下部マージン（例：50px）を追加して、選択した要素とその下の要素の間のスペースを増やします。
下部マージンは下により多くのスペースを作成し、段落要素を見出しからさらに遠ざけます。
モバイルデザインのスペースを最適化するには、
ステップ1：トップバー > [デバイススイッチャー] > **[モバイル]**を選択して、モバイル表示に切り替えます。
ステップ2：見出し要素を選択し、[スタイリング]タブ > [スペース]セクションに進み、値を調整します。下部マージンにはすでに50pxの灰色の数値が表示されていますが、これは全デバイス表示の設定から自動的に継承されたものです。
要素の左側または右側にスペースを作成するには、その要素の左右マージンを調整する必要があります。デフォルトの「px」（ピクセル）単位または「%」単位を使用して、さまざまな画面サイズに対応したよりレスポンシブなデザインを実現できます。
例えば、「カートに追加」ボタンを「商品数量」からさらに遠ざけるには、「商品数量」要素の右マージンを増やします。
ステップ1：「商品数量」要素を選択し、[スタイリング]タブ > [スペース]セクションに進みます。
ステップ2：右マージンボックスに16pxを追加します。
右マージンは側により多くのスペースを作成し、「カートに追加」ボタンを「商品数量」からさらに遠ざけます。
モバイルデザインのスペースを最適化するには：
ステップ1：トップバー > [デバイススイッチャー] > [モバイル]を選択して、モバイル表示に切り替えます。
ステップ2：「商品数量」要素を選択し、[スタイリング]タブ > [スペース]セクションに進み、値を調整します。右マージンには、全デバイス表示の設定から継承された16pxの灰色の数値が表示されていることに気づくでしょう。最適なモバイルレイアウトのために、必要に応じてこの値を調整してください。
PageFlyのベーシックエディターを使用している場合、行要素の[列スペース]の値を変更することで、行内の列間のスペースを調整できます。
例えば、行内の列間により多くのスペースを作成するには、[列スペース]の値を増やします。
ステップ1：行要素を選択し、**[一般]**タブ > **[コンテンツ]**セクションに進みます。
ステップ2：[列スペース]の値を調整して、列間のスペースを増やします。
[列スペース]の値は、同じ行内の列間の距離を増やし、それらをさらに離します。
モバイルデザインの列スペースを最適化するには：
ステップ1：トップバー > [デバイススイッチャー] > [モバイル]を選択して、モバイル表示に切り替えます。
ステップ2：行要素を選択し、[一般]タブ > [コンテンツ]セクション > [列スペース]に進み、値を調整します。モバイルデバイスでの列間の適切なスペースを確保するために、必要に応じてこの値を調整してください。
1. マージンとパディングの違いは何ですか？
マージンは要素の外側のスペース、つまりその要素と他の要素の間のスペースを指します。パディングは要素の内側のスペース、つまりそのコンテンツと境界線の間のスペースを指します。
2. マージンとパディングの値にはどのような単位を使用できますか？
PageFlyでは、マージンとパディングの値にピクセル（px）、em（em）、パーセント（%）を使用できます。
3. マージンではなく、コンテナの内側にパディングを追加するのはなぜですか？
コンテナの内側にパディングを追加すると、その子要素が内側に押し込まれます。一方、マージンを追加すると、外部の要素がコンテナから離れて押し出されます。
