JStudy. #001
Apr 17, 2021Webフロントエンドまわりを中心に1週間で学びを得たことを記録する週刊ブログです。
z-indexとスタッキングコンテキスト(Stacking Context)
- スタッキングコンテキストはwebページ上の仮想的な重なりの概念のこと
- z-indexもスタッキングコンテキストのうちの1つ
- 参考文献
ハプティック(Haptic)
- 利用者に力・振動・動きなどの触覚フィードバックを与える技術
- 使いどころの選定が難しいが、主に「完了・警告・失敗」時に使われることが多い
- 参考文献
ジェームズ・ギャレットのUX5階層モデル
- ジェームズ・ギャレット氏が「Elements of User Experience」という著書の中で紹介した、UXを考える上で重要な5階層モデルの思考法
- 5つの要素は段階的に、密接につながっている
- 表層:ビジュアルデザイン
- 骨格:インタフェースデザイン、ナビゲーションデザイン、インフォメーションデザイン
- 構造:インタラクションデザイン、情報アーキテクト
- 要件:機能仕様、コンテンツ要求
- 戦略:ユーザーニーズ、目的
- 参考文献
言語イメージスケール
- 日本カラーデザイン研究所が開発した感性マッピングツール
- 180の形容詞がマッピングされており、色に対して持っている共通の感覚との相互関係を重視して研究開発された
- 参考文献
visibility: hiddenのdisplay: noneとの違い
visibility: hidden
は要素を隠し、アクセシビリティツリーからも削除されるが、要素の大きさは確保される
window.matchMedia
- 指定されたメディアクエリ文字列のパース結果を表す、新しい
MediaQueryList
オブジェクトを返します useMedia
のようなカスタムhooksをつくれそう- 参考文献
visually-hidden
- a11y対応等でユーザーには見せないがDOM自体は存在させておきたい場合、ある程度の大きさを確保しておかないとスクリーンリーダーがゴミだと判断して無視してしまう
- 参考文献
webkitでrelayoutが発生する場合、tableの中のcaptionタグがあると下に飛んでっちゃうバグ
- iPhone等のモバイルブラウザで開くとバグが体験できます
- 既にバグの報告はされていた
- 対応策
transform
などrelayoutが発生するCSSを記述している箇所にwill-change
プロパティを当てる- しかし、むやみやたらに
will-change
プロパティを当てることは避けるように注意されている(ref. will-change - MDN Web Docs)
- しかし、むやみやたらに
- tableタグ内でcaptionタグを使うのを諦めて、
aria-describedby
を使用してa11y対策はきっちりやる(ref. Caption & Summary - Web Accessibility Tutorials)