OneNote ページで絶対位置を指定した要素を作成するCreate absolute positioned elements in OneNote pages

OneNote ページの本文には、直接の子要素 divimgobject を複数含めることができます。これらの要素はページ上に独立して配置できます。The body of a OneNote page can contain multiple direct div, img, and object child elements that can be positioned independently on the page.

属性と配置動作Attributes and positioning behavior

次に示すように、data-absolute-enabled 属性および style 属性を使用して、ページ上に絶対配置要素を作成します。Use the data-absolute-enabled and style attributes to create absolute positioned elements on a page, as follows:

  • body 要素は、data-absolute-enabled="true" を指定する必要があります。省略したり false に設定したりすると、API によって作成される _default 絶対配置 div の内側にすべての本文のコンテンツが表示され、すべての位置設定が無視されます。The body element must specify data-absolute-enabled="true". If omitted or set to false, all body content is rendered inside a _default absolute positioned div that the API creates, and all position settings are ignored.

  • divimg、および object 要素のみが絶対配置要素になります。Only div, img, and object elements can be absolute positioned elements.

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

  • 絶対配置要素は、body 要素の直接の子にする必要があります。body の直接の子要素が絶対配置でない divimg、または object 要素の場合は、絶対配置の _default div の内側に静的コンテンツとして表示されます。Absolute positioned elements must be direct children of the body element. Any direct children of the body that aren't absolute positioned div, img, or object elements are rendered as static content inside the absolute positioned _default div.

  • 絶対配置要素は、指定された上と左の座標 (開始位置 0:0 を基準とした、タイトル領域の上部でページの左隅) に配置されます。Absolute positioned elements are positioned at their specified top and left coordinates, relative to the 0:0 starting position at the top, left corner of the page above the title area.

  • 絶対配置要素が top または left の座標を省略していると、不足している座標には既定値の top:120px または left:48px が設定されます。これらの既定の座標は、title エリアの直下の位置を指定します。座標を省略すると、複数の要素の上部が積み重なることがある点に注意してください。If an absolute positioned element omits the top or left coordinate, the missing coordinate is set to its default value: top:120px or left:48px. These default coordinates specify a position just below the title area. Be aware that omitting coordinates can result in elements that are stacked on top of each other.

  • 絶対配置要素は、入れ子状態にしたり、定位置要素を含めたりすることはできません。API は、絶対配置の div 内の入れ子型の要素で指定された位置設定をすべて無視し、絶対配置の親 div 内の入れ子型のコンテンツを表示するとともに、応答の api.diagnostics プロパティで警告を返します。Absolute positioned elements cannot be nested or contain positioned elements. The API ignores any position settings specified on nested elements inside an absolute positioned div, renders the nested content inside the absolute positioned parent div, and returns a warning in the api.diagnostics property in the response.

Example

次の例には、p の直接の子、絶対配置 div、非絶対配置 div が含まれています。The following example contains a direct p child, an absolute positioned div, and a non-absolute positioned div.

入力 HTMLInput 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 など) を定義しないため、破棄されます。The API renders the non-absolute positioned div in the default div. Note that the nested <div> tags are discarded because they do not define any semantic information (such as data-id).

出力 HTMLOutput 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>

Example

次の例では、絶対配置の div と絶対配置のイメージを 1 つずつ含むページを作成します。The following example creates a page that contains one absolute positioned div and one absolute positioned image.

入力 HTMLInput 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="https://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="https://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
    </body>
</html>

OneNote API は入力 HTML を評価し、OneNote によりサポートされるすべての意味内容と任意の意味情報を保持します。結果のページは、次に示すイメージのように表示されます (div とイメージの境界線は表示されません)。The OneNote API evaluates the input HTML and preserves all semantic content and any structural information that is supported by OneNote. The resulting page renders as shown in the following image (but without the visible borders for the div and image).

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

入力 HTML から変更された、作用していない入れ子になった div に注意してください。API は div のコンテンツを保持しますが、<div> タグは破棄します。これは、div は意味情報 (data-id など) を定義しないためです。Notice the changes to the non-contributing, nested div from the input HTML. The API preserves the div's content but discards the <div> tags because the div doesn't define semantic information (such as data-id).

OneNote API が入力 HTML と出力 HTML を処理する方法の詳細については、「OneNote ページの入力 HTML と出力 HTML」を参照してください。For more information about how the OneNote API handles input and output HTML, see Input and output HTML for OneNote pages.

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

絶対配置要素は、上と左の座標を指定できます。div とイメージでは幅を指定でき、イメージでは高さも指定できます。たとえば、次のようになります。All absolute positioned elements can specify top and left positions. Divs and images can specify width, and images can also specify height. For example:

<img style="position:absolute;top:140px;left:95px;width:480px;height:665px" src="..." />
属性Attribute サポートされる要素Supported element 説明Description
toptop div、img、objectdiv, img, object 要素の上部境界線の Y 軸座標 (ピクセル単位のみ)。既定は 120 ピクセル。The y-axis coordinate of the element's top border, in pixels only. Default is 120 pixels.

例: top:140pxExample: top:140px
leftleft div、img、objectdiv, img, object 要素の左境界線の X 軸座標 (ピクセル単位のみ)。既定は 48 ピクセル。The x-axis coordinate of the element's left border, in pixels only. Default is 48 pixels.

例: left:95pxExample: left:95px
widthwidth div、imgdiv, img 要素の幅 (ピクセル単位のみ)。The width of the element, in pixels only.

例: width:480pxExample: width:480px
heightheight imgimg 要素の高さ (ピクセル単位のみ)div の場合、高さは実行時に計算されるため、指定された高さの値は無視されます。The height of the element, in pixels only. For divs, height is calculated at runtime and any specified height value is ignored.

例: height:665pxExample: height:665px

その他の位置属性、たとえば z-index などは無視されます。絶対配置の画像には、data-render-src または src のいずれかを使用できます。Other position attributes, such as z-index, are ignored. Absolute positioned images can use either the data-render-src or src attribute.

応答情報Response information

OneNote API は、次の情報を応答で返します。The OneNote API returns the following information in the response.

応答データResponse data 説明Description
成功コードSuccess code 成功した POST 要求に対しては 201 HTTP ステータス コード、成功した PATCH 要求に対しては 204 HTTP ステータス コードが戻ります。A 201 HTTP status code for a successful POST request, and a 204 HTTP status code for a successful PATCH request.
エラーErrors Microsoft Graph から返されることのある OneNote エラーに関する詳細については、「Microsoft Graph の OneNote API のエラー コード」を参照してください。Read Error codes for OneNote APIs in Microsoft Graph to learn about OneNote errors that Microsoft Graph can return.

アクセス許可Permissions

OneNote ページを作成または更新するには、適切なアクセス許可を要求する必要があります。アプリの動作に必要な最低限のアクセス許可を選択してください。To create or update OneNote pages, you'll need to request appropriate permissions. Choose the lowest level of permissions that your app needs to do its work.

POST ページのアクセス許可Permissions for POST pages

  • Notes.CreateNotes.Create
  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

PATCH ページのアクセス許可Permissions for PATCH pages

  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

アクセス許可のスコープと動作のしくみの詳細については、「OneNote のアクセス許可のスコープ」を参照してください。For more information about permission scopes and how they work, see OneNote permission scopes.

関連項目See also