SharePoint で .html ファイルをマスターページに変換する

[アーティクル]
03/21/2023

重要

この拡張オプションは、従来の SharePoint エクスペリエンスにのみ使用できます。コミュニケーションサイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。従来の環境やこれらのブランディング手法を使用することはお勧めしません。

デザインマネージャーでは, .html ファイルを SharePoint のマスターページ (.master ファイル) に変換できます。変換後、.html ファイルとマスターページが関連付けられるので、.html ファイルを編集して保存すると、関連付けられているマスターページに変更が同期されます。

マスターページの変換の概要

.master ファイルを最初から作成するのではなく、.html ファイルを変換する理由 SharePoint では、マスターページは ASP.NET での動作とまったく同様に動作しますが、SharePoint でマスターページを正しくレンダリングするには、SharePoint 固有のコントロールやコンテンツプレースホルダーなど特定の要素がそのページ上に存在している必要があります。デザインマネージャーを使用して、.html ファイルを完全に機能する SharePoint マスターページに変換することで、ASP.NET や SharePoint 固有のマークアップについて知る必要はありません。代わりに、HTML、CSS、JavaScript でサイトを設計することに重点を置くことができます。

.html ファイルをマスターページに変換すると、次の処理が行われます。

.html ファイルと同じ名前の .master ファイルがマスターページギャラリーに作成されます。
SharePoint によって必要とされるすべてのマークアップは、.master ファイルに追加され、それによってマスターページは正しくレンダリングされることになります。
コメント、<div> タグ、スニペット、コンテンツプレースホルダーなどのマークアップが元の .html ファイルに追加されます。
.html ファイルとマスターページが関連付けられるので、その後で .html ファイルに対して行われた編集は、.html ファイルを保存すると .master ファイルと同期されます。

注:

同期は一方通行です。 .htmlマスターページへの変更は、関連付けられている .master ファイルに同期されますが、.master ファイルを直接編集する場合、変更は.html ファイルに同期されません。すべての HTML マスターページ (およびすべての.html ページレイアウト) には、 関連付けられたファイル という名前のプロパティが既定で True に設定されており、ファイル間の関連付けと同期が作成されます。

関連付けられたファイル (HTML と .master) のペアがあり、関連付けを解除せずに .master ファイルを編集すると、.master ファイルへの変更は保存されますが、.master ファイルをチェックインまたは発行できないため、それらの変更は意味のある方法で保存されません。 .html ファイルを変更すると、.master ファイルがオーバーライドされます。 .html ファイルをチェックインまたは発行した場合、.html ファイルの変更は、.master ファイルに加えられた変更をオーバーライドします。 .master ファイルへの変更は失われます。

開発者が ASP.NET の作業に慣れている場合は、ファイル間の関連付けを解除することで、.master ファイルでのみ作業できます。 .html ファイルと .master ファイルの関連付けを解除するには、デザインマネージャーで、.html ファイルの [プロパティの編集 ] を選択し、[ 関連付けられているファイル ] チェックボックスをオフにします。後でプロパティを編集してこのチェックボックスをオンにすると、ファイルを再関連付けることができます。この場合、.html ファイルによって .master ファイルが再度上書きされ、.master ファイルに加えられた変更は失われます。

.html ファイルの変換の準備

.html ファイルを変換する前に、検討すべきベストプラクティスとガイダンスを以下に示します。

SharePoint ページモデルについて検討します。詳細については、「 SharePoint ページモデルの概要」を参照してください。サイトの.htmlモックアップを設計するときに、記事ページや、カタログのアイテムのカテゴリを表示する Web パーツを含むカテゴリページなど、ページの種類ごとに複数の.html ファイルが存在する可能性があります。ただし、.html ファイルは 1 つだけマスターページに変換されます。 .html ファイルはマスターページに変換できますが、ページレイアウトにはページフィールドが必要なため、.html ファイルをページレイアウトに直接変換することはできません。
.html ファイルが XML に準拠していることを確認します。変換を成功させるには、.html ファイルが XML に準拠している必要があります。残念ながら、この要件は HTML 5 標準よりも優先されます。たとえば、HTML 5 では小文字で doctype を指定できますが、XML の場合、doctype は大文字である必要があります。また、.html ファイルから <form> タグをすべて削除する必要があります。変換前に、外部の XML 検証ツールを使用して、.html ファイルに XML エラーがあるか確認することができます。
CSS リファレンスとして、以下の重要なガイドラインを考慮に入れてください。
- <head> タグ内に <style> ブロックを入れないでください。変換中にこれらの style は削除されます。その代わりに、.html ファイルから外部 CSS ファイルにリンクするようにしてください。
- Web フォントを使用している場合は、CSS リンク> タグにを追加します。<ms-design-css-conversion="no"
- <body>、<div>、<img> などの一般的な HTML タグにスタイルを適用する際には、注意してください。 SharePoint デザイン内のすべてのもの (リボンを含む) は、<body> タグ内にあります。通常 <body> タグに適用しているスタイルについては、SharePoint がページのメインボディとして使用する <div id="s4-bodyContainer"> タグに代わりに適用することを検討してください。また、SharePoint は <img> タグに適用されたあらゆるスタイルが反映された多くの画像を使用します。
- 多くのデザイナーは、<ul> 要素と <li> 要素にクラスを適用することで、ナビゲーションにスタイルを適用します。しかし、SharePoint は、スニペットギャラリーからマスターページに追加できるダイナミックナビゲーションコントロールを使用します。 SharePoint ナビゲーションコントロールには、既定で適用されているスタイルがありますが、それを上書きする必要があります。
ファイルの命名に関する以下の潜在的な問題を考慮に入れてください。
- Index.html と Index.htm がある場合、これらのファイルの .master ファイルは同じ名前になります。
- Design/Index.html と Design/SubDesign/Index.html がある場合、これらのファイルはどちらもそれぞれ別個の .master ファイルに変換できますが、デザインマネージャーのマスターページの一覧ではどちらも Index.html として表示されます。両者を明確にするには、各ファイルの省略記号ボタンをクリックまたは選択して、フルパスを表示します。
JavaScript ウィジェットを追加する場合は、<script> 開始タグを行に単独で配置します。

  
<script>
(function( …

次のように、同じ行に配置しないでください。

  
<Script> (function( …

JQuery ライブラリへの参照 (外部参照) は </head> タグの前に配置する必要があります。

.html ファイルをマスターページに変換する

.html ファイルを変換する前に、まず、.html ファイルを含むすべてのデザインファイルをアップロードする必要があります。詳細については、「方法: ネットワークドライブを SharePoint マスターページギャラリーにマップする」を参照してください。

.html ファイルを .master ファイルに変換するには

発行サイトに移動します。
ページの右上隅で [ 設定] を選択し、[ デザインマネージャー] を選択します。
デザインマネージャーの左側のナビゲーションウィンドウで、[ マスターページの編集] を選択します。
[.html ファイルを SharePoint マスターページに変換] を選択します。
[アセットの選択] ダイアログボックスで、変換する .html ファイルを参照して選択します。

注:

デザインファイルをアップロードする場合は、1 つのデザインに関連付けられたすべてのファイルをマスターページギャラリー内のそれぞれのフォルダーに保持する必要があります。デザインフォルダーをマッピングされたネットワークドライブにコピーすると、マスターページギャラリーには作成したすべてのフォルダー構造が維持されます。
[挿入] を選択します。

ここで、SharePoint によって、.html ファイルが同じ名前の .master ファイルに変換されます。

デザインマネージャーに .html ファイルが表示され、[状態] 列には次の 2 つの状態のどちらかが表示されます。

警告とエラーが発生しています
正常に変換されました

[状態] 列のリンクをクリックして、ファイルをプレビューするか、マスターページに関するエラーまたは警告を表示します。

プレビューページは、マスターページの現在のサーバー側プレビューです。プレビューの上部には、HTML エディターで.html ファイルを編集することで解決しなければならない可能性がある警告やエラーが表示されます。プレビューでマスターページが正しく表示される前に、エラーを修正する必要があります。

エラーと警告の解決の詳細については、「方法: SharePoint でページをプレビューするときにエラーと警告を解決する」を参照してください。

さまざまなページでマスターページをプレビューする方法の詳細については、「方法: SharePoint デザインマネージャーでプレビューページを変更する」を参照してください。

プレビューページの右上隅には [スニペット] リンクもあります。このリンクによりスニペットギャラリーが開き、デザイン内の静的コントロールまたはモックアップコントロールを動的な SharePoint コントロールに置き換えることができます。詳細については、「SharePoint デザインマネージャースニペット」を参照してください。
エラーを修正するには、HTML エディターを使用してサーバー上に直接存在する.html ファイルを編集し、マップされたドライブ内の.html ファイルを開いて編集します。 .html ファイルを保存するたびに、関連付けられている .master ファイルに変更が同期されます。
マスターページのプレビューに成功すると、.html ファイルに追加した <div> タグが表示されます。ページの下部までスクロールしないと、この <div> タグが表示されないことがあります。

この <div> は、メインコンテンツブロックです。それは ContentPlaceHolderMain という名前のコンテンツプレースホルダーの中にあります。実行時に、訪問者がサイトを閲覧してページを要求すると、このコンテンツプレースホルダーには、合致するコンテンツ領域にコンテンツを含むページレイアウトからのコンテンツが埋め込まれます。この <div> は、ページレイアウトが表示されるマスターページに配置する必要があります。

.html ファイルにページ本文に静的コンテンツまたはモックアップコンテンツが含まれている場合は、HTML マスターページからその静的コンテンツを削除し、ページレイアウト、ページフィールドコントロール、スニペット、表示テンプレートなど、SharePoint ページモデルの他の要素にそれらのスタイルを適用するプロセスを開始します。例については、「方法: SharePoint でページレイアウトを作成する」を参照してください。

変換後の .html ファイルの理解

.html ファイルをマスターページに変換すると、多くの行のマークアップが.html ファイルに追加されます。このマークアップの大部分は無視しても問題ありません。ブラウザーでソースを表示する場合、ほとんどのマークアップはサイトの最終的なマークアップには表示されませんが、このマークアップは、.html ファイルを SharePoint が実際に使用する .master ファイルに変換するために重要です。 .html ファイルに変更を保存するたびに、この SharePoint マークアップを使用すると、関連付けられている .master ファイルに対して同じ変更をバックグラウンドで行えるようになります。

追加されるマークアップには、<head> タグの前および中にあるタグ、スニペット、コンテンツプレースホルダーが含まれます。大部分のマークアップはコメントタグに囲まれていますが、.html ファイルに対する変更を保存するたびに、その中の ASP.NET マークアップを使用できるよう、変換プロセスによってコメントが取り除かれます。

マークアップの種類

.html ファイルに追加されるマークアップの種類の分類を以下に示します。

ドキュメントプロパティ<mso> タグには、ファイル自体と、.master ファイルへの変換を正常に行うために必要ないくつかのプロパティに関する情報などの SharePoint メタデータが含まれます。

  
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://[server_name]/sites/PubSite/_catalogs/masterpage/[site_name]/index.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A0084F0F9C7FCB65541A59990D173DA60FA</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>

SharePoint 名前空間登録<SPM> タグ ("SharePoint markup") で SharePoint 名前空間を登録する行を追加します。

  
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->

コメント<CS> タグおよび <CE> タグ ("comment start" と "comment end") は、変換プロセスでは無視されます。これらのタグは、マークアップ行の解析に役立ちます。

  
<!--CS: Start Page Head Contents Snippet-->
…
<!--CE: End Page Head Contents Snippet-->

  <!--CS: Start Ribbon Snippet-->
…
<!--CE: End Ribbon Snippet-->

<!--CS: Start PlaceHolderMain Snippet-->
…
<!--CE: End PlaceHolderMain Snippet-->

スニペット<MS> タグおよび <ME> タグ ("markup start" と "markup end") は、SharePoint コントロールまたはスニペットの開始および終了を意味します。スニペットとは、SharePoint の機能をページに追加する SharePoint コントロールのことです。スニペットギャラリーを使用することにより、スニペットを自分で追加することができます。詳細については、「SharePoint デザインマネージャースニペット」を参照してください。

  
<!--MS:<SharePoint:RobotsMetaTag runat="server">-->
        <!--ME:</SharePoint:RobotsMetaTag>-->
        <!--MS:<SharePoint:PageTitle runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
                <!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
                <!--ME:</SharePoint:ProjectProperty>-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:PageTitle>-->
        <!--MS:<SharePoint:StartScript runat="server">-->
        <!--ME:</SharePoint:StartScript>-->
        <!--MS:<SharePoint:CssLink runat="server" Version="15">-->
        <!--ME:</SharePoint:CssLink>-->
        <!--MS:<SharePoint:CacheManifestLink runat="server">-->
        <!--ME:</SharePoint:CacheManifestLink>-->
        <!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
        <!--ME:</SharePoint:PageRenderMode>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:CustomJSUrl runat="server">-->
        <!--ME:</SharePoint:CustomJSUrl>-->
        <!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
        <!--ME:</SharePoint:SoapDiscoveryLink>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
            <!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
            <!--ME:</SharePoint:DelegateControl>-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
        <!--ME:</SharePoint:CssRegistration>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
            <!--MS:<WebPartPages:SPWebPartManager runat="server">-->
            <!--ME:</WebPartPages:SPWebPartManager>-->
        <!--ME:</SharePoint:AjaxDelta>-->

プレビューブロック<PS> タグおよび <PE> タグ ("preview start" と "preview end") は、デザイン時プレビューにのみ影響するため編集するべきでない HTML コードのセクションを囲むために使用されます。これらのプレビューセクションは、スニペットが挿入した時点の SharePoint コントロールのスナップショットです。プレビューを使用すると、クライアント側の HTML エディターで、.html ファイルに関してより有意義な作業を行うことができます。しかし、プレビュー内でコンテンツやスタイルを変更しても、SharePoint が最終的に使用する .master ファイルに対して持続する効果はありません。スニペットのスタイルを設定するには、SharePoint スタイルを特定して、独自のカスタム CSS で上書きする必要があります。

  
<!--PS: Start of READ-ONLY PREVIEW (do not modify) -->
<div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div>
<!--PE: End of READ-ONLY PREVIEW -->

SharePoint ID 変換中に.html ファイルに追加されたスニペットのうち 2 つ ([ページヘッドコンテンツ] スニペットと [SharePoint リボン] ) には、それぞれ SharePoint ID または SID (00 と 02) が関連付けられています。これらの ID を使用して、スニペットを短縮し、ページ内の HTML を読みやすくすることができます。

  
<!--SID:00 -->

<!--SID:02 {Ribbon}-->

追加されるスニペット

.html ファイルに追加されるスニペットのうち 2 つについて理解することが重要です。これらのスニペットは変換時に自動的に追加されますが、スニペットギャラリーから追加することはできません。

Ribbon - コンテンツ作成者がページを作成し、SharePoint サイトにコンテンツを作成できるようにするには、マスターページにリボンと SharePoint で新たに導入された "スィートナビゲーション" が必要です。リボンはセキュリティトリミングスニペットに含まれるため、閲覧者がサイトを参照すると、リボンは認証されたユーザーにのみ表示され、匿名ユーザーには表示されません。リボンをページ上のさまざまな位置に移動したり、既定の CSS クラスを上書きしてスタイルを設定したりできますが、リボン内に含まれる ([サイト操作] メニューなどの) コンポーネントを移動したり、並べ替えたりすることはお勧めしません。

  
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->

ContentPlaceHolderMain 変換プロセスは、</body> 終了タグの前の <div id="s4-bodyContainer"> タグの下部に、PlaceHolderMain という名前のコンテンツプレースホルダーを挿入します。このスニペットの内部には、HTML エディターのデザインビュー、またはデザインマネージャーのサーバー側プレビューで表示される、黒い枠線で囲まれた黄色い <div> があります。

この <div> は、ページレイアウトおよびページで指定されたコンテンツが表示されることになる領域を表しています。 PlaceHolderMain スニペットを、ページレイアウトで埋められることになるマスターページ内の場所、つまりサイトのすべてのページで同一にはならないサイトデザインの領域に移動する必要があります。

  
<!--CS: Start PlaceHolderMain Snippet-->
                    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                    <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
            This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
        
                            </div>
                        <!--ME:</asp:ContentPlaceHolder>-->
                    <!--ME:</SharePoint:AjaxDelta>-->
                    <!--CE: End PlaceHolderMain Snippet-->

リファレンス: .html ファイルに追加される SharePoint マークアップの例

マスターページへの変換後に .html ファイルに追加されるマークアップの例を以下に示します。

<head> タグに追加されるマークアップ


<head>
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <!--CS: Start Page Head Contents Snippet-->
        <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SID:00 -->
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />
        <!--MS:<SharePoint:RobotsMetaTag runat="server">-->
        <!--ME:</SharePoint:RobotsMetaTag>-->
        <!--MS:<SharePoint:PageTitle runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
                <!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
                <!--ME:</SharePoint:ProjectProperty>-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:PageTitle>-->
        <!--MS:<SharePoint:StartScript runat="server">-->
        <!--ME:</SharePoint:StartScript>-->
        <!--MS:<SharePoint:CssLink runat="server" Version="15">-->
        <!--ME:</SharePoint:CssLink>-->
        <!--MS:<SharePoint:CacheManifestLink runat="server">-->
        <!--ME:</SharePoint:CacheManifestLink>-->
        <!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
        <!--ME:</SharePoint:PageRenderMode>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
        <!--ME:</SharePoint:ScriptLink>-->
        <!--MS:<SharePoint:CustomJSUrl runat="server">-->
        <!--ME:</SharePoint:CustomJSUrl>-->
        <!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
        <!--ME:</SharePoint:SoapDiscoveryLink>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
            <!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
            <!--ME:</SharePoint:DelegateControl>-->
            <!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
            <!--ME:</asp:ContentPlaceHolder>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
        <!--ME:</SharePoint:CssRegistration>-->
        <!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
            <!--MS:<WebPartPages:SPWebPartManager runat="server">-->
            <!--ME:</WebPartPages:SPWebPartManager>-->
        <!--ME:</SharePoint:AjaxDelta>-->
        <!--CE: End Page Head Contents Snippet-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--DC:Business Solutions-->
        <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
        <!--[if lte IE 7]>
  <link rel="stylesheet" href="css/ie.css" type="text/css" charset="utf-8"/> 
 <![endif]-->
        <!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://[server_name]/sites/PubSite/_catalogs/masterpage/[site_name]/index.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A0084F0F9C7FCB65541A59990D173DA60FA</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
    </head>

<body> 開始タグの後に追加されるマークアップ

Ribbon スニペット


<!--CS: Start Ribbon Snippet-->
        <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--SPM:<%@Register Tagprefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>-->
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">-->
            <div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
                    <!--MS:<SharePoint:EncodedLiteral runat="server" text="&amp;lt;%$Resources:wss,master_turnonaccessibility%&amp;gt;" EncodeMethod="HtmlEncode">-->
                    <!--ME:</SharePoint:EncodedLiteral>-->
                </a>
            </div>
            <div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
                    <!--MS:<SharePoint:EncodedLiteral runat="server" text="&amp;lt;%$Resources:wss,master_turnoffaccessibility%&amp;gt;" EncodeMethod="HtmlEncode">-->
                    <!--ME:</SharePoint:EncodedLiteral>-->
                </a>
            </div>
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <div id="ms-designer-ribbon">
            <!--SID:02 {Ribbon}-->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
        </div>
        <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
            <!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
            <!--ME:</wssucw:Welcome>-->
        <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
        <!--CE: End Ribbon Snippet-->

2 つの SharePoint <div> タグ


<div id="s4-workspace">
            <div id="s4-bodyContainer">

</body> 終了タグと 2 つの </div> 終了タグの前に追加されるマークアップ


<div data-name="ContentPlaceHolderMain">
                    <!--CS: Start PlaceHolderMain Snippet-->
                    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                    <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
                        <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
            This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
        
                            </div>
                        <!--ME:</asp:ContentPlaceHolder>-->
                    <!--ME:</SharePoint:AjaxDelta>-->
                    <!--CE: End PlaceHolderMain Snippet-->
                </div>

SharePoint で .html ファイルをマスターページに変換する

マスターページの変換の概要

.html ファイルの変換の準備

.html ファイルをマスターページに変換する

.html ファイルを .master ファイルに変換するには

変換後の .html ファイルの理解

マークアップの種類

追加されるスニペット

リファレンス: .html ファイルに追加される SharePoint マークアップの例

<head> タグに追加されるマークアップ

<body> 開始タグの後に追加されるマークアップ

Ribbon スニペット

2 つの SharePoint <div> タグ

</body> 終了タグと 2 つの </div> 終了タグの前に追加されるマークアップ

関連項目

その他のリソース

SharePoint で .html ファイルをマスター ページに変換する

マスター ページの変換の概要

.html ファイルの変換の準備

.html ファイルをマスター ページに変換する

.html ファイルを .master ファイルに変換するには

変換後の .html ファイルの理解

マークアップの種類

追加されるスニペット

リファレンス: .html ファイルに追加される SharePoint マークアップの例

<head> タグに追加されるマークアップ

<body> 開始タグの後に追加されるマークアップ

Ribbon スニペット

2 つの SharePoint <div> タグ

</body> 終了タグと 2 つの </div> 終了タグの前に追加されるマークアップ

関連項目

その他のリソース

SharePoint で .html ファイルをマスターページに変換する

マスターページの変換の概要

.html ファイルをマスターページに変換する