コピー2020.02.09こんにちは、フレッシュマンSRです。2nd」に挑戦していましたが、ついに完遂することができました。2nd」に挑戦中で、DAY16まで完遂しました。2nd(以下デイトラ)に挑戦してみた簡単な感想、そして難易度について書いていきます。2nd」に挑戦中で、DAY26まで完遂しました。2nd(以下デイトラ)に挑戦してみた簡単な感想、そして難易度について書いていきます。2nd(以下デイトラ)に挑戦してみた簡単な感想、そして難易度について書いていきます。今までの課題は、自分のペースで行うことができました。3日かけてやったりすることもできます。最終課題は実際に案件を受けた時を想定して作られた課題なので、3日間で完成させるよう指示が出ています。僕は以下のようなスケジュールで、最終課題をこなしました。1日目(金曜日):PCサイト静的コーディング(3時間30分)2日目(土曜日):レスポンシブ対応・jQuery実装(6時間47分)3日目(日曜日):PerfectPixelを使って修正・テスト(6時間30分)トータルで完成までに17時間弱かかりました。コーディングの早い人でもない限り、完成までに10時間以上はかかると思うので、休日に取り組むのが良いと思います。ちなみに、テスト作業は指示されていませんが、本番の案件を想定するならば可能な限りやっておくほうが良いと思います。重要なのはPerfectPixel。デザインカンプと自分が作ったページのずれがよく分かります。2020とにかく初日は、レスポンシブやjQueryは後回しにして、PC版の見た目を最後まで作ることに集中しました。今までデイトラで学んできたことが活きました。なんといっても、多くの部分でコードの使いまわしがききます。今まで課題に取り組む中で作ってきたコードスニペットが無かったら、1日でここまでサイトを作ることはできなかったです。ちなみに、1日目終了時点で未実装の要素は以下の通りです。20202日目はレスポンシブ対応がメインの作業。ホバー時の処理やフォームのデザイン、アコーディオンなど、1日目では実装しきれなかった要素もこの2日目で整えました。ちなみに、フォームのテキストエリアのデザインは、以前やった課題とは異なります。このサイトが参考になります。コピペでできる!cssとhtmlのみでフォームのテキストエリアをわかりやすくするデザイン15選また、フォームのカスタマイズなど、課題をクリアするには疑似要素の理解が不可欠です。‘;は絶対省略しないように。これを忘れると何も表示されなくなります。僕はこれに最終日まで気づきませんでした。参考になるのはこちらの記事。【CSS】疑似要素の画像サイズを変更する方法2日目終了時点で未実装の要素は以下の通りです。ドロワーメニュースライダー3日目ついに最終日に突入。この日で完成させなければいけません。最初の課題はドロワーの作成。今回はメインコンテンツもスライドさせる必要があります。以下のサイトは以前も紹介したサイトですが、「メインコンテンツもスライド」の部分が今回の課題とほぼ同じ形なので、参考にしました。次の課題はスライダーですが、レスポンシブ対応をJavaScript内でする必要があります。こちらのサイトの「画面幅によってレイアウトを変える」で分かりやすく解説されています。サンプル付き!簡単にスライドを作れるライブラリSwiper.js超解説(基礎編)見た目は完成しましたが、実務を想定するなら、大切なのはここからです。実務では、納品前のテストが欠かせません。PerfectPixel用の画像がデイトラサイトに用意されているので、完成したらチェックしてみるとそのずれっぷりに気づくはずです。デザインカンプの作者さんを悪く言うつもりはないのですが、はっきり言ってデザインカンプのデータ値はあまり参考になりません。FB」というフォントが設定されていましたが、実際はカンプ上でも画像でも、完全に「Montserrat」(標準で使うよう指示されたフォント)でした。1px単位で完璧にそろえる必要はないと思いますが、大きくずれているところは調整すべきです。他に僕がやったテストは以下の通り。DAY19の課題でやったものです。2020HTMLおよびCSSの細かい間違いをチェックできるW3Cチェック。僕はCSSで「0」(ゼロ)と「o」(小文字のオー)の間違いを指摘されました。いう細かい間違いは自分では気づけないので、作業完成後はW3Cチェックを習慣づけるとよいのかなと思っています。見出し構造が不自然ではないかサルワカさんの記事をもとに、見出しタグを設定しました。【HTML】見出しタグの使い方:h1〜h6はどう使い分ける?こんな感じでいいと思います。altが正しく設定されているか画像ALTチェッカーは使いませんでした。imgタグで埋め込んだ画像は数枚程度なので、目視で確認できる範疇だと思います。2020閉じタグがない場合、W3Cチェックでエラーが発生します。W3Cチェックでエラーが無ければ、タグについても問題ないと思います。水平スクロールしないか前回は苦労した部分ですが、今回は全く悩まされず終えることができました。基本的にレスポンシブ時は、widthを100%にするのが基本です。左右に余白が開いているときは、calcを使うと便利です。16px分の余白を左右に付けることができるIEチェックWindowsなのでSafariは省略しました。Chromeで開発していれば、Firefoxは問題ないんじゃないかと思います。