Table of contents
TOC
目次を折りたたむ
目次を展開する
最終更新日: 2018/10/31

絶対配置要素を作成する

適用対象: OneDrive のコンシューマー ノートブック | Office 365 のエンタープライズ ノートブック

OneNote ページの本文には、直接の子要素 divimgobject を複数含めることができます。これらの要素はページ上に独立して配置できます。

属性と配置動作

次に示すように、data-absolute-enabled 属性および style 属性を使用して、ページ上に絶対配置要素を作成します。

  • body 要素は、data-absolute-enabled="true" を指定する必要があります。省略したり false に設定したりすると、API によって作成される _default 絶対配置 div の内側にすべての本文のコンテンツが表示され、すべての位置設定が無視されます。

  • |||UNTRANSLATED_CONTENT_START|||Only div, img, and object elements can be absolute positioned elements.|||UNTRANSLATED_CONTENT_END|||

  • 絶対配置要素は、style="position:absolute" を指定する必要があります。

  • 絶対配置要素は、body 要素の直接の子にする必要があります。body の直接の子要素が絶対配置でない divimg、または object 要素の場合は、絶対配置の _default div の内側に静的コンテンツとして表示されます。

  • 絶対配置要素は、指定された上と左の座標 (開始位置 0:0 を基準とした、タイトル領域の上部でページの左隅) に配置されます。

  • 絶対配置要素が top または left の座標を省略していると、不足している座標には既定値の top:120px または left:48px が設定されます。これらの既定の座標は、title エリアの直下の位置を指定します。座標を省略すると、複数の要素の上部が積み重なることがある点に注意してください。

  • 絶対配置要素は、入れ子状態にしたり、定位置要素を含めたりすることはできません。API は、絶対配置の div 内の入れ子型の要素で指定された位置設定をすべて無視し、絶対配置の親 div 内の入れ子型のコンテンツを表示するとともに、応答の api.diagnostics プロパティで警告を返します。


例: 次の例には、p の直接の子、絶対配置 div、非絶対配置 div が含まれています。

入力 HTML

<body data-absolute-enabled="true">
    <p>This content will appear in the _default div.</p>
    <div style="position:absolute;top:175px;left:100px" data-id="div1">
      <p>This content will appear in an absolute positioned div.</p>
    </div>
    <div>
        <p>This content will also appear in the _default div.</p>
    </div>
</body>

API は既定の div に非絶対配置 div を表示します。入れ子になった <div> タグは意味情報 (data-id など) を定義しないため、破棄されます。

出力 HTML

<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
    <div data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
        <p>This content will appear in the _default div.</p>
        <p>This content will also appear in the _default div.</p>
    </div>
    <div data-id="div1" style="position:absolute;left:99px;top:174px;width:624px">
        <p>This content will appear in an absolute positioned div.</p>
    </div>
</body>

例: 次の例では、絶対配置の div と絶対配置のイメージを 1 つずつ含むページを作成します。


入力 HTML

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true">
        <div style="position:absolute;width:280px;top:120px;left:68px">
            <p>Some text</p>
            <img style="width:120px" src="http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
            <div>
                <p>More text inside a regular, nested div</p>
            </div>
        </div>
        <img style="position:absolute;width:360px;top:350px;left:300px" src="http://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
    </body>
</html>

OneNote API は入力 HTML を評価し、OneNote によりサポートされるすべての意味内容と任意の意味情報を保持します。結果のページは、次に示すイメージのように表示されます (div とイメージの境界線は表示されません)。

絶対配置の div とイメージのある結果のページ

入力 HTML から変更された、作用していない入れ子になった div に注意してください。API は div のコンテンツを保持しますが、<div> タグは破棄します。これは、div は意味情報 (data-id など) を定義しないためです。

OneNote API が入力 HTML と出力 HTML を処理する方法の詳細については、「OneNote ページの入力 HTML と出力 HTML」を参照してください。

サポートされている CSS スタイルの属性

絶対配置要素は、上と左の座標を指定できます。div とイメージでは幅を指定でき、イメージでは高さも指定できます。たとえば、次のようになります。

<img style="position:absolute;top:140px;left:95px;width:480px;height:665px" src="..." />
属性サポートされる要素説明
topdiv、img、object要素の上部境界線の Y 軸座標 (ピクセル単位のみ)。既定は 120 ピクセル。

例: top:140px

leftdiv、img、object要素の左境界線の X 軸座標 (ピクセル単位のみ)。既定は 48 ピクセル。

例: left:95px

widthdiv、img要素の幅 (ピクセル単位のみ)。

例: width:480px

heightimg要素の高さ (ピクセル単位のみ)div の場合、高さは実行時に計算されるため、指定された高さの値は無視されます。

例: height:665px

その他の位置属性 (z-index など) は無視されます。絶対配置のイメージは、data-render-src または src 属性のいずれかを使用できます。

応答情報

OneNote API は、次の情報を応答で返します。

応答データ説明
成功コード成功した POST 要求に対しては 201 HTTP ステータス コード、成功した PATCH 要求に対しては 204 HTTP ステータス コードが戻ります。
エラーまたは警告

次に示すいずれかの条件が成立する場合は、応答の api.diagnostics プロパティで警告を受け取ることになります。

  • 要素に style="position:absolute" 属性が指定されているが、body 要素では data-absolute-enabled="true" を指定していない。すべての位置設定が無視されます。
  • body 要素の直接の子でない要素に style="position:absolute" 属性が指定されている。要素が divimg、または object の場合は、その要素を body の直接の子にします。それ以外の場合、位置設定は無視されます。
  • 要素が、style="position:absolute"divimg、および `object 要素ではない要素に指定されている。
X-CorrelationId ヘッダー要求を一意に識別する GUID。Microsoft サポートと問題のトラブルシューティングを行う際に、この値を Date ヘッダーの値とともに使用できます。

アクセス許可

OneNote ページを作成または更新するには、適切なアクセス許可を要求する必要があります。アプリの動作に必要な最低限のアクセス許可を選択してください。

POST pages のアクセス許可

プラットフォームアクセス許可の適用範囲
コンシューマーoffice.onenote_create, office.onenote_update_by_app, office.onenote_update
エンタープライズNotes.Create, Notes.ReadWrite.CreatedByApp, Notes.ReadWrite, Notes.ReadWrite.All

PATCH pages のアクセス許可

プラットフォームアクセス許可の適用範囲
コンシューマーoffice.onenote_update_by_app, office.onenote_update
エンタープライズNotes.ReadWrite.CreatedByApp, Notes.ReadWrite, Notes.ReadWrite.All

アクセス許可のスコープと動作のしくみの詳細については、「OneNote のアクセス許可のスコープ」を参照してください。

その他のリソース

© 2018 Microsoft