# スペーシング、マージン、パディングの編集

### マージンとパディングについて

**概要**: マージンとパディングは、それぞれ要素の周囲と内部のスペースを制御する上で、Webデザインにおける重要な要素です。これらはコンテンツの整理とWebページの視覚的レイアウトの向上に役立ちます。

Webサイト上のスペースについて、すべてのWebエレメントには以下に示すようなスペース属性があります。

![](/files/OCHeDQShhVudvriOAnpf)

| マージン  | 要素を囲むスペース。同じレベルの要素間（例: 段落からボタンまで）のスペースを作成します。                            |
| ----- | ------------------------------------------------------------------------ |
| ボーダー  | パディングとコンテンツの外側にある境界線です。                                                  |
| パディング | 要素/コンテナの内側のスペース。コンテナの端からその内部にある要素までのスペースを作成します（例: セクションの端からその内部にある段落まで）。 |
| コンテンツ | ボックス/コンテナの内側の要素。                                                         |

マージンとパディングの設定方法に関する視覚的なガイドについては、このビデオチュートリアルをご覧ください。

{% embed url="<https://www.youtube.com/watch?v=xsU3viwDbXs>" %}

### マージンとパディングの設定方法

#### Gen 2エディター

PageFlyのフレックスエディターでマージンとパディングを編集するには、2つの方法があります。

#### \[スタイリング]タブの\[スペース]を使用する

要素のマージンとパディングを編集するには：

* ステップ1：要素を選択し、\[スタイリング]タブ > \[スペース]セクションに進みます。
* ステップ2：パディング/マージンの設定で、各辺の値を変更します。

上、右、下、左の4つの辺それぞれに値を入力できる4つの空のボックスがあります。

例：

![](/files/IWw2LHXO2jV84wEtrCRc)

中央のフィールドに数値を入力すると、上、右、下、左のすべての辺に同じ数値が適用されます。

![](/files/jUCOPDVwoWLMCg436eLt)

#### ページキャンバス上でマージンとパディング領域を調整する

* **ステップ1**：要素を選択します
* **ステップ2**：マージン/パディング領域にカーソルを合わせます
* **ステップ3**：領域を拡張・縮小して、各要素のスペースを調整します。

オレンジ色の領域はマージンの編集に使用され、緑色の領域はパディングに使用されます。\[スタイリング]タブのマージンとパディングの値は、それに応じて変更されます。

![](/files/KLdcvsdjTXFRMrfwSsqx)

#### レガシーエディター

PageFlyのベーシックエディターを使用している場合は、以下のスペース編集方法をご確認ください。

#### \[スタイリング]タブの\[スペース]を使用する

要素のマージンとパディングを編集するには：

* ステップ1：要素を選択し、**\[スタイリング]タブ** > \*\*\[スペース]\*\*セクションに進みます。
* ステップ2：パディング設定の各辺の値を変更します。

上、右、下、左の4つの辺それぞれに値を入力できる4つの空のボックスがあります。

例：

![](/files/Xsyf9QUWdnwlv99T3Are)

中央のフィールドに数値を入力すると、上、右、下、左のすべての辺に同じ数値が適用されます。

![](/files/zrKDg0yFV5dWpJWXHiT7)

#### マージンとパディングのドットを使用する

{% hint style="info" %}
\`**注**: マージンとパディングのドットは、セクション、行、列、ブロック要素を含むコンテナ要素でのみ利用可能です。
{% endhint %}

\`

* ステップ1：要素を選択します
* ステップ2：エディターキャンバス上のドットをドラッグして、各要素のスペースを調整します。

オレンジ色のドットはマージンの編集に使用され、緑色のドットはパディングに使用されます。\[スタイリング]タブのマージンとパディングの値は、それに応じて変更されます。

![](/files/hHKUNrgcU6y73a508jU4)

### 一般的な使用例

注：モバイル表示モードでのスペースの変更は、モバイル表示にのみ反映され、全デバイスモードや他の表示モードの設定には影響しません。

#### ケース1：コンテナの内側にスペースを作成する

#### 全デバイスモード

コンテナの内側にスペースを作成するには、そのパディングを調整する必要があります。例えば、「Mother’s Day」の見出しを少し下に押し下げるために、その見出し要素に上部パディングを追加します。

**ステップ1**：編集したい要素を選択し、\[スタイリング]タブ > \[スペース]セクションに進みます。 **ステップ2**：上部パディング（例：50ピクセル）を追加して、コンテナの内側のスペースを増やします。

![](/files/WRsRQkCqocVNTTnOUYMk)

上部パディングは、コンテナの上端とその子要素の間のスペースを増やし、それらの子要素を下に押し下げます。

#### モバイルモード

モバイルデザインのスペースを最適化するには：

* **ステップ1**：トップバー > \[デバイススイッチャー] > \[モバイル]を選択して、モバイル表示に切り替えます。
* **ステップ2**：要素を選択し、\[スタイリング]タブ > \[スペース]セクションに進み、パディングを調整します。

「全デバイス」モードで設定されたパディング（例：50px）は、全デバイス表示の設定から自動的に継承されます。モバイルデバイスで適切に表示されるように調整してください。

![](/files/F35qO3IRgWmL40cvXsMo)

#### ケース2：要素の下にスペースを作成する

#### 全デバイスモード

隣接する2つの要素のスペースを作成するには、要素の辺のマージンを編集します。

例えば、「**Mother’s Day**」の見出しから段落要素をさらに離すために、見出しの下部マージンに値を追加します。

* ステップ1：**見出し**要素を選択し、\*\*\[スタイリング]\*\*タブ > \*\*\[スペース]\*\*セクションに進みます。
* ステップ2：下部マージン（例：50px）を追加して、選択した要素とその下の要素の間のスペースを増やします。

![](/files/Jodqn3QRQ72sxDcZPxb1)

下部マージンは下により多くのスペースを作成し、段落要素を見出しからさらに遠ざけます。

#### モバイルモード

モバイルデザインのスペースを最適化するには、

* ステップ1：トップバー > **\[デバイススイッチャー]** > \*\*\[モバイル]\*\*を選択して、モバイル表示に切り替えます。
* ステップ2：見出し要素を選択し、\[スタイリング]タブ > \[スペース]セクションに進み、値を調整します。下部マージンにはすでに50pxの灰色の数値が表示されていますが、これは全デバイス表示の設定から自動的に継承されたものです。

![](/files/SYB9fOnOdkJq12v7gLLs)

#### ケース3：要素の左右にスペースを作成する

#### 全デバイスモード

要素の左側または右側にスペースを作成するには、その要素の左右マージンを調整する必要があります。デフォルトの「**px**」（ピクセル）単位または「**%**」単位を使用して、さまざまな画面サイズに対応したよりレスポンシブなデザインを実現できます。

例えば、「**カートに追加**」ボタンを「**商品数量**」からさらに遠ざけるには、「商品数量」要素の右マージンを増やします。

* ステップ1：「**商品数量**」要素を選択し、\[スタイリング]タブ > \[スペース]セクションに進みます。
* ステップ2：右マージンボックスに16pxを追加します。

![](/files/AP43KJPEv3hueXsXBZci)

右マージンは側により多くのスペースを作成し、「**カートに追加**」ボタンを「**商品数量**」からさらに遠ざけます。

#### モバイルモード

モバイルデザインのスペースを最適化するには：

* ステップ1：トップバー > \[デバイススイッチャー] > \[モバイル]を選択して、モバイル表示に切り替えます。
* ステップ2：「**商品数量**」要素を選択し、\[スタイリング]タブ > \[スペース]セクションに進み、値を調整します。右マージンには、全デバイス表示の設定から継承された16pxの灰色の数値が表示されていることに気づくでしょう。最適なモバイルレイアウトのために、必要に応じてこの値を調整してください。

![](/files/yrBdqNIfsTDPvA3JmGlM)

#### ケース4：同じ行内の列間のスペースを編集する

#### 全デバイスモード

PageFlyのベーシックエディターを使用している場合、行要素の\[列スペース]の値を変更することで、行内の列間のスペースを調整できます。

例えば、行内の列間により多くのスペースを作成するには、\[列スペース]の値を増やします。

* ステップ1：**行**要素を選択し、\*\*\[一般]\*\*タブ > \*\*\[コンテンツ]\*\*セクションに進みます。
* ステップ2：\[列スペース]の値を調整して、列間のスペースを増やします。

\[列スペース]の値は、同じ行内の列間の距離を増やし、それらをさらに離します。

![](/files/aoXmjZyAunBN0R5nMrRo)

#### モバイルモード

モバイルデザインの列スペースを最適化するには：

* ステップ1：トップバー > \[デバイススイッチャー] > \[モバイル]を選択して、モバイル表示に切り替えます。
* ステップ2：行要素を選択し、\[一般]タブ > \[コンテンツ]セクション > \[列スペース]に進み、値を調整します。モバイルデバイスでの列間の適切なスペースを確保するために、必要に応じてこの値を調整してください。

![](/files/4FjVjiz9AyJ5Mia38kGO)

### よくある質問

**1. マージンとパディングの違いは何ですか？**

マージンは要素の外側のスペース、つまりその要素と他の要素の間のスペースを指します。パディングは要素の内側のスペース、つまりそのコンテンツと境界線の間のスペースを指します。

**2. マージンとパディングの値にはどのような単位を使用できますか？**

PageFlyでは、マージンとパディングの値にピクセル（px）、em（em）、パーセント（%）を使用できます。

**3. マージンではなく、コンテナの内側にパディングを追加するのはなぜですか？**

コンテナの内側にパディングを追加すると、その子要素が内側に押し込まれます。一方、マージンを追加すると、外部の要素がコンテナから離れて押し出されます。

### 関連リソース

* [How to Use Element Inspector in PageFly Page Editor](https://help.pagefly.io/manual/page-editor-element-inspector/)
* [Element Toolbar Main Functions | PageFly Page Editor](https://help.pagefly.io/manual/page-editor-element-toolbar/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/main-use-case/edit-spacing-margin-and-padding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.