> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/pagefly-help-center-japanese/pjito/pagefly-elements/advanced/table-element.md). # テーブル ### テーブル要素について [Table Element](https://help.pagefly.io/manual/table-element/)を使用すると、商品情報や料金プランを示すテーブルを作成できます。 詳細については、以下のビデオチュートリアルを参照してください。 {% embed url="" %} ### レガシーエディター - テーブル要素にアクセスして設定する方法 * ステップ1：PageFlyエディターで、左側メニューの要素ボタンをクリックします。 * ステップ2：**PageFly**タブを探し > **高度**セクションの下にある**テーブル**要素をクリックします。サイドバーで探す代わりに、検索機能を使用してこの要素を検索できることに注意してください。 * ステップ3：目的のテーブルバリアントをページエディターにドラッグアンドドロップします。これで要素の設定を開始できます。 ![](/files/YfFFKHZn09FzDokM5Sd3) テーブル要素には、ほとんどのニーズをカバーする複数のバリエーションがあります。しかし、時間を節約できるよう、さらにバリエーションを追加し続けます。 ![](/files/gp6QUVLHQQDfUYgfEVDf) テーブル要素には、行や列の数量の調整、ヘッダー行やヘッダー列の設定、カスタムフォントや色の適用など、外観と機能をカスタマイズするのに役立つ様々なパラメーターがあります。… #### 全般設定 全般タブに移動して、テキスト、配置、見出しレベル（H1、H2、H3など）などの全般設定を調整します。 ![](/files/brV8jdU5nvV6d34AWkDi) 以下に全般タブの主な設定を確認してください。 \| **スタイル**: 6つのテーブルスタイルから選択：デフォルト、ベーシック、ストライプ行、枠付きテーブル、ホバー行、枠なし。 | | ![](/files/wy6I1SSjPGA0UKoDTdkA) | | ---------------------------------------------------------------------------------- | | **列、行、ヘッダー行、ヘッダー列**: 黒い点を目的の位置にドラッグするか、右側のボックスに特定の数値を入力して、列、行、ヘッダー行、ヘッダー列の数を調整します。 | ![](/files/cuu5giJ3Rk5l40TDCoIB) |\ \| **テキストコンテンツ**: テーブル内のテキストフィールドのコンテンツを変更します。セルをクリックして、必要に応じてテキストを入力および書式設定します。 | ![](/files/8MFBJsAetg0f08c9veN5) | ATTRIBUTES、VISIBILITY、およびANIMATIONパラメーターに関する詳細は、[こちら](https://help.pagefly.io/manual/elements-general-settings/)で確認できます。 #### スタイリング設定 スタイリングタブに切り替えて、フォントサイズ、色、間隔など、外観をカスタマイズするためのスタイリング設定を行います。 **全体** 全体セクションでは、コンテンツの色を変更できます：8つのデフォルトカラーから選択するか、カラーピッカーを使用して独自のカラーをカスタマイズして、テーブルのコンテンツの色を変更します。 ![](/files/4xiL5HswSTsVx7DZ8RGt) **間隔** * パディング：テーブルのコンテナの内部間隔を調整して、各セル内のコンテンツが適切に配置されるようにします。 * マージン：テーブルのコンテナの外部間隔を調整し、テーブルとページ上の他の要素との距離を管理します。 ![](/files/0I2hlMwAWWaeve6rhDPc) **タイポグラフィ** \| - **フォントファミリー**: ストアのブランディングに合わせるために、6つのデフォルトフォントファミリーオプションから選択します。 | | ![](/files/HHJPtbypDiSekv1OsMA9) | | -------------------------------------------------------- | | - **フォントサイズ**: 黒い点をドラッグするか、ボックスに特定の数値を入力してフォントサイズを調整します。 | ![](/files/cObwemkE4sruTIUdMG4E) |\ \| - **テキスト配置**: 左揃え、右揃え、中央揃え、両端揃えの4つのテキスト配置オプションから選択し、セル内のテキストを適切に配置します。 | ![](/files/fZCEj9b8FlTCO5WCTrYa) |\ \| - **テキストスタイル**: テキストの表示を強化するために、テキストスタイル（太字、斜体）を適用します。 | ![](/files/GYzFsO1gkyN69cR6Y63J) | **背景** \| - **背景色**: 8つのデフォルトカラーのいずれかを使用するか、独自のカラーをカスタマイズして、テーブルの背景色を選択します。 {% hint style="info" %} **注意**: 背景色はヘッダー行およびヘッダー列には適用されません。 {% endhint %} | | | | --------------------------------------------------------- | | - **背景画像**: 画像を選択をクリックし、画像を選択し、選択をクリックして、テーブルに背景画像を追加します。 | ![](/files/wTnzpl2ZCfx9vcaGT6w2) | スタイリングタブに関する詳細は、[こちら](https://help.pagefly.io/manual/elements-style-settings/)で確認できます。 ### Gen 2エディター - テーブル要素にアクセスして設定する方法 {% hint style="warning" %} **重要**: Gen 2レイアウトは、従量課金制モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能です。 {% endhint %} アクセス手順はレガシーエディターと同じですが、時間を節約できるよう、さらにバリエーションを追加し続けます。 ![](/files/xx1d5RHFMGXeWLmemgPM) テーブル要素には、行や列の数量の調整、ヘッダー行やヘッダー列の設定、カスタムフォントや色の適用など、外観と機能をカスタマイズするのに役立つ様々なパラメーターがあります。… より分かりやすくするために、以下のビデオチュートリアルを参照してください。 {% embed url="" %} #### 全般設定 以下に全般タブの主な設定を確認してください。 **コンテンツ**: \| **行、列**: 列と行の数を調整します | ![](/files/a6JJ5Xc8WYRcGOYiAsSS) パラメーターとして表示されるテーブル行、テーブルセルなどの内部要素をクリックして行や列を追加することもできます。 | ![](/files/D05GVfoFKJg5t2YwKSvy) | | ----------------------------------------------- | | **一番上の行をヘッダーに、列をヘッダーに:** 最初の行または列をヘッダーとしてマークします | ![](/files/odpiFj9dfcfVep1MSEKD) |\ \| **ボーダー**: テーブルにボーダーを設定します。テーブルセルのみにボーダーを設定することもできます。 | ![](/files/F5CA5fkDXOO2pF6Bd98Y) |\ \| **段落テキスト**: テーブル内のテキストフィールドのコンテンツを変更します | ![](/files/0VhVHCM8SBxJuNyxsHj1) | ATTRIBUTES、VISIBILITY、およびANIMATIONパラメーターに関する詳細は、[こちら](https://help.pagefly.io/manual/elements-general-settings/)で確認できます。 注意：これらの要素のみをセル内に配置できます * フレックスブロック、見出し、段落、ボタン、画像、ビデオ、リスト、アイコン、仕切り。 #### スタイリング設定 スタイリングタブに切り替えて、フォントサイズ、色、間隔など、外観をカスタマイズするためのスタイリング設定を行います。フレックスエディターの場合、「サイズ」という新しいパラメーターが追加され、フレックスブロックの幅と高さを変更できます。 **レイアウト** テーブルセル要素をクリックしてパラメーターの設定を調整します。[ページエディター - スタイリングタブの記事](https://help.pagefly.io/manual/elements-style-settings/%23layout-settings)で詳細を確認できます（Gen 2エディター - スタイリングタブのレイアウト設定の下）。 **全体** 全体セクションでは、コンテンツの色を変更できます：8つのデフォルトカラーから選択するか、カラーピッカーを使用して独自のカラーをカスタマイズして、テーブルのコンテンツの色を変更します。 ![](/files/I5S8qjbk3u1kqjuzNkbU) **間隔** * **パディング**: テーブルのコンテナの内部間隔を調整し、各セル内のコンテンツが適切に配置されるようにします。パディングは、テーブルセルなどの内部要素にも適用できます。 * **マージン**: テーブルのコンテナの外部間隔を調整し、テーブルとページ上の他の要素との距離を管理します。 ![](/files/mqDYCQKhY1Q1SO7VYfCA) **タイポグラフィ** \| - **フォントファミリー**: ストアのブランディングに合わせるために、6つのデフォルトフォントファミリーオプションから選択します。 | | ![](/files/OoycK8aZ9Vdt4eSrgBJN) | | -------------------------------------------------------- | | - **フォントサイズ**: 黒い点をドラッグするか、ボックスに特定の数値を入力してフォントサイズを調整します。 | ![](/files/YTipDUvdfUl13PXDTFZc) |\ \| - **テキスト配置**: 左揃え、右揃え、中央揃え、両端揃えの4つのテキスト配置オプションから選択し、セル内のテキストを適切に配置します。 | ![](/files/x4fjSSmbQJdSufKViW5B) |\ \| - **テキストスタイル**: テキストの表示を強化するために、テキストスタイル（太字、斜体）を適用します。 | ![](/files/m8iiDveYOXG317ZJ60o5) | **背景** \| - **背景色**: 8つのデフォルトカラーのいずれかを使用するか、独自のカラーをカスタマイズして、テーブルの背景色を選択します。 {% hint style="info" %} **注意**: 背景色はヘッダー行およびヘッダー列には適用されません。 {% endhint %} | | ![](/files/GCLJpeoWatvPCaMsIX2o) | | --------------------------------------------------------- | | - **背景画像**: 画像を選択をクリックし、画像を選択し、選択をクリックして、テーブルに背景画像を追加します。 | ![](/files/Gk9TVgFDPckprBMh2gYt) | ### 一般的なケース #### モバイルデバイスでテーブルがレスポンシブにならない場合 PageFlyのレスポンシブデザインツールを使用して、モバイルデバイス向けにテーブルのレイアウトを調整します。テーブルセルが広すぎず、小さい画面でもテキストが適切なサイズであることを確認してください。PageFlyエディター内で様々なデバイスサイズでテーブルをプレビューし、すべてのデバイスでの読みやすさと使いやすさを確保するために必要な調整を行います。 #### テーブルスタイルがテーマに合わない場合 スタイリングタブを使用して、テーブルの外観をカスタマイズします。フォントファミリー、フォントサイズ、テキストカラーを変更してテーマのスタイルに合わせます。背景色を調整するか、背景画像を追加して、テーブルがストアのデザインとシームレスに統合されるようにします。提供されているデフォルトのテーブルスタイル（例：Striped Rows, Bordered Table）を利用して、統一感のある見た目を素早く適用します。 ### よくある質問 **1. なぜウェブページでテーブルを使用する必要があるのですか？** テーブル要素は、スキャン、比較、分析が容易であるため、大量のデータを表示する最良の方法です。ユーザーは統計間の関連性を迅速に理解し、概観することができます。 **2. テーブル要素内に画像を追加できますか？** はい、Gen 2エディターを使用してテーブル要素を追加できます。新しいテーブル要素は、テーブル内に画像を追加することをサポートしています。 ### 追加リソース * [PageFlyコンテンツリスト要素を編集する方法](https://help.pagefly.io/manual/content-list-element-2/) * [要素ツールバーの主な機能 | PageFlyページエディター](https://help.pagefly.io/manual/page-editor-element-toolbar/) * [PageFlyでのページエディター - 要素カタログの使い方](https://help.pagefly.io/manual/page-editor-element-catalog/) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/pagefly-elements/advanced/table-element.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.