HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
全市民46万人余の個人情報入ったUSBを紛失 兵庫 尼崎市が発表 | NHK
兵庫県尼崎市は、すべての市民46万人余りの個人情報が入ったUSBメモリーを紛失したと発表しました。住民税や生活保護の受給に関する情報などが含まれているということです。 尼崎市によりますとUSBメモリーは新型コロナの影響で生活に困窮した世帯に支給する給付金に関する給付業務を委託していた業者が、21日、紛失したということです。 USBメモリーには、46万人余りのすべての市民の、氏名や住所、生年月日などのほか、住民税を納めているかどうかや、生活保護の受給に関する情報などが含まれていました。 業者が市の許可を得ず、USBメモリーで個人情報を持ち運び、大阪・吹田市にあるコールセンターでのデータ移管作業を行ったということです。 作業の終了後もデータを消去せず、USBメモリーを持ったまま飲食店で酒を飲んだ際に、USBメモリーが入ったかばんを紛失したということです。 業者が22日、警察に届け出るとともに市
画像で分かる、新しいCSS
この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
