# ページ上の要素を整列させる

### 概要

このガイドでは、PageFlyページ上で要素を整列させ、視覚的にバランスの取れた整理されたレイアウトを実現する方法をご紹介します。[PageFlyページで要素を整列させる方法](https://help.pagefly.io/manual/align-elements-on-a-page/)を学びましょう。

これにより、PageFlyで作成したもののプロフェッショナリズムとユーザーエクスペリエンスを向上させることができます。また、ユーザーの視線をコンテンツに沿って誘導することで、可読性とユーザーエクスペリエンスを向上させます。一貫した配置は、ブランドアイデンティティを強化します。

### PageFlyページで要素を整列させる方法

具体的な手順に進む前に、以下のビデオをご覧ください：

{% embed url="<https://youtu.be/1Ge-5ExRbJo>" %}

#### Gen 2 エディタ - Flex Section

![](/files/TOGGqwzIETgFIIRGrlkz)

PageFly Gen 2では、従来のrow-columnコンテナ構造に依存しないFlex Sectionが導入されており、要素の配置においてより高い柔軟性を提供します。これらのセクション内で要素を整列させるためのヒントについては、「**How to Align Elements in the Gen 2 Editor**」のビデオをご覧ください。

{% embed url="<https://youtu.be/zzGo7lOHUO4>" %}

以下の手順で**Flex** Sectionを追加および設定します。

**Step 1: Elements > PageFly > Layout に移動**

![](/files/cwSv7qEMlnwH8Fwu3spg)

**Step 2: Blank Sectionを選択し、キャンバスにドラッグアンドドロップ**

![](/files/VXPiwm4ksVkdKrzeLCuc)

**Step 3: Flex Sectionに配置したい要素をドラッグアンドドロップ**

![](/files/3PnEYmVSZFfJJ2Qvu9aO)

**Step 4: 要素を整列**

フレックスセクション全体の整列を設定することを強くお勧めします。そうすることで、内部にネストされたすべての要素に自動的に適用されるからです。フレックスセクションをクリックし、スタイルタブの「**Align Items**」と「**Justify content**」設定を使用します。

![](/files/jZu03kmriVzhTEILKZEs)

ただし、フレックスセクション内の個々の要素に対して個別に整列を設定することも可能です。目的の要素をクリックし、「**Align self**」機能を使用して、フレックスセクション内の異なる要素を整列させます。

{% hint style="info" %}
**注**: 各要素の整列設定は、フレックスセクション全体の整列設定よりも優先されます。
{% endhint %}

![](/files/hmWo1E69xDa1WR6mrQw4)

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

**Step 1: 要素のコンテナを選択**

この例では、[**Heading**](https://help.pagefly.io/manual/heading-element/)、[**Paragraph**](https://help.pagefly.io/manual/paragraph-element/)、[**Button**](https://help.pagefly.io/manual/button-element/)要素があります。そして、これらの要素を**中央揃え**したいとします。

![](/files/5xjoNgHUMRgH0sPYlWwD)

これを行うには、要素のコンテナを選択する必要があります。

まず、ページ上で要素がどのように格納されているかを理解する必要があります。例えば、Button要素を選択すると、ブレッドクラムにそのコンテナが表示されます：**Section – Row – Column – Button**。

{% hint style="info" %}
**注**: より複雑なレイアウトを作成するために、より柔軟性を提供するFlex Sectionを使用できます。
{% endhint %}

このボタンを整列させたいので、ブレッドクラムでそのコンテナである**Column**を選択する必要があります。

![](/files/3VJN9l7VlON98FM6zVNc)

**Step 2: 選択したコンテナ内のすべての要素を整列**

ここで、上記のすべての要素を中央揃えにしたいとします。ここでColumnであるコンテナを選択した後、**Styling**タブ > **TYPOGRAPHY**セクション > **Text Alignment**の下にある**Center**アイコンをクリックします。

![](/files/TguAoIPcBgw76Gk54EnO)

**Step 3: コンテナ内の特定の要素を整列**

ボタンのみを中央揃えにし、見出しと段落は左揃えのままにしたい場合は、以下の手順を実行します。

* 見出し、段落、ボタンを含む**Column**が左揃えになっているか確認します（デフォルトでは左になっています）
* そうでない場合は、**Styling**タブに移動し、**TYPOGRAPHY**セクションのText Alignmentの下にあるLeftアイコンをクリックします。
* 中央にしたい**Button**要素を選択します。
* **Styling**タブに移動し、**ALIGNMENT**セクションのHorizontal alignmentの下にあるCenterアイコンをクリックします。

その結果、以下のような画像が表示されます。

![](/files/VnOO5MQhJ2LfpGCfxcZs)

### レガシーエディタの使用例

#### スタイル設定の優先順位

ネストされた要素の設定は、そのコンテナの設定よりも優先順位が高いことを覚えておいてください。例えば、列の整列を「**center**」に設定しても、その列内の段落要素が「**left**」に設定されている場合、その段落は左揃えになります。

#### デバイスのスタイル設定

PageFlyは、さまざまなデバイスに対してテキストの整列を細かく調整することをサポートしています。これは、デスクトップではクリーンでプロフェッショナルな見た目のためにテキストを左揃えにすることができますが、モバイルデバイスではより小さな画面での可読性を最適化するために中央揃えに切り替えることができることを意味します。

![](/files/jdqmwz0iSRD2jZjJedLS)

### よくある質問

**1. レガシーエディタのSectionで要素を垂直方向（縦方向）に整列するにはどうすればよいですか？**

* ベストプラクティスは、コンテナの**padding-top**と**padding-bottom**に同じ値を設定することです。例えば、**垂直方向**に整列したい要素を含むRowを選択し、そのRowの**padding-top**と**padding-bottom**に同じ値150 pxを設定します。

![](/files/w7sgWg612GngszQIDelc)

* 1つの行に複数の列があり、コンテンツを整列させるためのより良い解決策が必要な場合、PageFlyは**General tab**の**Content position**オプションを使用して、Row内で垂直方向の整列を行うオプションも提供します。

![](/files/413aKszYfo8lP8SY1Wyb)

**2. 列内の各要素を個別に整列できますか？**

**Heading**、**Paragraph**などの一部の要素では可能です。ただし、ボタンではできません。列自体は、見出し、テキスト、ボタンなどの他の要素のコンテナです。重要なのは、コンテナの整列を調整して、そのコンテナ内のすべての要素に対して目的の効果を達成することです。その後、内部のテキストの整列を調整できます。

**3. Section (Legacy) と Flex Section (Gen 2) の違いは何ですか？**

Sectionを使用すると、row-columnコンテナ構造でページレイアウトを設計でき、**PageFly Sections**と**PageFly pages**の両方に追加できます。一方、Flex Sectionはrow-column構造を持ちません。PageFlyページに要素を直接追加でき、Flexブロックによってより柔軟なカスタマイズレイアウトが可能です。

### バージョンアップデート

従来のページ構築メカニズム（行、列）に加え、PageFly 4.23.0では、複雑で高度にカスタマイズ可能なレイアウトを作成できる、より柔軟で効率的な技術であるGen 2 Editorが追加されました。これは直感的で使いやすいインターフェースを備えています。

### 追加リソース

* [PageFlyページを公開または非公開にする方法](https://help.pagefly.io/manual/how-to-publish-or-unpublish-pagefly-pages/)
* [PageFly Saved Sectionの使用方法](https://help.pagefly.io/manual/saved-section/)
* [PageFlyページの書き出しと読み込みの3ステップ](https://help.pagefly.io/manual/export-import-pages/)
* [PageFlyでページ設定を編集する方法](https://help.pagefly.io/manual/page-settings/)


---

# 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/align-elements-on-a-page.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.