From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/resizeobserver/index.html | 89 ++++++++++++++++++++++ .../api/resizeobserver/resizeobserver/index.html | 86 +++++++++++++++++++++ 2 files changed, 175 insertions(+) create mode 100644 files/ja/web/api/resizeobserver/index.html create mode 100644 files/ja/web/api/resizeobserver/resizeobserver/index.html (limited to 'files/ja/web/api/resizeobserver') diff --git a/files/ja/web/api/resizeobserver/index.html b/files/ja/web/api/resizeobserver/index.html new file mode 100644 index 0000000000..84e0d89431 --- /dev/null +++ b/files/ja/web/api/resizeobserver/index.html @@ -0,0 +1,89 @@ +--- +title: ResizeObserver +slug: Web/API/ResizeObserver +tags: + - API + - Experimental + - ResizeObserver + - インターフェイス + - オブザーバー + - コンテンツボックス + - バウンディングボックス + - リサイズオブザーバー API + - リファレンス +translation_of: Web/API/ResizeObserver +--- +
{{APIRef("Resize Observer API")}}{{SeeCompatTable}}
+ +

ResizeObserver インターフェイスは、{{domxref('Element')}} のコンテンツ矩形または {{domxref('SVGElement')}} のバウンディングボックスへの変更を監視します。コンテンツ矩形は、コンテンツを配置できるボックスです。つまり、ボーダーボックスからパディングを引いたものです。(ボーダーとパディングの説明はボックスモデルを見てください。)

+ +

ResizeObserver は、無限のコールバックループとそれ自身のコールバック関数でサイズ変更することによって生じるであろう循環的な依存関係を避けます。これは、後続のフレームで DOM のより深い要素のみを処理することによって行われます。実装が仕様に従っている場合は、描画の前およびレイアウトの後にリサイズイベントを呼び出す必要があります。

+ +

コンストラクター

+ +
+
{{domxref("ResizeObserver.ResizeObserver", "ResizeObserver()")}}
+
新しい ResizeObserver オブジェクトを作成して返します。
+
+ +

プロパティ

+ +

なし

+ +

イベントハンドラー

+ +

なし

+ +

メソッド

+ +
+
{{domxref('ResizeObserver.disconnect()')}}
+
監視対象のすべての {{domxref('Element')}} ターゲットの監視を終了します。
+
{{domxref('ResizeObserver.observe()')}}
+
指定された {{domxref('Element')}} の監視を開始します。
+
{{domxref('ResizeObserver.unobserve()')}}
+
指定された {{domxref('Element')}} の監視を終了します。
+
+ +

例

+ +

次の例では、幅の変更に応じてボックスの境界線の半径を変更します。

+ +
const resizeObserver = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
+  }
+});
+resizeObserver.observe(document.querySelector('.box:nth-child(2)'));
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('Resize Observer','#resize-observer-interface','ResizeObserver')}}{{Spec2('Resize Observer')}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.ResizeObserver")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/resizeobserver/resizeobserver/index.html b/files/ja/web/api/resizeobserver/resizeobserver/index.html new file mode 100644 index 0000000000..6cb3e3938c --- /dev/null +++ b/files/ja/web/api/resizeobserver/resizeobserver/index.html @@ -0,0 +1,86 @@ +--- +title: ResizeObserver.ResizeObserver() +slug: Web/API/ResizeObserver/ResizeObserver +tags: + - API + - Experimental + - ResizeObserver + - オブザーバー + - コンストラクター + - リサイズオブザーバー API + - リファレンス +translation_of: Web/API/ResizeObserver/ResizeObserver +--- +
{{APIRef("Resize Observer API")}}
+ +

ResizeObserver コンストラクターは、 {{domxref('Element')}} のコンテンツまたは境界の矩形、または {{domxref('SVGElement')}} のバウンディングボックスに対する変更を監視する新しい {{domxref("ResizeObserver")}} オブジェクトを作成します。

+ +

構文

+ +
var ResizeObserver = new ResizeObserver(callback)
+ +

引数

+ +
+
callback
+
監視中のものに寸法の変更が発生するたびに呼び出される関数です。関数は2つの引数で呼び出されます。 +
+
entries
+
{{domxref('ResizeObserverEntry')}} オブジェクトの配列で、それぞれの変更の後で要素の新しい寸法にアクセスするために使用することができます。
+
observer
+
ResizeObserver 自身への参照で、必要に応じてコールバック内から確実にアクセスできます。これは、たとえば特定の条件に達したときにオブザーバーを自動的に監視解除するために使用できますが、必要ない場合は省略することができます。
+
+ +

コールバックは一般に、次のパターンに従います。

+ + 
function(entries, observer) {
+  for (let entry of entries) {
+    // Do something to each entry
+    // and possibly something to the observer itself
+  }
+}
+
+
+ +

例

+ +

次のスニペットは resize-observer-text.html (ソースを表示) の例から取ったものです。

+ +
const resizeObserver = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    if(entry.contentBoxSize) {
+      h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
+      pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
+    } else {
+      h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
+      pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
+    }
+  }
+});
+
+resizeObserver.observe(divElem);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Resize Observer','#dom-resizeobserver-resizeobserver-callback-callback','ResizeObserver')}}{{Spec2('Resize Observer')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ResizeObserver.ResizeObserver")}}

-- cgit v1.2.3-54-g00ecf