全幅列で Web パーツを使用するUse web parts with the full-width column

モダン SharePoint ページは、ページにある情報を整理することができるレイアウトをサポートしています。Modern SharePoint pages support layouts that allow users to organize the information they present on their pages. 2 列、3 列、または 3 分の 1 列など、さまざまなセクション レイアウトから選択できます。Users can choose from a number of different section layouts such as two columns, three columns, or one-third column. コミュニケーション サイトのモダン ページには、全幅列と呼ばれる追加のセクション レイアウトがあります。Modern pages in communication sites offer an additional section layout named Full-width column. このレイアウトは、横方向の余白やパディングを使用せず、ページの幅全体に広がっています。This layout spans the full width of the page without any horizontal margin or padding. SharePoint Framework の Web パーツはいずれのレイアウトにも配置することができますが、追加の要件があるため Web パーツが明示的に全幅列をサポートしている必要があります。SharePoint Framework web parts can be placed in any layout, but due to extra requirements, web parts must explicitly enable support for the full-width column.

全幅列のレイアウトの要件Layout requirements for the full-width column

モダン SharePoint ページの標準レイアウトに共通するものは最大幅です。One thing that regular layouts in modern SharePoint pages share, is the maximum width. 読みやすさと使いやすさを保証するために、モダン ページの本体は特定の幅を超えて広がらないようになっています。To guarantee the ease of readability and usability, the body of a modern page doesn't expand beyond a certain width. 通常のレイアウトで使用される Web パーツを作成する場合は、既知の最大値と最小値の制約に対して Web パーツが正しく表示されることを確認します。When building web parts that will be used in regular layouts, you test your web part's width against the known maximum and minimum width constraints to ensure that they are displayed properly.

ただし、全幅列のレイアウトの場合は、レイアウトがページの幅全体に広がるため、作成が複雑になります。When working with the full-width column layout, however, things become a bit more complicated as that layout expands to the full width of the page. 非常に大きい画面で表示した場合、全幅列の幅が数千ピクセルに及ぶ場合があります。When displayed on an ultra-wide monitor, the full-width column can even become a few thousands pixels wide. これにより、全幅列で使用可能な Web パーツを作成するときに考慮しなければいけない追加テスト要件があります。This introduces additional testing requirements that you should take into account when building web parts that can be used in the full-width column.

全幅列のサポートを有効にするEnable support for the full-width column

既定では、SharePoint Framework のクライアント側 Web パーツを全幅列のレイアウトに配置することはできません。By default, SharePoint Framework client-side web parts cannot be placed in full-width column layouts. ユーザーが Web パーツを全幅列に追加できるようにするには、Web パーツのマニフェスト (`.manifest.jsonfile adjacent to the web part.ts` ファイル) で supportsFullBleed プロパティを true に設定します。To allow users to add your web part to full-width columns, in the web part manifest (the `.manifest.jsonfile adjacent to the web part.ts` file) set the supportsFullBleed property to true.

{
  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "34f6d7f2-262f-460a-8b65-152d784127cb",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportsFullBleed": true,

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloWorld" },
    "description": { "default": "HelloWorld description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloWorld"
    }
  }]
}

この設定を有効にすると、全幅列レイアウトを含むページを編集するときに、その Web パーツが列に追加できる Web パーツの 1 つとして表示されます。With this setting enabled, when you edit a page with a full-width column layout, your web part will be displayed among the web parts that can be added to the column.

全幅列のレイアウトに追加できる Web パーツの 1 つとして表示されるカスタム SharePoint フレームワーク クライアント側 Web パーツ

現時点では、SharePoint ワークベンチは全幅列レイアウトでの Web パーツのテストをサポートしていません。At this time, the SharePoint Workbench doesn't support testing web parts in the full-width column layout. 代わりに、開発者向けのテナントに Web パーツを展開し、コミュニケーション サイトを構築し、そこで Web パーツをテストする必要があります。Instead, you will have to deploy your web part to a developer tenant, create a communication site, and test your web part there.