SharePoint でページ レイアウトを作成するHow to: Create a page layout in SharePoint

デザイン マネージャーを使用してページ レイアウトを作成すると、2 つのファイルが作成されます。1 つは SharePoint で使用される .aspx ファイルです。もう 1 つはそのページ レイアウトの HTML バージョンで、これは HTML エディターで編集できます。この HTML ファイルとページ レイアウトは関連付けられているので、HTML ファイルを編集して保存すると、変更内容は関連付けられたページ レイアウトと同期されます。When you use Design Manager to create a page layout, two files are created: an .aspx file that SharePoint uses, and an HTML version of that page layout that you can edit in your HTML editor. The HTML file and page layout are associated, so that whenever you edit and save the HTML file, your changes are synced to the associated page layout.

ページ レイアウトの概要Introduction to page layouts

デザイン マネージャーを使用してページ レイアウトを作成すると、2 つのファイルが作成されます。1 つは SharePoint で使用される .aspx ファイルです。もう 1 つはそのページ レイアウトの HTML バージョンで、これは HTML エディターで編集できます。この HTML ファイルとページ レイアウトは関連付けられているので、HTML ファイルを編集して保存すると、変更内容は関連付けられたページ レイアウトと同期されます。When you use Design Manager to create a page layout, two files are created: an .aspx file that SharePoint uses, and an HTML version of that page layout that you can edit in your HTML editor. The HTML file and page layout are associated, so that whenever you edit and save the HTML file, your changes are synced to the associated page layout.

マスター ページを作成するときは、HTML ファイルをアップロードして、マスター ページに直接変換します。ただし、マスター ページとは異なり、HTML ファイルをページ レイアウトに直接変換することはありません。これは、ページ レイアウトの主な目的がページ フィールドを格納することであり、ページ フィールドはデザイン マネージャーでページ レイアウトを作成するときに追加する必要があるためです。When you create a master page, you upload and convert an HTML file directly into a master page. But, unlike a master page, you do not directly convert an HTML file into a page layout. This is because the primary purpose of a page layout is to contain page fields, and these page fields must get added when the page layout is created in Design Manager.

ページ レイアウトを作成するときは以下のことが行われます。When you create a page layout:

  • 同じ名前の .aspx ファイルと HTML ファイルがマスター ページ ギャラリーに作成されます。An .aspx file and an HTML file with the same name are created in the Master Page Gallery.

  • ページ レイアウトが正しくレンダリングされるように、SharePoint で必要なすべてのマークアップが .aspx ファイルに追加されます。All markup required by SharePoint is added to the .aspx file so that the page layout renders correctly.

  • コメント、

    タグ、スニペット、コンテンツ プレースホルダーなどの他のマークアップが、HTML ファイルに追加されます。Other markup such as comments,
    tags, snippets, and content placeholders are added to the HTML file.

  • コンテンツ タイプに固有のページ フィールドが、ページ レイアウトに自動的に追加されます。他のページ フィールドは、スニペット ギャラリーのリボンから追加できます。Page fields unique to the content type are added automatically to the page layout. Other page fields are available to be added from the ribbon in the Snippet Gallery.

  • HTML ファイルと .aspx ファイルが関連付けられ、HTML ファイルに対して後で行われる編集が、HTML ファイルを保存するたびに .aspx ファイルに同期されるようになります。コメント、

    タグ、スニペット、コンテンツ プレースホルダーなどの他のマークアップが、HTML ファイルに追加されます。The HTML file and the .aspx file are associated, so that any later edits to the HTML file are synced to the .aspx file whenever the HTML file is saved. Other markup such as comments,
    tags, snippets, and content placeholders are added to the HTML file.

注意

同期は一方通行です。Note: The syncing goes in one direction only. HTML ページに対する変更は関連付けられている .aspx ファイルに同期されますが、.aspx ファイルを直接編集しても、変更は HTML ファイルに同期されません。Changes to the HTML page layout are synced to the associated .aspx file, but if you choose to edit the .aspx file directly, those changes are not synced to the HTML file. すべての HTML ページ レイアウト (および、すべての HTML マスター ページ) には、Associated File という名前のプロパティがあり、値は既定で True に設定されています。その場合、ファイル間の関連付けと同期を行います。Every HTML page layout (and every HTML master page) has a property named Associated File that is set to True by default, which creates the association and syncing between files.

たとえば、関連付けられたファイル (HTML と .aspx) のペアがあり、関連付けを維持して .aspx ファイルを編集した場合, .aspx ファイルの変更は保存されますが, .aspx ファイルをチェックインまたは発行することはできないので、変更を保存しても意味がありません。HTML ファイルに対する変更によって, .ファイルは上書きされます。HTML ファイルをチェックインまたは発行すると、HTML ファイルの変更で, .aspx ファイルに対して行われた変更は上書きされます。.aspx ファイルの変更は失われます。For example, if you have a pair of associated files (HTML and .aspx) and you edit the .aspx file without breaking the association,the .aspx file changesare saved, but you can't check in or publish the .aspx file, so those changes are not saved in a meaningful way. Any changes to the HTML file override the .aspx file. If you check in or publish the HTML file, the HTML file changes override any changes that were made to the .aspx file. The .aspx file changes are lost.

開発者が ASP.NET で問題なく作業している場合は、ファイル間の関連付けを解除することにより, .aspx ファイルだけで作業できます。HTML ファイルと .aspx ファイルの関連付けを解除するには、デザイン マネージャーで、HTML ファイルの [ プロパティの編集] を選択し、[ 関連付けられているファイル] チェック ボックスをオフにします。後でプロパティを編集してこのチェック ボックスをオンにすることにより、ファイルを再び関連付けることができます。そうすると、HTML ファイルに保存される変更で .aspx ファイルが再び上書きされるようになります。If you're a developer comfortable working with ASP.NET, you can choose to work only with the .aspx file by breaking the association between the files. To break the association between the HTML file and .aspx file, in Design Manager, choose Edit Properties for the HTML file, and then clear the Associated File check box. You can later re-associate the files by editing the properties and selecting this check box, in which case changes saved in the HTML file will again overwrite the .aspx file.

ページ フィールドとコンテンツ タイプの関係の概要Understanding the relationship between page fields and a content type

すべてのページ レイアウトはコンテンツ タイプと関連付けられます。通常は、ページ レイアウト グループ内のコンテンツ タイプの 1 つです。たとえば、アーティクル ページ コンテンツ タイプはアーティクル ページ ページ レイアウトと関連付けられ、どちらも発行サイトに含まれます。Every page layout is associated with a content type, typically one of the content types in the Page Layout group. For example, the Article Page content type that is associated with the Article Page page layout, both of which are included in a publishing site.

コンテンツ タイプはサイト列で構成され、全体として許可されるデータ型のスキーマを定義しています。ソース列がブランクであることにより、そのサイト列が現在のコンテンツ タイプに固有であることがわかります。つまり、これらのサイト列は現在のコンテンツ タイプによって定義されており、親コンテンツ タイプからは継承されません。A content type is made of site columns, which together define a schema of allowed data types. You can tell that site columns are unique to the current content type because the Source column is blank—this means that these site columns are defined by the current content type, and are not inherited from a parent content type.

特定のページ レイアウトに関し、コンテンツ タイプを構成するサイト列は、そのページ レイアウトで使用できるページ フィールドに直接対応します。リボンのページ フィールドの最初のグループは、ページ レイアウトを作成すると自動的に追加されるページフィールドです。これらのフィールドはそのコンテンツ タイプに固有であり、一般的な SharePoint メタデータとは違って、ページ レイアウトで作成されることを特に目的として作成されているので、SharePoint はこれらのフィールドを自動的に追加します。For any given page layout, the site columns that make up the content type correspond directly to the page fields that are available for that page layout. The first group of page fields on the ribbon is page fields that get automatically added to the page layout when you create it. SharePoint adds these fields automatically because they're unique to this content type, and so it's likely that these fields were created specifically to be used by the page layout, as opposed to being general SharePoint metadata.

デザイン マネージャーでページ レイアウトを作成する前に、そのページ レイアウトで使用するページ フィールドを定義するコンテンツ タイプの作成が必要な場合があります。Before you create a page layout in Design Manager, you may first have to create a content type that defines the page fields that you want for that page layout

ページ レイアウトのコンテンツ プレースホルダーとマスター ページの関係の概要Understanding the relationship between content placeholders on a page layout and master page

ページ レイアウトが正しくレンダリングされるためには、ページ レイアウトとマスター ページのコンテンツ プレースホルダーのセットが一致している必要があります。デザイン マネージャーを使用してマスター ページとページ レイアウトを作成する場合は、正しいコンテンツ プレースホルダー セットが作成時にすべてのファイルに追加されるので、これは問題になりません。これにより、すべてのページ レイアウトが異なるマスター ページを使用するすべてのチャネルで動作することが保証されます。これらのコンテンツ プレースホルダーのほとんどについては、理解したり作業したりする必要はありません。これらは、ページを正しくレンダリングするために SharePoint で必要とされるので存在しています。A page layout and a master page must have the identical set of content placeholders for the page layout to render correctly. This is not a problem if you use Design Manager to create master pages and page layouts, because the correct set of content placeholders is added to every file when you create it. This ensures that every page layout works across every channel that uses a different master page. You don't have to know about or work with most of these content placeholders. They exist because they're required by SharePoint to render the page correctly.

しかし、手作業で HTML ページ レイアウトを編集してコンテンツ プレースホルダーを追加する場合は、そのページ レイアウトで動作する必要のあるすべてのマスター ページに、同じコンテンツ プレースホルダーを追加する必要があります。これは一般的なシナリオではありません。But, if you edit an HTML page layout and manually add a content placeholder, you should add that same content placeholder to every master page that needs to work with that page layout. This is not a common scenario.

デザイン マネージャーを使用してページ レイアウトとマスター ページを作成する場合の最も一般的なシナリオでは、以下のコンテンツ プレースホルダーの作業のみを行います。If you're using Design Manager to create page layouts and master pages, the most common scenario is that you're working with only the following content placeholders:

  • PlaceHolderMain マスター ページには ID="PlaceholderMain" であるコンテンツ プレースホルダーが含まれ、それには DefaultContentBlock

    タグおよび [ この領域には、ページ レイアウトで作成したコンテンツが入力されます] と表示される黄色いボックスが含まれます。マスター ページのこのプレースホルダーには、どのようなコンテンツも入れないでください。ページ レイアウトには、同じ ID を持つコンテンツ プレースホルダーがあります。ページ レイアウトでは、このプレースホルダーの内部にのみマークアップを配置し、このプレースホルダーの外部にはマークアップを配置しないようにする必要があります。2 つのプレースホルダーの ID ( PlaceholderMain) は一致している必要があります。PlaceHolderMain The master page contains a content placeholder with ID="PlaceholderMain", which contains the DefaultContentBlock
    tag with the yellow box that shows This area will be filled in by content you create in your page layouts. You should not put any content inside this placeholder on the master page. The page layout contains a content placeholder with the same ID. You should put markup only inside this placeholder, and put no markup outside this placeholder, on a page layout. The IDs for the two placeholders ( PlaceholderMain) should match.

  • PlaceHolderAdditionalPageHead ページ レイアウトの作業を行うとき、通常は、ページ レイアウトの タグには要素を挿入しません。代わりに、 id="PlaceHolderAdditionalPageHead" であるコンテンツ プレースホルダーに要素を追加します。コンテンツ ページがブラウザーでレンダリングされるときに、この追加ページ ヘッダーがマスター ページのヘッダーの最後に組み込まれます。PlaceHolderAdditionalPageHead When you work with a page layout, you typically don't insert elements into the tag of the page layout. Instead, you add elements to the content placeholder with id="PlaceHolderAdditionalPageHead". When a content page is rendered in the browser, this additional page head gets merged into the end of the head of the master page.

ページ レイアウトを作成するCreate a page layout

始める前に、ページ レイアウトが関連付けられるコンテンツ タイプとマスター ページを確認しておく必要があります。Before you begin, you need to know which content type and master page the page layout will be associated with.

ページ レイアウトを作成するにはTo create a page layout

  1. 発行サイトに移動します。Browse to your publishing site.

  2. ページの右上隅で、歯車アイコンを選択し、[ デザイン マネージャー] を選択します。In the upper-right corner of the page, choose the gear icon, and then choose Design Manager.

    歯車アイコン メニューGear icon menu

発行サイトで歯車アイコンをクリックすると開くメニュー。1 つの項目は、[デザイン マネージャー] です。

  1. デザイン マネージャーの左側のナビゲーション ウィンドウで、[ ページ レイアウトの編集] を選択します。In Design Manager, in the left navigation pane, choose Edit Page Layouts.

  2. [ ページ レイアウトの作成] を選択します。Choose Create a page layout.

  3. [ ページ レイアウトの作成] ダイアログ ボックスで、ページ レイアウトの名前を入力します。In the Create a Page Layout dialog box, enter a name for your page layout.

  4. マスター ページを選択します。Select a master page.

    ここで選択したマスター ページが、このページ レイアウトのプレビューで表示されます。また、このマスター ページにより、ページ レイアウトに追加されるコンテンツ プレースホルダーが決まります。The master page that you choose here will be shown in the preview for this page layout. This master page also determines what content placeholders get added to the page layout.

    注意

    このマスター ページを選択した後では、異なるマスター ページを実際のサイトに適用した後であっても、ページ レイアウトを異なるマスター ページでプレビューすることはできません。After you choose this master page, you cannot preview the page layout with a different master page, even after you apply a different master page to the live site.

  5. コンテンツ タイプを選択します。このページ レイアウトのコンテンツ タイプにより、スニペット ギャラリーでこのページ レイアウトに対して使用できるページ フィールドが決まります。Select a content type. The content type for this page layout determines what page fields will be available for this page layout in the Snippet Gallery.

  6. [OK] をクリックします。Choose OK.

    この時点で、SharePoint は同じ名前の HTML ファイルと .aspx ファイルを作成します。At this point, SharePoint creates an HTML file and an .aspx file with the same name.

    デザイン マネージャーに HTML ファイルが表示され、[状態] 列には次の 2 つの状態のどちらかが表示されます。In Design Manager, your HTML file now appears with a Status column that shows one of two possible statuses:

    • 警告とエラーが発生していますWarnings and Errors
  • 正常に変換されましたConversion successful
  1. ファイルをプレビューしたり、マスター ページに関するエラーまたは警告を表示したりするには、[状態] 列のリンクをクリックします。Click the link in the Status column to preview the file and to view any errors or warnings about the master page.

    プレビュー ページは、ページ レイアウトの実際のサーバー側プレビューです。プレビューの先頭には、HTML ファイルを HTML エディターで編集して解決することが必要な場合がある警告またはエラーが表示されます。プレビューでページ レイアウトが正しく表示されるためには、エラーを修正する必要があります。The preview page is a live server-side preview of your page layout. The top of the preview displays any warnings or errors that you may have to resolve by editing the HTML file in an HTML editor. Errors must be fixed before the preview will display the page layout correctly.

    エラーと警告への対応の詳細については、「 SharePoint でページをプレビューしているときのエラーと警告を解決する方法」を参照してください。For more information about resolving errors and warnings, see How to: Resolve errors and warnings when previewing a page in SharePoint.

    ページ レイアウトのプレビューの詳細については、「 方法: SharePoint デザイン マネージャーでプレビュー ページを変更する」を参照してください。For more information about previewing the page layout, see How to: Change the preview page in SharePoint Design Manager.

    プレビュー ページの右上隅には [ スニペット] リンクもあります。このリンクをクリックするとスニペット ギャラリーが開き、デザイン内の模擬表示を動的な SharePoint コントロールに置き換えることができます。詳細については、「 SharePoint デザイン マネージャー スニペット」を参照してください。The preview page also contains a Snippets link in the upper-right corner. This link opens the Snippet Gallery, where you can begin replacing mockup controls in your design with dynamic SharePoint controls. For more information, see SharePoint Design Manager snippets.

  2. エラーを修正するには、マップされたドライブの HTML ファイルを HTML エディターで開いて編集することにより、サーバー上に直接存在する HTML ファイルを編集します。HTML ファイルを保存するたびに、関連付けられている .aspx ファイルに変更が同期されます。To fix any errors, edit the HTML file that resides directly on the server by using an HTML editor to open and edit the HTML file in the mapped drive. Each time you save the HTML file, any changes are synced to the associated .aspx file.

  3. ページ レイアウトのプレビューでは、ページ レイアウトに自動的に追加されたページ フィールドが表示されます。これらのページ フィールドは、現在のコンテンツ タイプに固有のサイト列です。この時点では、元の HTML 模擬表示に従ってページ レイアウトのスタイルを設定できる状態になっています。The preview of the page layout shows the page fields that were added automatically to the page layout. These page fields are site columns that are unique to the current content type. Now you are ready to style the page layout according to your original HTML mockups.

ページ レイアウトのスタイルの実現方法の決定Determine where the styles for a page layout should go

サイトの HTML 模擬表示を作成するときは、アーティクル ページや、カタログの 1 つのアイテムに関する詳細を表示する Web パーツを含むアイテムの詳細ページなど、異なるページのクラスを表す HTML ファイルがある場合があります。そのページのクラスを表すページ レイアウトを作成した後は、HTML 模擬表示から、ページ レイアウトの HTML バージョンに、スタイルを転送できるようになります。When you create HTML mockups for your site, you may have HTML files that represent different classes of pages, such as an article page or an item details page that contains a Web Part to display the details of a single item from a catalog. After you create the page layout that represents that class of pages, you're ready to transfer the styles from your HTML mockup to the HTML version of your page layout.

1 つ以上のページ レイアウトのスタイルを、マスター ページがリンクしている同じスタイル シートに格納するだけでもかまいません。しかし、ページごとに読み込まれる CSS の重さを最小限にする必要がある場合は、異なるページ レイアウトには異なるスタイル シートを使用することもできます。その場合、スタイル シートに対するリンクをページ レイアウトの タグに入れることはできないことを理解しておくことが重要です。リンクは PlaceHolderAdditionalPageHead という名前のコンテンツ プレースホルダーに入れる必要があります。You can simply put the styles for one or more page layouts into the same style sheet that the master page links to. But, if you want to minimize the weight of the CSS that is loaded per page, you can also use different style sheets for different page layouts. When you do this, it's important to know that a link to a style sheet cannot go in the tag of a page layout. Instead, the link must go in the content placeholder named PlaceHolderAdditionalPageHead.

注意

このマークアップでは、属性 ms-design-css-conversion="no" によりスタイル シートがテーマから除外されます。Note: In this markup, the attribute ms-design-css-conversion="no" excludes the style sheet from theming. また、スタイル シートへのリンクは、<!--SPM とコメント化された行の後に出現する必要があります。Also, the link to the style sheet should appear after the lines commented <!--SPM.


<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
            <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<link href="MyPageLayout.css" rel="stylesheet" type="text/css" ms-design-css-conversion="no" />
        <!--ME:</asp:ContentPlaceHolder>-->

サイト閲覧者がこのページ レイアウトを使用するページを閲覧すると、この追加ページ ヘッダーがマスター ページのヘッダーの最後に組み込まれて、ページ レイアウトのスタイルはマスター ページのスタイルの後で適用されるようになります。When a site visitor browses a page that uses this page layout, this additional page head gets merged into the end of the head of the master page—so, styles for the page layout are applied after styles for the master page.

このようにして、各ページ レイアウトは独自のスタイル シートを持つことができます。たとえば、 id="xyz" である

を、左側に表示されるページ レイアウトと、右側に表示される別のページ レイアウトで使用できます。In this way, each page layout can have its own style sheet. For example, you can have a
with id="xyz" in one page layout that appears on the left, and in another page layout appears on the right.

また、各ページ レイアウトでは、1 つ以上のデバイス チャネル固有スタイル シートを使用することもできます。たとえば、電話用とデスクトップ用でレイアウトが異なるページ レイアウトを使用できます。そのためには、1 つ以上のデバイス チャネル パネルを PlaceHolderAdditionalPageHead の内部に配置し、各チャネル パネルにはチャネル固有のスタイルのスタイル シートへのリンクを追加します。これにより、たとえば、 id="abc" である

を使用して、あるチャネルでは大きいテキストを表示し、別のチャネルでは小さいテキストを表示できます。Each page layout can also have one or more device channel-specific style sheets. For example, you might want a page layout to have a layout for phones that is different from the desktop layout. To do this, you can include one or more device channel panels inside PlaceHolderAdditionalPageHead, where each channel panel includes a link to a style sheet with channel-specific styles. This way, for example, a
with id="abc" can display large text in one channel and small text in a different channel.

以下では、ページ レイアウトに対するスタイル シート リンクの配置場所に関する一般的なシナリオを示します。The following are some common scenarios for where to put the style sheet links for page layouts.

最も単純なシナリオは、マスター ページからリンクしている 1 つのスタイル シートに 1 つ以上のページ レイアウトのスタイルを含めるものです。マスター ページでは, .css ファイルの終了 タグの直前にリンクを配置し、corev15.css などの既定の SharePoint スタイル シートをオーバーライドします。The simplest scenario is to include styles for one or more page layouts in the same style sheet that the master page links to. In the master page, place the link to the .css file just before the closing tag, so that it overrides the default SharePoint style sheets such as corev15.css.


<head>
…
<link rel="stylesheet" type="text/css" href="MyStyleSheet.css" />
</head>

各ページで読み込まれる CSS の重さを最小限にする場合は、ページ レイアウトごとに CSS ファイルを分けることができます。このシナリオでは、ページ レイアウトのスタイルは PlaceHolderAdditionalPageHead という名前のコンテンツ プレースホルダーに配置します。If you want to minimize the weight of CSS that gets loaded with each page, you can have separate CSS files for each page layout. In this scenario, the styles for a page layout go in the content placeholder named PlaceHolderAdditionalPageHead.


<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
            <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<link href="MyPageLayout.css" rel="stylesheet" type="text/css" ms-design-css-conversion="no" />
        <!--ME:</asp:ContentPlaceHolder>-->

複数のデバイス チャネルがある場合、チャネルごとにページ レイアウトのレンダリングを変えることがあります。このシナリオでは、1 つ以上のデバイス チャネル パネルを PlaceHolderAdditionalPageHead の内部に配置し、チャネル固有の CSS ファイルへのリンクを各チャネル パネル内に追加します。If you have different device channels, you likely want your page layouts to render differently for different channels. In this scenario, you include one or more device channel panels inside PlaceHolderAdditionalPageHead, and then include a link to channel-specific CSS files inside each channel panel.


<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<div data-name="DeviceChannelPanel">
    <!--CS: Start Device Channel Panel Snippet-->
    <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<Publishing:DeviceChannelPanel runat="server" IncludedChannels="Channel1">-->
…..
<link rel="stylesheet" type="text/css" href="MyStyleSheet.css" ms-design-css-conversion="no" />
    <!--ME:</Publishing:DeviceChannelPanel>-->
    <!--CE: End Device Channel Panel Snippet-->
</div><div data-name="DeviceChannelPanel">
    <!--CS: Start Device Channel Panel Snippet-->
    <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<Publishing:DeviceChannelPanel runat="server" IncludedChannels="Channel2">-->
…..
<link rel="stylesheet" type="text/css" href="CSS5.css" />
    <!--ME:</Publishing:DeviceChannelPanel>-->
    <!--CE: End Device Channel Panel Snippet-->
</div>

HTML ページ レイアウト内のマークアップの概要Understanding the markup in the HTML page layout

ページ レイアウトを作成すると、SharePoint が使用する .aspx ファイルが作成され、ページ レイアウトの HTML バージョンにいくつかの HTML マークアップが追加されます。HTML ページ レイアウトを HTML エディターで編集するときは、このマークアップの一部の目的を理解していると役に立つことがあります。ほとんどのマークアップは、HTML マスター ページに追加されるマークアップと似ています。詳細については、「 方法: SharePoint で HTML ファイルをマスター ページに変換する」を参照してください。When you create a page layout, an .aspx file gets created that SharePoint uses, and some HTML markup gets added to the HTML version of the page layout. When you edit the HTML page layout in your HTML editor, it might be helpful to understand the purpose of some of this markup. Most of it is similar to the markup that gets added to an HTML master page. For more information, see How to: Convert an HTML file into a master page in SharePoint.

ページ レイアウトに固有のマークアップは、ページ レイアウトが関連付けられているコンテンツ タイプに基づいてページ レイアウトに追加されるページ フィールドです。ページ フィールドは、 id="PlaceHolderMain" であるコンテンツ プレースホルダーの内部に出現します。たとえば、 PlaceHolderMain に対する次のマークアップには、関連付けられているコンテンツ タイプの Title フィールドおよび Page Image フィールドを表す 2 つのページ フィールドが含まれます。The markup that is unique to page layouts is page fields that are added to the page layout based on the content type that the page layout is associated with. Page fields appear inside the content placeholder with id="PlaceHolderMain". For example, the following markup for PlaceHolderMain contains two page fields that represent the Title and Page Image fields from the associated content type.


<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
            <div>
                <!--CS: Start Page Field: Title Snippet-->
                <!--SPM:<%@Register Tagprefix="PageFieldTextField" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                <!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->
                    <!--MS:<PageFieldTextField:TextField FieldName="fa564e0f-0c70-4ab9-b863-0177e6ddd247" runat="server">-->
                    <!--ME:</PageFieldTextField:TextField>-->
                <!--ME:</Publishing:EditModePanel>-->
                <!--CE: End Page Field: Title Snippet-->
            </div>
            <div>
                <!--CS: Start Page Field: Page Image Snippet-->
                <!--SPM:<%@Register Tagprefix="PageFieldRichImageField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                <!--MS:<PageFieldRichImageField:RichImageField FieldName="3de94b06-4120-41a5-b907-88773e493458" runat="server">-->
                    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div id="ctl02_label" style="display:none">Page Image</div><div id="ctl02__ControlWrapper_RichImageField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl02_label"><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">Page Image</span></div><div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field"><img alt="" src="/_layouts/images/home.gif" style="BORDER: px solid; " /></div></div></div></div><!--PE: End of READ-ONLY PREVIEW-->
                <!--ME:</PageFieldRichImageField:RichImageField>-->
                <!--CE: End Page Field: Page Image Snippet-->
            </div>
        <!--ME:</asp:ContentPlaceHolder>-->

関連項目See also