A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/ja/docs/Web/HTML/Reference/Global_attributes/anchor below:

HTML anchor グãƒãƒ¼ãƒãƒ«å±žæ€§ - HTML

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 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 
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 要素をアンカー位置指定要素に変換し、そのアンカーに関連して位置指定します。この設定は次のように行います。

.infobox {
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}
結果

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

仕様書

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

ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4