気に入った記事をブックマーク
- 気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
- 記事を読んだ感想やメモを書き残せます
- 非公開でブックマークすることもできます
エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント28件
- 注目コメント
- 新着コメント
matarillo
原則は「HTMLでモーダルUIを作るな」なんだということを最初にでかでかと書くべき事案。もし<dialog>を使うなら、スクロール停止だのなんだの余計なことをせず、各ブラウザの挙動差も無視すること。
shields-pikes
こんな原始的な実装をしてるのは自分達だけなのでは？もっと楽な方法があるのでは？疑惑が払拭されてよかった。とはいえ、ページ遷移させずにひとつのコンテンツだけに集中してほしいタイミングってあるからなー。
enemyoffreedom
「2022年現在は<dialog>要素を使いつつ、iOS Safariのスクロール対策は自前のJavaScript実装がよさそうです」 何だかんだ面倒くさいのでFW・ライブラリに頼りたいところ
securecat
dialogで実装してiOS Safariに関してはSafariの頑張りに委ねるで良いと思う。設計側としては、モーダル外の操作によって主動線が失敗しても致命傷にならない時に限りモーダルを使う。というかそもそもモーダルを使わない。
circled
escキーで閉じない。全部キーボード操作だけで完結出来ない。アクセシビリティ(目の見えない人用に読み上げ機能でスムーズに動作するか？とか)が下がるか、そもそも無い。みたいなハードルがどんどん上がる昨今。
shields-pikes
こんな原始的な実装をしてるのは自分達だけなのでは？もっと楽な方法があるのでは？疑惑が払拭されてよかった。とはいえ、ページ遷移させずにひとつのコンテンツだけに集中してほしいタイミングってあるからなー。
matarillo
原則は「HTMLでモーダルUIを作るな」なんだということを最初にでかでかと書くべき事案。もし<dialog>を使うなら、スクロール停止だのなんだの余計なことをせず、各ブラウザの挙動差も無視すること。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
いまの話題をアプリでチェック！
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用... ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
ブックマークしたユーザー
すべてのユーザーの
詳細を表示します
詳細を表示します
2022/06/24 リンク