anchor

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

anchor はグローバル属性で、位置指定要素とアンカー要素を関連付けるために使用されます。この属性の値は、位置指定要素をアンカーする要素の id の値です。その後、 CSS アンカー位置指定を使用して要素の位置指定を行うことができます。

メモ: それ以外に、CSS を使用して、位置指定要素をアンカー要素に関連付けることもできます。 anchor-name および position-anchor プロパティを使用します。 同じ要素に対してどちらのアンカー技術も使用されている場合、 CSS 技術が HTML 技術よりも優先されます。

例

基本的な anchor 属性の使用方法

次の例では、 HTML を使用して、位置指定要素をアンカーに関連付けます。 その後、 CSS を使用して、位置指定要素をアンカーの右側に固定します。

HTML

<div> 要素を id を example-anchor にして作成します。これがアンカー要素になります。次に、 anchor 属性が example-anchor に設定された別の <div> が含まれます。これにより、最初の <div> が 2 つ目の <div> のアンカーとして指定され、2つが関連付けられたことになります。

また、 2 つの <div> の周りには、 <body> がスクロールするように高さを出すための詰め物テキストも含まれます。

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<div class="anchor" id="example-anchor">⚓︎</div>

<div class="infobox" anchor="example-anchor">
  <p>これは情報ボックスです。</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

CSS を使用して、 infobox 要素をアンカー位置指定要素に変換し、そのアンカーに関連して位置指定します。この設定は次のように行います。

  • position プロパティを fixed にし、位置指定要素に変換することで、アンカー位置から相対的に位置指定できるようになります。
  • left プロパティを anchor() 関数に指定し、その値を right とします。これにより、位置指定要素がアンカーに固定され、左端がアンカーの右端と揃うように位置指定されます。
  • align-self プロパティを anchor-center に設定します。これにより、情報ボックスがアンカーのインライン方向の中央に配置されます。
  • margin-left を 10px に設定し、アンカーが指定された要素とアンカーの間に空間を作成します。
css
.infobox {
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

結果

この例をスクロールして、情報ボックスがアンカーにどのように結び付けられているかを確認してください。 anchor 属性に対応している場合、情報ボックスはアンカーの右側に固定されます。 対応していない場合、情報ボックスはビューポートに固定されます。

仕様書

この属性は現在、 HTML 仕様には属してはいません。 anchor 属性の追加に関する議論は https://github.com/whatwg/html/pull/9144 をご覧ください。

ブラウザーの互換性

BCD tables only load in the browser

関連情報