Weekly JStudy. #001（2021.04.17）

Webフロントエンドまわりを中心に1週間で学びを得たことを記録する週刊ブログです。

z-indexとスタッキングコンテキスト（Stacking Context）

• スタッキングコンテキストはwebページ上の仮想的な重なりの概念のこと
• z-indexもスタッキングコンテキストのうちの1つ
• 参考文献
  • 重ね合わせコンテキスト - MDN Web Docs
  • 君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ics.media

---

ハプティック（Haptic）

• 利用者に力・振動・動きなどの触覚フィードバックを与える技術
• 使いどころの選定が難しいが、主に「完了・警告・失敗」時に使われることが多い
• 参考文献
  • ハプティクス - Wikipedia
  • 日常の中にあふれたハプティックを探る - Goodpatch Blog

---

ジェームズ・ギャレットのUX5階層モデル

• ジェームズ・ギャレット氏が「Elements of User Experience」という著書の中で紹介した、UXを考える上で重要な5階層モデルの思考法
• 5つの要素は段階的に、密接につながっている
  • 表層：ビジュアルデザイン
  • 骨格：インタフェースデザイン、ナビゲーションデザイン、インフォメーションデザイン
  • 構造：インタラクションデザイン、情報アーキテクト
  • 要件：機能仕様、コンテンツ要求
  • 戦略：ユーザーニーズ、目的
• 参考文献
  • UXデザインにおける5段階モデルとは？ - Goodpatch Blog

---

言語イメージスケール

• 日本カラーデザイン研究所が開発した感性マッピングツール
• 180の形容詞がマッピングされており、色に対して持っている共通の感覚との相互関係を重視して研究開発された
• 参考文献
  • イメージスケールとは - 日本カラーデザイン研究所

---

visibility: hiddenのdisplay: noneとの違い

• visibility: hiddenは要素を隠し、アクセシビリティツリーからも削除されるが、要素の大きさは確保される

---

window.matchMedia

• 指定されたメディアクエリ文字列のパース結果を表す、新しいMediaQueryListオブジェクトを返します
• useMediaのようなカスタムhooksをつくれそう
• 参考文献
  • window.matchMedia - MDN Web Docs

---

visually-hidden

• a11y対応等でユーザーには見せないがDOM自体は存在させておきたい場合、ある程度の大きさを確保しておかないとスクリーンリーダーがゴミだと判断して無視してしまう
• 参考文献
  • amphtml - github
  • Accessibility/SEO Friendly CSS Hiding - CSS-TRICKS

---

webkitでrelayoutが発生する場合、tableの中のcaptionタグがあると下に飛んでっちゃうバグ

• iPhone等のモバイルブラウザで開くとバグが体験できます
• 既にバグの報告はされていた
  • Table caption jumps to the bottom of the table after simplified table relayout - WebKit Bugzilla
• 対応策
  • transformなどrelayoutが発生するCSSを記述している箇所にwill-changeプロパティを当てる
    • しかし、むやみやたらにwill-changeプロパティを当てることは避けるように注意されている（ref. will-change - MDN Web Docs）
  • tableタグ内でcaptionタグを使うのを諦めて、aria-describedbyを使用してa11y対策はきっちりやる（ref. Caption & Summary - Web Accessibility Tutorials）