課題範囲
第２階層となる、テスト一覧ページをコーティングしてください。
赤線で囲った「絞り込み」の部分は不要です。
抜かしてコーディングしてください。
コーディング要件
1.スタイルシート構成
cssファイルは一枚にまとめてください（index.htmlと共通）
indexと同様にモバイルファーストでスタイルを記述します。
2.メタタイトル、ディスクリプション
- title：テスト一覧｜Qbase WEB[キューベスウエブ]
- description：indexと同じ
で設定して下さい。 descriptionが重複していますが、クライアントが後ほど設定するので良いです。
3.スタイル指定について
- フォントファミリー
- フォントサイズ
- 行間(line-height)
- 字間(letter-spacing)
等は厳密に合わせなくても構いません。
また、デザインカンプの方で、カード間の余白が均一でなかったり、縁の色がズレていたりします。
クライアントより「デザインに合わせなくて良い」という返答を頂いています。
個別に設定したり、縁をずらす必要はありません。
上記の理由もあり、PerfectPixel でカンプと重ねて確認すると、ずれる部分が出ます。
100％ピッタリ重なる必要はありません。
なるべくデザインに近づけつつ、無理のないコーディングで作成してください。
デザインされている幅以外でWebページを見たときにも、レイアウトが崩れないことが最重要事項です。
課題の提出について
コードレビューをご希望の場合は、完成したファイル一式（画像フォルダも含む）を圧縮して、マイ課題よりお送りください。
課題制作のヒント
テスト一覧のページで一番レスポンシブ化が難しいのが、カード部分です。
flexレイアウトで組む場合は、orderで並び替える必要があります。 下図のように6つのブロックに区切ると、作りやすいでしょう。
※見本のコードはflexで行っていますが、gridレイアウトで作っても構いません。
コーディング見本
課題ページの参考に、素材タブに見本をご用意しております。
見本のとおりに作る必要はありません。
レイアウトの組み方等の参考にご活用ください。