スキルテスト: レスポンシブウェブデザインとメディアクエリー
このスキルテストの目的は、メディアクエリーの使用方法を理解しているかどうかを評価し、実践的な課題でレスポンシブウェブデザインを身につけてもらうことです。この課題をクリアするために必要な知識は、 CSS レイアウトモジュールのレイアウトレッスンに完全に含まれています。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
課題
複数の画面サイズでデザインを検査する必要があるため、このページには対話型のエディターを用意していません。
始めるには次のようにします。
- この課題の出発点をダウンロードしてください。
- ダウンロードした HTML ファイルをブラウザーで開くと、モバイル端末で読み取り可能な方法でダウンロードするワイヤーフレームのサイトが見つかります。
- ウィンドウを小さくドラッグするか、Firefox 開発者ツールのレスポンシブデザインビューを使用することができます。
課題は、このレイアウトのデスクトップ版を作成し、画面の幅に余裕があるときに表示することです。最終結果は下記の画像のようになるはずです。
デスクトップレイアウトを作成する方法はいくつもありますので、いろいろ試してみてください。また、 2 つ目のブレークポイントを追加して、タブレットで縦長モードで動作するレイアウトを作成してもいいでしょう。