pintaiさん

不具合・カスタマイズ対象ページのURL：

相談内容：

解決のために試したこと：

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

このページ上部の注意書きがないと誰も何をどう判断して良いものかわからないと思います。
何かしらの情報を書き込んでください。

こんにちは。私も同じ状況です。iPhone実機でもSimulatorでも再現しましたので動画にしてみました。

https://youtu.be/mo50vZbvRDI

下にスクロールするとフッターモバイルボタンは消えますが、一番下まで行くとまた表示されるのでCopyright部分が隠れてしまいます。スクロールしている途中には見えるので特に不都合を感じていませんでしたが、ロゴマークがある場合は気になるかもしれませんね。

「Androidと同じ表示」にはなりませんが、こちらのCSSでコピーライトの下に余白が追加できます。コピーライトがモバイルボタンで隠れることは回避できます。

.footer-bottom-content .copyright{
  margin-bottom: 50px;
}

数値はパソコン・モバイルの表示を見つつ、好み数値に変更してください。

iPhoneとAndroidを同様の挙動にできるかは、ちょっと私では分かりません。こちらは詳しい方の書き込みをお待ちください。

ただiPhoneは独特な挙動が多いので、Android同様の動作は難しい可能性もあります。その場合はCSSで対応していただくことになると思います。

iPhoneの他のブラウザでは、どういう挙動になるのか、お試しいただきたいです。

ブラウザ固有の挙動の可能性もあると思います。

pooh　さん、動画アップまで行っていただきありがとうございます。
昨日は、見た画面はこの動きです。

さる子　さん、ありがとうございます。
iPhoneだといい具合です。
Androidだとロゴの下がちょっとスペースができます。

ｍｋ２　さん、ありがとうございます。
先程、iPhone８の中古を買ってきて動作確認をしましたが、Google ChromeやOperaでも同じような動作でした。

投票2020さん、環境情報は下記になります。
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.7.1
カテゴリ数：5
タグ数：3
ユーザー数：1
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
SiteGuard WP Plugin 1.6.0
WP Multibyte Patch 2.9
----------------------------------------------

Cocoon使用例のような紹介ページがございましたが、こちらに掲載されていますサイトは、同じような現象がでるようでした。

https://funfunjp.com/cocoon-site-design

copyright部分は、なるべく隠れないようにしたいな・・とは思ったもので、ご迷惑をかけてしまったようですみません。

投稿者:: @pintai

先程、iPhone８の中古を買ってきて動作確認をしましたが、Google ChromeやOperaでも同じような動作でした。

ということは、iPhone固有のものかもしれませんね。

poohさんの動画を拝見した感じでは、上に引っ張った後、「戻る」動きをしているように見えます。

戻ってしまうので、モバイルフッターメニューが表示されるのだと思います。

私のAndroidでは、上に引っ張っても「戻る」という動きはしないです。
そのため、モバイルフッターメニューは表示されないのだと思います。

Androidでも、1番下まで移動して、指でほんの少しだけ下へ動かすとモバイルフッターメニューが表示されます。
この動きを、iPhoneは自然にしてしまっているのだと思います。

さる子さんご提示のように、余白を作るしかなさそうには思いますが・・・。

ｍｋ２　さん、ありがとうございます。

昨日からGoogleにて検索しまくっているのですが、下記のようなページを見つけました。

https://newsite-make.com/reflection-coping/

safariでのcssが効かない時の対処はこうする　と記載してあるところがあって、逆に考えると、safariだけの設定？になるのかと思って、さる子さんのご回答を元に、下記のようにしてみました。

_:lang(x)+_:-webkit-full-screen-document, .footer-bottom-content .copyright{
margin-bottom: 50px;
}

上記の書き方が、見様見真似で正しいのかどうかも分からないのですが、iPhone（safari）は上記が反映され、Androidスマホでは反映されていないようでした。
ただ、iPHONE（Opera）でみた場合、同様に、イメージ通りになっていたので、safariだけの設定じゃないのか・・と、？？？です。

ちなみに私が使用しているAndroidスマホは、Pixel4a(5g)です。

すみません。

ソースでも、引用でも、CSSの情報がうまく記載できません・・・。

文字が、一部、欠落します。

pintaiさん

フォーラム上部に案内があります。

トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）

HTMLではありませんが、notepad.pwに貼り付ければ問題ないはずです。

もしくは、テキストエディタに貼り付けて、テキストファイルとして添付・アップしても大丈夫です。
ローテクは意外と最強です。
（閲覧する側は、ダウンロードして開いてと手間が少し増えますが。）

ちなみに・・・。

pintaiさんがお書きになったものは、「CSSハック」と言われるものかと思います。

今も、これを使うのもなのか・・・と言われると、私には判断が付きません。

ブラウザ毎に対応を細かく指定していくということは、あまり歓迎されるものではないような気はします。

（そして、今回の話では、同じChromeでも、iPhoneとAndroidで挙動が違うという事に…？）

【ご参考】
css hacks 2020 ( IE11 / Edge / Chrome / Safari / Firefox )
https://qiita.com/feo52/items/b58de2c43e1ba7b10b2e

ブラウザ別のCSSハック
https://netamame.com/browser-css-hack/

Wikipediaには、以下のような記載もあります。
https://ja.wikipedia.org/wiki/CSS%E3%83%8F%E3%83%83%E3%82%AF

W3Cの標準仕様に従ったWebサイトを作成すれば、理想的には各ブラウザでの表示の差は生じない（あるいは少なくなる）ことになるが、実際にはブラウザによりCSSのサポートが異なり、また比較的サポートの遅れたブラウザが進んだブラウザに置き換わるまでには時間を要するため、表示の差異が生じる原因となる。特にIE5.5以前（IE6.0の互換モードなども含む）ではボックスモデルの解釈がW3C標準のものと異なり、widthプロパティの値にボーダーとパディングを含めていたことがこれらのブラウザが無視できないシェアを占めていた時期のWebサイト作成の障害の一つだった。解決法としてはブラウザ間での違いが目立たない値に指定する（例えばボックスモデルの問題はボーダーとパディングをともに0とする）などいくつかの方法が考えられるが、CSSハックはそうした実装の違いをCSSコーディングのテクニックで吸収する方法の一つである。

具体的には各ブラウザの実装状況やバグを逆手に取り、ブラウザによって異なる宣言を読み込ませることとなる。ハックの中には対象とするブラウザ以外にも効果を及ぼすものもあるため、そうしたブラウザ向けに正規の方法で値を指定し直す場合もある。CSSハックの定義は曖昧で、一部のブラウザのみが実装しているセレクタなどを単に使用しただけのものをCSSハックに含めるかは場合による。

ブラウザの置き換えは常に続いているため、あるブラウザを対象としたCSSハックはそのブラウザのシェア低下とともに意味が薄れることになるが、一方で別のブラウザを対象とした新たなCSSハックが生み出される可能性もある。またブラウザのバグを利用するものであるため、サイト作成時点では問題なく使用できたとしても、将来新しいブラウザがリリースされる際にバグが修正されることで古いブラウザ向けの宣言が制作者が意図に反して適用される可能性がある。実際にIE7のリリースによりそれ以前は通用していたCSSハックに問題が発生することとなった。CSSの記法として妥当(valid)でない（Validatorでinvalidと判定される）ものも存在する。こうした点から使用に関しては種々の議論がある。

これで大丈夫でしょうか。
ただ、大した情報ではございませんが・・。

https://notepad.pw/share/w1dtsz9lc

pintaiさん

notepad.pwは大丈夫だと思います。

ご提示いただいたコードを、サーバーおよびローカルの両テスト環境に反映してみました。

Windows－Chrome
Android－Chrome

上記には反映されないようです。

が…。
逆にSafariへの反映確認は私にはできません。

WindowsやAndroidには、他のブラウザも入れてはいますが、今回は他のブラウザで確認はしておりません。

こういうコードは、全環境が整った方しかテストができないという点では、難しさを感じます。
また、ブラウザの仕様などが変わっていく中で、どう対応していくかという難しさもあると思います。
（個人的には、こういうコードはあまり歓迎しないです。）

個別にご対応をなさるのよろしいかと思います。
（あくまでも自己責任という事で。）

できることならば、他のOS・ブラウザでどういう挙動になるのか、ご確認なさっておくのがベストかと思います。
（バージョン違いで挙動が違うことも考えられますので。）

Safariにのみ反映されるということは、MacやiPadでは、フッターの高さが伸びているということだと思いますし。

ｍｋ２　さん、ありがとうございます。

余計なことをしてしまいしたね。
コード削除しておきました。

今回の私が書き込んだものは、ハック？というものなんですね。
ブラウザ毎の対応をしていくのは、良くないということで、勉強になりました。
推奨されれないということで、お手上げ状態ですが、今回のことで色々勉強になりました。

色々ご迷惑をおかけしてすみません。

ご返信いただきました他の皆様もありがとうございました。m(_ _)m

@pintai 

結論を出す前に、一応わいひらさんの返信を待ったほうがいいかと思います。もしかしたらCocoon側で修正できる可能性もあります。できない可能性もありますが…。

若干誤解があるようですので。

別に、削除が必要なコードではないかと思います。
いくつかリンクした通り、広く知られているもののようです。

「CSSハック」という言葉の印象が良くないのかもしれませんが。

私が歓迎されないと書いたのは、ブラウザ別に個別に対応していくのは、どうなのかと思ったものです。
そして、W3C標準でないというところも、難しさを感じたという事です。
（ブラウザ別という意味では、ベンダープレフィックスというものもありますが、それは先行実装という位置づけだったように思いますし。）

標準的でないということは、いつ仕様が変わるか分かりませんし、バージョン違いで対応が変わる可能性もあります。

それを、メンテナンスし続けていくのは大変だという印象を持ったという事です。
（正式なアナウンスもされずに変わったりしそうですし。）

W3C標準でも、仕様は変わりますが、その際にはアナウンスもありますし。

そんなこんなで、個別にご対応なさるのは問題ないのではないかと思います。
（ただ、何かの標準にはしづらいと思った次第です。）

この方法を使うのか、それとも他に方法があるのか・・・。
そういうところは、わいひらさんのご判断かと思います。

誤解を招いてしまったようですので、その部分は申し訳なく思います。

投稿者:: @mk2_mk2

この方法を使うのか、それとも他に方法があるのか・・・。
そういうところは、わいひらさんのご判断かと思います。

上記は、Cocoonで対応する場合はということです。

（対応するしないや、する場合の方法など。何だか良い表現が見つからず、正しく表現できているのか分かりませんが・・・。）

個別にご対応なさるのは良いと思うんですよ。

念のため。

投稿者:: @pooh

こんにちは。私も同じ状況です。iPhone実機でもSimulatorでも再現しましたので動画にしてみました。

こちらのSimulatorというのはどういったものでしょうか。
僕はiPhoneを持っていないので、そのSimulatorというものがあるのでしたら、それで確認してみます。

できれば、不具合の出るiOSとSafariのバージョンも知りたいです。

前略

私のiPhoneは未だ6sでiosのバージョンは15.0.2です。

safariのバージョンは604.1のようです。

私のiPhone6sでもpintaiさんご指摘の症状となっています。

また、同じiPhone6sのFirefoxブラウザでも同様の症状です。

あまりスマホで閲覧しないので、いつからこうなっていたかはわかりません。

もしかしたら、iPhone特有のスクロールバウンス（弾んで少し戻る）が影響しているのかもしれませんが、これを無効化する方法がわからないので、やはり、ハックを使って試してみました。

Cocoon設定の「アクセス解析・認証」タブの「フッター用コード」に下の画像のJavaScriptのコードを記入し、

（※NotePadでも上手く保存してくれないようです）

子テーマのCSSファイルに以下を記入してみました。

.iPhone #footer {
    padding-bottom: 50px;
}

投稿者:: @leafytree

iPhone特有のスクロールバウンス

スクロールバウンスっていうんですね。
iPhoneユーザーではないので、初めてきました。

Chromeは、overscroll-behaviorプロパティを使用することで抑制できるようです。

https://developers.google.com/web/updates/2017/11/overscroll-behavior

https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior
（上記ではEdgeも対象外になっていますが、Can I useによると、今は対応しているっぽいです。）

ただ、肝心のSafariが対応していないようです。

「iNoBounce」というJavaScript(jQuery)プラグインもあるらしいですが・・・。
この辺りは良く分からないです、私の知識では。

これで解消するかも分からないです…。

バウンス効果が原因だと思います。

iPhone をお持ちの方で、以下をお試しいただける方はいらっしゃらないでしょうか。

親テーマの javascript.js の 110 行目の部分を…。

} else {

このように変更します。

} else if (footerCurrentPos - footerStartPos < -20) {

これで解決するでしょうか？

尚、上へのスクロール量が 20px 以上ないとフッターモバイルボタンが現れなくなります。20px は、AMP の同様の動作が 20px を採用しているので真似しました。

投稿者:: @akira

バウンス効果が原因だと思います。

iPhone をお持ちの方で、以下をお試しいただける方はいらっしゃらないでしょうか。

試してみたところ、一番下で弾んで戻ってもフッターモバイルボタンが現れなくなりました。
こちらで解決だと思います。

投稿者:: @yhira

こちらのSimulatorというのはどういったものでしょうか。

Simulatorは、Appleの開発環境Xcodeに含まれるツールで、macOS上でiPhoneやiPadの各機種をエミュレートしてiOSを動作させるものです。
Windowsマシンでは動作しないと思います。

@akira さん

ローカルのテストサイトでLocalのライブリンクでテストしてみました。

「-20」ですと、必要なスクロール量が多すぎて、フッターモバイルメニューが出てくるのが遅れてしまい、実用的ではないようです。

「-7」ですと、早くスクロールするとバウンドも大きくなり、フッターモバイルメニューが出てきてしまいます。

「-8」ですと、ギリギリなんとか出てこなくなるみたいです。

ただ、「-8」でも、フッターモバイルボタンが出てくる反応は少し遅くなるので、人によっては、反応が鈍くなったと感じる方もいるかもしれません。

@akiraさん　poohさん

「-8」でもかなり早くスクロールするとバウンドも多くなり、フッターモバイルメニューが出てきてしまいますが、通常のスクロール速度なら出てこないみたいです。

@mk2_mk2 さん

「overscroll-behaviorプロパティ」も一応試してみたのですが、やはり上手くいきません。

「iNoBounce」も少しだけ試してみたのですが、どうも上手くいきませんでした。使い方がわからないだけかもしれませんが、どなたかのツイートで、今は使えないような情報もありました。（正確なことはよくわかりません）

Akiraさんのコードで「-8」に設定してゆっくりスクロールしたとき

Akiraさんのコードで「-8」に設定してちょっと強めにスクロールしたとき

こんなに書き込みがあるとは、ちょっとびっくりしております。
いろいろすみません。

結論から言いますと、私の場合・・になりますが、昨日記載いたしましたCSSハックで対応できています。

わいひらさんの体調がよくなりご判断をいただくまでの間は、このハックでいこう考えています。
こちらはｍｋ２さんが書かれたように自己責任で・・ということで。

また、今回、私は気になったのでトピックに挙げたのですが、歴史のあるCocoonのフォーラムで、そもそもこちらに話題に上がっていない（iPhoneを使っていらっしゃるCocoon運営者もたくさんいると想定し・・）時点で、それほど重要なことでもないのではないかとも感じ、書き込むことでもなかったのか・・とちょっと恥ずかしくもあります。

ただ、ハックという存在があるのは、勉強になりました。
ブラウザー依存（特にIEという存在）というものがあって、標準仕様では対応できない不具合？に一時的に対応するものだと考えますので、本現象においては自己責任において使用したいと思います。

私がハック情報を削除したのは、有識者（私よりもこの分野に関し知識のある方）の方が望ましくないと言われている情報を載せ、Cocoonを使用していらっしゃるユーザーの方がこの情報をみて、運営していらっしゃるサイトに今後混乱を招くことがないようにと思ったからです。

あくまで自己責任なので。

この書き込み自体が、わいひらさんや書き込みいただきました方のお時間を強いいてしまったことをお詫びいたします。

ひとまず、私が購入したiPhoneの情報としまして下記に記載させていただきます。

機種：iPhone8
Ver：14.8.1
通信回線：Docomo

ブラウザー：safari（14.1.2）
検索エンジン設定：Google（デフォルト設定）

@akira さん

私のサイトに「-8」で適用してみました。

Androidでは、どうでしょうか？

エイチttps://leafytree.info/

@leafytreeさん

確かに-20だとページ下でバウンドしてもほとんど出てこなくなりますが、上に戻ったときになかなか出てこないですね。

-8くらいだと、自分の場合もページ下で出てきたり出てこなかったり微妙なところです。
操作する人やページの長さによってもどの程度の速度でスクロールするかは違ってきますから、最適値はこれ、とは決めにくいと思います。
自分は表示されても特に不都合はないので、-20よりは-8の方がありがたいです。

@pintaiさん

自分は気にしていませんでしたが、サイトの作りによっては気になる方もいらっしゃるのはわかります。
書き込まれたことで、皆さんが問題点を認識して改善に繋がるのは良いことだと思います。

>> pintai さん

pintai さんのご質問は、とても素晴らしいと思います。誰も気付いていなかった不具合が分かったのですから。

>> リフィトリーさん

私の感覚だと Android で違和感なく操作できます。鈍いとは思いませんでした。

リフィトリーさんのご意見を参考に、私であれば javascript.js の 104 行目から 112 行目をこのように変更します。

if (footerCurrentPos - footerStartPos > 20) {
  if(footerCurrentPos >= 100) {
    // footerMenu.css("bottom", "-" + footerHeight + "px");
    // footerMenu.css("bottom","-"+footerHeight+"+env(safe-area-inset-bottom)px");
    footerMenu.css("transform","translateY(calc(env(safe-area-inset-bottom) + " + footerHeight + "px))");
  }
} else if (footerCurrentPos - footerStartPos < -10) {
  footerMenu.css("transform", "translateY(0)");
}

変更点は 3 つあります。

① 下へのスクロール量が 20px 以上の時に、フッターモバイルボタンを隠す

② 上へのスクロール量が 10px 以上の時に、フッターモバイルボタンを再表示する

③ GPU アクセラレーションを効かせるために、bottom ではなくtransform: translateY() を使う（ブラウザの負荷を抑えられる上に、アニメーションがスムーズになる）

スクロールでの表示・再表示をする場合は、スクロール量に余裕を持たせるのが一般的ではあります。余裕がなく 1px のスクロールで動いてしまうと、性急な動きが理由で頭痛やめまい、吐き気などの症状が出る方がいらっしゃるためです。あとは、この余裕をどれほどにするかなのかな。

そもそも余裕を持たせるかを含め、わいひらさんや皆さんのご判断におまかせします。

@akira さん

早速、私のサイトに適用してみました。（Akiraさんのコードそのままで、何も変更していません）

エイチttps://leafytree.info/

車のハンドル同様に、ある程度の「あそび」が必要ということですね ? 

しばらく、このままにしておこうと思います。

投稿者:: @pintai

歴史のあるCocoonのフォーラムで、そもそもこちらに話題に上がっていない（iPhoneを使っていらっしゃるCocoon運営者もたくさんいると想定し・・）時点で、それほど重要なことでもないのではないかとも感じ

iPhoneとAndroid両方で確認できる、確認する人がほとんどいないのだと思います。今までコピーライトが隠れてしまうのは仕様だと思っていたので…。まさかiPhoneだけだったとは思いませんでした。

iPhoneとAndroidの差異を気付ける人はあまりいないので、貴重な情報だと思います。

iPhoneからリフィトリーさんのサイトを触らせていただきました。

コピーライトが隠れることはなくなりましたが今までは「下までスクロールするとフッターメニューが出る」のが当たり前だったので、じゃっかん違和感があるというか、表示の仕方が急に変わって戸惑うというか…。

iPhoneしか使ってなかった人は「モバイルフッターメニューの表示がおかしくなった」バグと思うかもしれません。バグの修正（仕様変更？）するときは周知があったほうがいいと思います。

わいひらさんのご参考になるように・・

Akiraさんの

https://wp-cocoon.com/community/postid/58261/

のコードを適用したとき。

Akiraさん

出先でよく確認できないのですが、私のサイトのフッターモバイルボタンが正常に機能していないようです。

スライドインサイドバーや、スライドインメニューがフッターモバイルメニューの高さ分しか表示されない場合がほとんどのようです。

そのままにしてありますので、ご確認いただけますと助かります。

リフィトリーさんが仰っているのは、以下のことと思われます。

@akira さん

どうも、「transform: translateY()」が影響しているっぽいですが、せっかく良かれと導入されたものなので、生かす手はありますでしょうか？

投稿者:: @leafytree

Akiraさんのコードで「-8」に設定してゆっくりスクロールしたとき

 RPReplay_Final1638061758.mov

投稿者:: @leafytree

Akiraさんのコードで「-8」に設定してちょっと強めにスクロールしたとき

 rokuga-02.mov

とりあえず見てみた感じ、こちらで十分のような。

Akiraさんが最初に書かれた添付画像の修正案だと、サイドバー表示にエラーは出ないんですよね？

エラーが出ない方法として、とりあえずはこっちにしておくというのもいいのかもしれない。
※動作確認はしていません。

      if (footerCurrentPos - footerStartPos > 20) {
        if(footerCurrentPos >= 100) {
          // footerMenu.css("bottom", "-" + footerHeight + "px");
          // footerMenu.css("bottom","-"+footerHeight+"+env(safe-area-inset-bottom)px");
          footerMenu.css("bottom","calc( -1 * (env(safe-area-inset-bottom) + " + footerHeight + "px) )");
        }
      } else if (footerCurrentPos - footerStartPos < -10) {
        footerMenu.css("bottom", 0);
      }

@yhira さん

ちょっと今取り込み中なので、少し後で試してみます。

Akiraさんの返信も待ってみたいと思います。

@yhira さん　Akiraさん

とりあえず、私のサイトはわいひらさんの書いてくださったものに差し替えました。

差し替え後は、モバイルボタンの不具合は解消しているようです。

大変申し訳ないです。translate の指定がある子要素の存在を忘れていました。

現状はスクロール連鎖を止められないため、translate が使えませんでした。別途 JavaScript の追加が必要ですので、bottom のままがいいと思います。

まとめると、下の 3 択でしょうか。-8px や 20px は調整をお願いします。

① とりあえず、今回の問題を解決するもの。上スクロールの量だけを調整。

} else if (footerCurrentPos - footerStartPos < -8) {

② 上スクロールの量の変更に合わせ、下スクロールの量も調整するもの。

if (footerCurrentPos - footerStartPos > 20) {
  if(footerCurrentPos >= 100) {
    // footerMenu.css("bottom", "-" + footerHeight + "px");
    // footerMenu.css("bottom","-"+footerHeight+"+env(safe-area-inset-bottom)px");
    footerMenu.css("bottom","calc( -1 * (env(safe-area-inset-bottom) + " + footerHeight + "px) )");
  }
} else if (footerCurrentPos - footerStartPos < -8) {
  footerMenu.css("bottom", 0);
}

③ jQuery は変更せず、CSS で何とかする。

@akira さん

ありがとうございます。

Akiraさんのおかげで解決へ向かいそうです。

@yhira さん Akiraさん

私のサイトはAkiraさんの最初のご案内のJavaScript.jsの110行目を

} else {

から、

} else if (footerCurrentPos - footerStartPos < -8) {

に書き換える、という状態しました。

と申しますのも、今回の件は、iPhonenのバウンス効果が問題であって、他には問題がなかったので、修正は必要最小限で良いのかもしれないと考えたからです。

Akiraさんの動作にあそびを持たせる、という考え方もとてもよく理解できますが、必要最小限という意味では、Akiraさんの最初のご提案かなと思った次第です。

とりあえず、私のサイトはこのようにしてあります。

動作確認にご利用ください。

「頭痛やめまい、吐き気」など怪しげなことを私が書いているので、参考情報を追記しておきます。

WCAG 2.1　達成基準 2.3.3: インタラクションによるアニメーションを理解する

日本語翻訳： https://waic.jp/docs/WCAG21/Understanding/animation-from-interactions.html

原文： https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html