情報表示フッターの検証コンテンツ

1. 端末の回転やマルチタスクでアドレスバーが伸縮した際にも、メイン領域が 100dvh を基準に再計算されることを確認してください。

2. メイン領域に設定した余白と下部パディングが、固定フッターの高さを常に考慮しているため、最後のコンテンツが隠れないかどうかをチェックします。

3. iOS Safari ではスクロールに応じてアドレスバーが隠れる挙動がありますが、dvh を利用することで高さが自然に再計算されることを想定しています。

4. Android Chrome ではソフトウェアキーボードの出現時にレイアウトが縮むため、フォーム入力中にメインコンテンツが意図した位置でスクロール可能かを確認してください。

5. safe-area-inset-bottom を考慮したパディングにより、ノッチ付き端末でもフッターがシステムバーと干渉しないことをテストします。

6. 固定フッターの祖先要素に transform を付けないというルールが守られているため、座標基準がズレないことをチェックしてください。

7. メイン領域は overflow-y: auto で構成されているので、body 要素がスクロールしないことをデベロッパーツールで確認できます。

8. デバッグ用にスクロール位置を変更しても、フッターの位置が常にビューポート下部にロックされることを観察してください。

9. 入力欄付きのフッターでは textarea が自動でリサイズされないよう max-height を設定し、スクロール操作との干渉を避けています。

10. voice over などのスクリーンリーダー利用時に、主要領域へランドマークを移動できることを確認するため、main 要素を利用しています。

11. 固定ヘッダーは単純な Flex コンテナとして扱い、z-index をフッターより下に設定することで重なり順が明示されています。

12. Safari の `inputmode` や `enterkeyhint` などを利用すると、送信ボタンとの組み合わせでさらに操作性を高められます。

13. オフライン状態でも確認できるよう、ダミーコンテンツを静的に用意しておくとテストがスムーズです。

14. ページの初期表示時にスクロール位置が 0 であることを確認し、戻る遷移でも状態が保たれるか観察してください。

15. コンテンツが非常に長い場合にスクロールバーが表示され、正しく動作することを確認します。

16. テスト時はソフトウェアキーボードを開いた状態でスクリーンショットを撮り、レイアウト崩れがないかを比較します。

17. サードパーティー SDK を導入する際には、position: fixed を持つ要素に影響する CSS が含まれていないか確認してください。

18. メイン領域の背景色を変更することで、スクロール範囲と固定領域の境界が視覚的に分かるようになっています。

19. スクロール終了位置で段差が生じないか、モバイル実機で指を離した瞬間の位置を観察してください。

20. 100dvh を採用した場合でも古いブラウザ向けにフォールバックを検討する際は、CSS カスタムプロパティで簡単に切り替えられます。

21. テスト完了後は開発者ツールのメトリクスで、ビューポートの高さとメイン領域の高さが一致しているかも確認してください。

22. スクロール後にリフレッシュしても状態が初期化され、余分なスクロール位置が残らないかどうかをチェックします。

23. 文字サイズを最大に拡大した状態でも、レイアウトが破綻しないかどうかを検証することを推奨します。

24. Textarea の自動改行が意図通りに働くか、長文入力を試してみてください。

25. 日本語入力時の変換候補ウィンドウがフッターを押し上げても、要素が重ならないかも確認しましょう。