今日の GUI チャレンジでは、CSS と JS を使用して、レスポンシブでアクセスしやすいスライドアウトのサイド ナビゲーションのユーザー エクスペリエンスを作成します。サイド ナビゲーションは、複数のブラウザ、画面サイズ、入力デバイスで動作します。よろしいでしょうか。Google では、グリッド、変換、疑似クラス、そして JavaScript を使用してこの UX を処理しています。
エピソードのリリース後 30 分間は、@AdamArgyleInk があなたのコメントに回答します。こちらからお問い合わせ、ご質問いただくか、独自のコードを送信してください。
章:
- 0:00 - はじめに
- 0:30 - デバッグコーナー機能の概要
- 2:25 - グリッド += メディアクエリ スタックのレイアウト
- 3:42 - アクセス可能な変換の移行
- 4:22 - :target 疑似クラス
- 5:57 - Esc キーの UX
- 6:16 - オーケストレーションに焦点を当てる
- 6:49 - スクリーン リーダーの UX
- 7:56 - 結びと行動喚起
リソース:
- コード変更 → https://goo.gle/3sQ8Xif
- 関連情報 → https://goo.gle/2Np83J9
- デモを試す → http://goo.gle/3bVBFYT
- サイド ナビゲーションの構築方法（GUI の投稿） → https://goo.gle/36CAeuO
その他の GUI チャレンジはこちら → https://goo.gle/GUIchallenges
Google Chrome Developers に登録 → http://goo.gl/LLLNvf