このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
HTML 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> がスクロールするように高さを出すための詰め物テキストも含まれます。
<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>⚓︎</div><div 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
body { width: 50%; margin: 0 auto;}.anchor { font-size: 1.8rem; color: white; text-shadow: 1px 1px 1px black; background-color: hsl(240 100% 75%); width: fit-content; border-radius: 10px; border: 1px solid black; padding: 3px;}.infobox { color: darkblue; background-color: azure; border: 1px solid #ddd; padding: 10px; border-radius: 10px; font-size: 1rem;}CSS を使用して、infobox 要素をアンカー位置指定要素に変換し、そのアンカーに関連して位置指定します。この設定は次のように行います。
positionプロパティをfixedにし、位置指定要素に変換することで、アンカー位置から相対的に位置指定できるようになります。leftプロパティをanchor()関数に指定し、その値をrightとします。これにより、位置指定要素がアンカーに固定され、左端がアンカーの右端と揃うように位置指定されます。align-selfプロパティをanchor-centerに設定します。これにより、情報ボックスがアンカーのインライン方向の中央に配置されます。margin-leftを10pxに設定し、アンカーが指定された要素とアンカーの間に空間を作成します。
.infobox { position: fixed; left: anchor(right); align-self: anchor-center; margin-left: 10px;}結果
この例をスクロールして、情報ボックスがアンカーにどのように結び付けられているかを確認してください。anchor 属性に対応している場合、情報ボックスはアンカーの右側に固定されます。 対応していない場合、情報ボックスはビューポートに固定されます。
仕様書
この属性は現在、 HTML 仕様には属してはいません。anchor 属性の追加に関する議論はhttps://github.com/whatwg/html/pull/9144 をご覧ください。
ブラウザーの互換性
関連情報
HTMLElement.anchorElement- CSS の
anchor-nameプロパティ - CSS の
position-anchorプロパティ - CSS アンカー位置指定モジュール