---
title: "ページ構成"
slug: "pages-configuration"
abstract: "SXAのページエディター体験を設定する上で重要な要素や手順を確認してください。"
---
# ページ構成

[SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)ページビルダーはWYSIWYG(見たままのもの)エディターで、ウェブサイトのページを作成し、コンテンツ、コンポーネント、レイアウトを操作できます。

最初から、サイトは選んだグリッドやテーマに応じてコンポーネントのデフォルトスタイルを持っています。 [ページビルダー](https://doc.sitecore.com/sai/en/users/sitecoreai/build-pages.html)でカスタムグリッドやスタイルを使用したい場合は、[コンテンツエディター](https://doc.sitecore.com/sai/en/users/sitecoreai/content-editor.html)で設定し、サイトの構造を構築し、カスタムグリッドの設定やカスタムスタイルの設定を行います。

カスタムページ体験の設定について詳しくはこちらをご覧ください:

-   [カスタムスタイルの設定](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/walkthrough--adding-a-custom-style-to-pages.html "Walkthrough: Adding a custom style to Pages")
-   [カスタムグリッドの設定](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/walkthrough--setting-up-a-custom-grid.html "Walkthrough: Setting up a custom grid")
-   [カスタムコンポーネントをPagesで利用可能にします](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/make-a-custom-component-available-in-the-page-builder.html "Make a custom component available in the page builder")
-   [ページビルダーでデバイスを追加・設定](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/add-and-configure-a-device-in-the-page-builder.html "Add and configure a device in the Page builder")

構成に重要な要素については参考資料を参照してください。

-   [スタイルの表示タイプ](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/walkthrough--adding-a-custom-style-to-pages/display-types-for-styles.html "Display types for styles")
-   [利用可能なCSSクラス](https://doc.sitecore.com/sai/ja/developers/sitecoreai/content-modeling-and-presentation/sitecoreai-for-developers/pages-configuration/walkthrough--adding-a-custom-style-to-pages/available-css-classes.html "Available CSS classes")