CSS アンカー位置指定

リファレンス

プロパティ

• anchor-scope
• anchor-name
• position-anchor
• position-area
• position-try-fallbacks
• position-try-order
• position-try 一括指定
• position-visibility

アットルールと記述子

• @position-try

関数

• anchor()
• anchor-size()

データ型と値

• anchor-center
• <anchor-side>
• <anchor-size>
• <position-area>
• <try-size>
• <try-tactic>

HTML 属性

• anchor

インターフェイス

• CSSPositionTryDescriptors
• CSSPositionTryRule
• HTMLElement.anchorElement

ガイド

CSS アンカー位置指定の使用

基本的なアンカー位置指定の概念を紹介するガイドで、アンカーへの関連付け、位置指定、相対的なサイズ指定の方法を示します。

オーバーフローの扱い: 代替や条件付き非表示

CSS アンカー位置指定で提供された、アンカーで位置指定された要素がコンテナーそのものやビューポートから溢れるのを防ぐためのメカニズムのガイドです。位置指定の代替オプションや、条件付きで要素を隠す方法などが含まれます。

アンカー付きコンテナークエリーの使用

アンカー付きコンテナークエリーを使用して、アンカー位置指定要素に対して、その要素でどの代替オプションが有効かによって、条件に応じてスタイルを適用する方法について説明します。

関連概念

• CSS 論理的プロパティと値モジュール
  • inset-block-start
  • inset-block-end
  • inset-inline-start
  • inset-inline-end
  • inset-block
  • inset-inline
  • inset 一括指定
  • inline-size
  • min-block-size
  • min-inline-size
  • block-size
  • max-block-size
  • max-inline-size
  • margin-block
  • margin-block-end
  • margin-block-start
  • margin-inline
  • margin-inline-end
  • margin-inline-start
  • インセットプロパティ
• CSS 位置指定レイアウトモジュール:
  • top
  • left
  • bottom
  • right
• CSS ボックスモデルモジュール:
  • width
  • height
  • min-width
  • min-height
  • max-width
  • max-height
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
• CSS ボックス配置モジュール:
  • align-items
  • align-self
  • justify-items
  • justify-self
  • place-items
  • place-self

仕様書

関連情報

• CSS スクロール固定モジュール
• 学習: CSS 位置指定
• CSS 論理的プロパティと値モジュール
• CSS によるサイズ設定