` の値が設定されたインセットプロパティと互換性がなく、代替値が使用された場合と同じ動作です。次の 2 つの宣言は同等です。
+
+```css example-bad
+bottom: anchor(right, 50px);
+bottom: 50px;
+```
+
+どちらも、位置指定された要素を、最も近い位置指定された祖先要素（存在する場合）または最初の包含ブロックの最下端から `50px` 上の位置に配置します。
+
+最もよく使用される `anchor()` の引数は、既定のアンカーの端を参照します。また、アンカーの端と位置指定された要素の間に空間を作成するために {{cssxref("margin")}} を追加するか、またはその空間を追加するために `calc()` 関数内で `anchor()` を使用することが多いでしょう。
+
+例えば、このルールは位置指定された要素の正しい端をアンカー要素の左端に揃え、端と端の間に空間を作るために `margin-left` を追加します。
+
+```css
+.positionedElement {
+ right: anchor(left);
+ margin-left: 10px;
+}
+```
+
+`anchor()` 関数の返値は長さです。つまり、{{cssxref("calc()")}} 関数内で使用できるということです。このルールでは、位置指定された要素の論理ブロックの終わりを、アンカー要素の論理ブロックの始まりから `10px` 離れた位置に配置し、`calc()` 関数を使用して間隔を追加します。これにより、マージンを追加する必要がなくなります。
+
+```css
+.positionedElement {
+ inset-block-end: calc(anchor(start) + 10px);
+}
+```
+
+#### `anchor()` の例
+
+例えば、`anchor()` の動作を見てみましょう。 前回と同様の HTML を使用していますが、コンテンツがコンテナーそのものをあふれてスクロールするように、その上下にいくつかのフィラーテキストを配置しています。また、アンカー要素には、以前の例と同じ `anchor-name` を指定します。
+
+```html hidden
+
+ 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.
+
+
+⚓︎
+
+
+
+
+ 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.
+
+
+
+ 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.
+
+```
+
+```css hidden
+.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;
+}
+
+body {
+ width: 50%;
+ margin: 0 auto;
+}
+```
+
+```css
+.anchor {
+ anchor-name: --myAnchor;
+}
+```
+
+情報ボックスはアンカー名によってアンカーに関連付けられ、固定位置指定が指定されています。{{cssxref("inset-block-start")}} と {{cssxref("inset-inline-start")}} プロパティ（横書きの左書きモードでは {{cssxref("top")}} と {{cssxref("left")}} に相当）を記載することで、アンカーに固定されています。位置指定要素とアンカーとの間に空間を追加するために、情報ボックスにマージンを追加します。
+
+```css hidden
+.infobox {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ border-radius: 10px;
+ font-size: 1rem;
+}
+```
+
+```css
+.infobox {
+ position-anchor: --myAnchor;
+ position: fixed;
+ inset-block-start: anchor(end);
+ inset-inline-start: anchor(self-end);
+ margin: 5px 0 0 5px;
+}
+```
+
+インセットプロパティの位置指定宣言について、さらに詳しく見ていきましょう。
+
+- `inset-block-start: anchor(end)`: これは、位置指定された要素のブロック開始位置を、`anchor(end)` 関数を使用して計算したアンカーのブロック終了位置に設定します。
+- `inset-inline-start: anchor(self-end)`: これは、位置指定された要素のインライン開始位置を、`anchor(self-end)` 関数を使用して計算したアンカーのインライン終了位置に設定します。
+
+これにより、次の結果が得られます。
+
+{{ EmbedLiveSample("`anchor()` example", "100%", "250") }}
+
+位置指定された要素は、アンカー要素の `5px` 下、`5px` 右に配置されます。文書内の位置を上下にスクロールしても、位置指定された要素はアンカー要素に対する相対的な位置を維持します。つまり、位置指定された要素はビューポートではなくアンカー要素に固定された状態になります。
+
+### `position-area` の設定
+
+{{cssxref("position-area")}} プロパティは、アンカーに対する要素の位置指定を行うための、`anchor()` 関数の代替として指定されたものです。`position-area` プロパティは、アンカー要素を中心タイルとする 3x3 のタイルグリッドの概念に基づいて動作します。`position-area` プロパティを使用して、アンカー要素の位置指定された要素を 9 つのタイルのいずれかに配置したり、2 つまたは 3 つのタイルにまたがって配置したりすることができます。
+
+
+
+グリッドのタイルは行と列の数に分割されます。
+
+- 3 つの行は、物理的な値では `top`、`center`、`bottom` で表します。 また、`start`、`center`、`end` といった論理的な値や、`y-start`、`center`、`y-end` といった座標の値もあります。
+- 3 つの列は、物理的な値では `left`、`center`、`right` で表します。また、`start`、`center`、`end` といった論理的な値や、`x-start`、`center`、`x-end` といった座標の値もあります。
+
+中央のタイルの寸法は、アンカー要素の[包含ブロック](/ja/docs/Web/CSS/Containing_block)によって定義され、中央のタイルとグリッドの外縁との間の距離は、位置指定要素の包含ブロックによって定義されます。
+
+`position-area` プロパティの値は、上記の行と列の値に基づいて 1 つまたは 2 つの値で構成され、要素が配置されるべきグリッドの領域を定義するためのスパニングオプションが利用可能です。
+
+例えば、
+
+2 つの値を指定することで、特定のグリッドマスに配置することができます。例えば、
+
+- `top left`（等価な論理値は `start start`）は、位置指定要素を左上の位置に配置します。
+- `bottom center`（等価な論理値は `end center`）は、位置指定要素を下中央の位置に配置します。
+
+行または列の値と `span-*` の値を指定することができます。最初の値は、位置指定要素を配置する行または列を指定し、初期状態ではその中央に配置しますが、もう 1 つの値で、その列をまたがる量を指定します。例えば、
+
+- `top span-left` は、位置指定要素を一番上の行に配置し、その行の中央と左のタイルにまたがるようにします。
+- `y-end span-x-end` は、位置指定要素を y 方向の列の末尾に配置し、その列の中央と x 方向の末尾のタイルにまたがるようにします。
+- `block-end span-all` は、配置された要素をブロック方向の末尾の行に配置し、その行のinline-start、center、inline-endタイルにまたがるようにします。
+
+値を 1 つだけ指定した場合、どの値が設定されているかによって効果が異なります。
+
+- 物理的な端の値 (`top`, `bottom`, `left`, `right`) または軸の値 (`y-start`, `y-end`, `x-start`, `x-end`) は、もう一方の値が `span-all` であるかのように動作します。例えば、`top` は `top span-all` と同じ効果です。
+- 論理的な端の値（`start` または `end`）は、もう一方の値が同じ値に設定されているかのように動作します。例えば、`start` は `start start` と同じ効果があります。
+- `center` の値は、両方の値が `center` に設定されている場合と同じように動作します（つまり、`center center`）。
+
+> [!NOTE]
+> 利用可能なすべての値の詳細については、[``](/ja/docs/Web/CSS/position-area_value) 値の参照ページをご覧ください。論理値と物理値を混在させると、宣言が無効になります。
+
+これらの値をいくつか示してみましょう。この例では、HTML とベース CSS は前の例と同じものを使用していますが、 {{htmlelement("select")}} 要素を追加して、配置された要素の `position-area` 値を変更できるようにしています。
+
+```html hidden
+
+ 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.
+
+
+⚓︎
+
+
+
+
+ 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.
+
+
+
+ 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.
+
+
+
+```
+
+```css hidden
+.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;
+}
+
+.anchor {
+ anchor-name: --myAnchor;
+}
+
+body {
+ width: 50%;
+ margin: 0 auto;
+}
+
+form {
+ background: white;
+ border: 1px solid black;
+ padding: 5px;
+}
+
+select {
+ display: block;
+ margin-top: 5px;
+}
+
+form {
+ position: fixed;
+ top: 0;
+ right: 2px;
+}
+```
+
+情報ボックスは CSS を適用して固定位置を設定しており、アンカーに関連付けられています。読み込み時には、`position-area: top;` でアンカーに固定されるように設定され、 position-area のグリッドの最上部に配置されます。これは、`` メニューから異なる値を選択すると上書きされます。
+
+```css hidden
+.infobox {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ border-radius: 10px;
+ font-size: 1rem;
+}
+```
+
+```css
+.infobox {
+ position: fixed;
+ position-anchor: --myAnchor;
+ position-area: top;
+}
+```
+
+また、`` メニューから選択した新しい `position-area` 値を情報ボックスに適用するための短いスクリプトも含まれています。
+
+```js
+const infobox = document.querySelector(".infobox");
+const selectElem = document.querySelector("select");
+
+selectElem.addEventListener("change", () => {
+ const area = selectElem.value;
+
+ // 選択ボックスで選択した値を position-area に設定
+ infobox.style.positionArea = area;
+});
+```
+
+`` メニューから新しい `position-area` 値を選択して、情報ボックスの位置にどのような影響があるか確認してみてください。
+
+{{ EmbedLiveSample("Setting an `position-area`", "100%", "250") }}
+
+### 位置指定要素の幅
+
+例えば、上記の例では、位置指定された要素のサイズを明示的に指定していません。 意図的にサイズ指定を省略することで、それが引き起こす動作を観察できるようにしてあります。
+
+配置された要素が明示的なサイズ指定なしに `position-area` グリッドセルに配置されると、指定されたグリッド領域に配置され、{{cssxref("width")}} が {{cssxref("max-content")}} に設定されているかのように動作します。 そのサイズは、その[包含ブロック](/ja/docs/Web/CSS/Containing_block)サイズ（コンテンツの幅）に従って決定されます。 このサイズは、`position: fixed` の設定によって強制的に決定されます。 自動的にサイズが決定され、絶対位置指定された要素は、自動的にサイズが決定され、テキストコンテンツに合わせて必要に応じて幅が広げられますが、ビューポートの端によって制約されます。この場合、グリッドの左辺に `left` または `inline-start` 値で配置された場合、テキストは折り返されます。アンカー要素の `max-content` サイズがアンカーよりも狭い場合、または短い場合、アンカーのサイズに一致するように拡大することはありません。
+
+`position-area: bottom center` のように、配置された要素が垂直方向に中央揃えされている場合、指定されたグリッドセルに配置され、幅はアンカー要素と同じになります。この場合、その最小の高さは、アンカー要素の包含ブロックサイズになります。`min-width` が {{cssxref("min-content")}}、つまり、最も長い単語と同じ幅以上になるため、はみ出すことはありません。
+
+## `anchor-center` を使用してアンカーの中央に配置
+
+`position-area` の `center` 値を使用して、アンカーに配置された要素を中央揃えにすることができますが、インセットプロパティと `anchor()` 関数を結合すると、正確な位置をより詳細にコントロールすることができます。CSS のアンカー位置指定では、`position-area` ではなくインセットプロパティを使用してアンカーに結びつける場合、アンカーに配置された要素をアンカーに対して中央揃えにする方法が指定されています。
+
+{{cssxref("justify-self")}}, {{cssxref("align-self")}}, {{cssxref("justify-items")}}, {{cssxref("align-items")}} の各プロパティ（およびその一括指定である {{cssxref("place-items")}} および {{cssxref("place-self")}}）は、開発者がさまざまなレイアウトシステム内で要素をインラインまたはブロック方向に簡単に配置できるようにするために用意されています。例えば、フレックスチャイルドの場合、メインまたは交差軸に沿って配置することができます。CSS のアンカー位置指定では、これらのプロパティに追加の値として、`anchor-center` が提供されています。これは、位置指定された要素を既定のアンカーの中心に配置します。
+
+例えば、前回と同じHTMLとベースCSSを使用します。情報ボックスには修正された位置指定が指定され、アンカーの下端に固定されています。 `justify-self: anchor-center` を使用して、アンカーの中心に水平に中央揃えされていることを確認します。
+
+```html hidden
+
+ 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.
+
+
+⚓︎
+
+
+
+
+ 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.
+
+
+
+ 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.
+
+```
+
+```css hidden
+.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;
+ anchor-name: --myAnchor;
+}
+
+body {
+ width: 50%;
+ margin: 0 auto;
+}
+
+.infobox {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ border-radius: 10px;
+ font-size: 1rem;
+}
+```
+
+```css
+.infobox {
+ position: fixed;
+ position-anchor: --myAnchor;
+ top: calc(anchor(bottom) + 5px);
+ justify-self: anchor-center;
+}
+```
+
+これは、アンカー位置指定された要素を、そのアンカーの真下に配置します。
+
+{{ EmbedLiveSample("Centering on the anchor using `anchor-center`", "100%", "250") }}
+
+## アンカーのサイズに応じて要素をサイズ変更
+
+要素をアンカーの位置に関連して位置指定するだけでなく、サイズ指定プロパティ値内で [`anchor-size()`](/ja/docs/Web/CSS/anchor-size) 関数を使用して、要素をアンカーのサイズに関連してサイズ指定することもできます。
+
+`anchor-size()` の値を受け入れることができるサイズ指定プロパティには、次のようなものがあります。
+
+- {{cssxref("width")}}
+- {{cssxref("height")}}
+- {{cssxref("min-width")}}
+- {{cssxref("min-height")}}
+- {{cssxref("max-width")}}
+- {{cssxref("max-height")}}
+- {{cssxref("block-size")}}
+- {{cssxref("inline-size")}}
+- {{cssxref("min-block-size")}}
+- {{cssxref("min-inline-size")}}
+- {{cssxref("max-block-size")}}
+- {{cssxref("max-inline-size")}}
+
+`anchor-size()` 関数は {{cssxref("length")}} 値に解決されます。構文は次のようになります。
+
+```plain
+anchor-size( , )
+```
+
+- ``
+ - : 相対指定するアンカー要素の [`anchor-name`](/ja/docs/Web/CSS/anchor-name) プロパティの値として設定する `` の名前。省略した場合は、その要素の既定のアンカー（[`position-anchor`](/ja/docs/Web/CSS/position-anchor) プロパティで参照されているアンカー）が使用されます。
+- [``](/ja/docs/Web/CSS/anchor-size#anchor-size)
+ - : 位置指定された要素のサイズが相対となるアンカー要素の寸法を指定します。 物理的な値（`width` または `height`）または論理的な値（`inline`, `block`, `self-inline`, `self-block`）を使用して表現することができます。
+- {{cssxref("length-percentage")}}
+ - : 要素が絶対位置指定または修正された位置指定ではない場合、またはアンカー要素が存在しない場合に、代替値として使用するサイズを指定します。
+
+最もよく使用する `anchor-size()` 関数は、既定のアンカーの寸法を参照するだけです。また、{{cssxref("calc")}} 関数内でそれらを使用して、位置指定された要素に適用されるサイズを変更することができます。
+
+例えば、このルールでは、位置指定された要素の幅を既定のアンカー要素の幅と等しくします。
+
+```css
+.elem {
+ width: anchor-size(width);
+}
+```
+
+このルールでは、位置指定された要素のインラインサイズをアンカー要素のインラインサイズの 4 倍に設定します。この乗算は、`calc()` 関数内で実行されます。
+
+```css
+.elem {
+ inline-size: calc(anchor-size(self-inline) * 4);
+}
+```
+
+例えば、HTML と基本 CSS は、フォーカス可能なアンカー要素に [`tabindex="0"`](/ja/docs/Web/HTML/Global_attributes/tabindex) 属性が指定されていることを除いて、これまでの例と同じです。情報ボックスは修正された位置指定が指定され、これまでと同様にアンカーに関連付けられています。しかし、今回は `position-area` を使用してアンカーの右側に固定し、アンカーの幅の 5 倍の幅を指定しています。
+
+```html hidden
+
+ 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.
+
+
+⚓︎
+
+
+
+
+ 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.
+
+
+
+ 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.
+
+```
+
+```css hidden
+.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;
+}
+
+.anchor {
+ anchor-name: --myAnchor;
+}
+
+body {
+ width: 50%;
+ margin: 0 auto;
+}
+
+.infobox {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ border-radius: 10px;
+ font-size: 1rem;
+}
+```
+
+```css
+.infobox {
+ position: fixed;
+ position-anchor: --myAnchor;
+ position-area: right;
+ margin-left: 5px;
+ width: calc(anchor-size(width) * 5);
+}
+```
+
+さらに、{{cssxref(":hover")}} および {{cssxref(":focus")}} に対してアンカー要素の {{cssxref("width")}} を拡大し、{{cssxref("transition")}} を適用して、状態が変化したときにアニメーションするようにします。
+
+```css
+.anchor {
+ text-align: center;
+ width: 30px;
+ transition: 1s width;
+}
+
+.anchor:hover,
+.anchor:focus {
+ width: 50px;
+}
+```
+
+アンカー要素にカーソルを合わせるか、タブキーで移動すると、位置指定された要素がアンカーの拡大に合わせて拡大します。これは、アンカーと位置指定された要素のサイズが相対的なものであることを示しています。
+
+{{ EmbedLiveSample("Sizing elements based on anchor size", "100%", "250") }}
+
+## 関連情報
+
+- [CSS アンカー位置指定](/ja/docs/Web/CSS/CSS_anchor_positioning)モジュール
+- [オーバーフローの扱い: 代替や条件付き非表示](/ja/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding)
+- [位置指定](/ja/docs/Learn/CSS/CSS_layout/Positioning)
+- [CSS 論理プロパティと値](/ja/docs/Web/CSS/CSS_logical_properties_and_values)モジュール
+- [CSS におけるアイテムのサイズ設定](/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
diff --git a/files/ja/web/css/css_anchor_positioning/using/position-area.drawio b/files/ja/web/css/css_anchor_positioning/using/position-area.drawio
new file mode 100644
index 00000000000000..7af85ba4cb7bd2
--- /dev/null
+++ b/files/ja/web/css/css_anchor_positioning/using/position-area.drawio
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/files/ja/web/css/css_anchor_positioning/using/position-area.png b/files/ja/web/css/css_anchor_positioning/using/position-area.png
new file mode 100644
index 00000000000000..bc9c414692e44d
Binary files /dev/null and b/files/ja/web/css/css_anchor_positioning/using/position-area.png differ