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