前回から間が開きすぎましたが中級編最終課題のレビューです。今は新しい課題に変わっており年月の経過を感じますね。まだデイトラのコミュニティがSlackで運営されていた頃レビューいただいたのですが、ログが消えており手元に残っているのはメモと修正箇所の一覧のみ。以下箇条書きになりますが記録しておきます。
目次
デイトラメンターさんからのレビュー
- フォームのバリデーションチェック機能がきちんと出来ている⇨はにわまんさん直伝のコードがベースなのでそれはそのはず！
- ピクセルパーフェクトを意識した丁寧なコーディングしている事が伺えた。特にSPサイズはほぼ忠実にカンプを再現出来ている。⇨Perfect PixcelとLinearでがんばりました！
- タブレット幅がしっかり調整出来ている⇨手持ちの実機で確認しつつ修正しました
- Q&Aのアコーディオン(jQuery)の挙動がおかしい⇨ここもはにわまんさんのコードを参考にしたはずがなぜかアンサーがびよんびよんバウンドするという謎の挙動が出てしまった
- ドロワー内メニューを閉じてもドロワーが閉じない⇨意識が及んでなかったです
- ホバースタイルのトランジションが統一されていない⇨統一します！
- 画像はまだ圧縮できる⇨圧縮します！
- buttonタグの中にaタグは使えない⇨勉強不足でした…
修正箇所一覧
- ハンバーガーメニューをCSSで作る
- フォントサイズをパーセンテージで指定
- フォントサイズをremで指定
- ヘッダーの背景の指定方法見直す add-scrolled
- ファーストビューのタイトル add-activeとは？
- SPでのファーストビュー内のパディング修正
- line-heighにcalcいらない
- news、faq,、accessの見出しまとめて指定
- 三角形をCSSで作成する
- liner-gradientでpx指定
- serviceセクション、画像はCSSで読み込み
- swiperのページネーションにstatic
- 価格表のボーダーの描き方見直し
- text-justify: inter-ideograph
- commentsの顔写真 CSSで読み込み
- commentsの顔写真 Retina用も用意
- faq background-attachment: fixed;
- faqのbg Retina用も用意
- QuestionのプラスマイナスマークをCSS実装
- access Gridで実装
- totopボタンをCSSで実装
- flexのショートハンドの書き方見直し
- ファーストビューのリード文の字間を広げる
- Resultsセクションのカードの位置もう少し左に修正
- アコーディオンのjQuery書き直し
- Contact Us全体が少しズレているのを直す
- ラジオボタンの青丸が左にズレているのを直す
- ドロワー内メニューをクリックしたときドロワーを閉じるようにする
- ドロワーのスムーススクロール ヘッダーの高さ分引き忘れているので引く
- SP時 トピックの上下余白が狭いので広げる
- ラベルの位置がズレているので直す
- Mapの高さが少し高いので直す
- コンタクトフォームの下、余白が広いので狭くする
- カンプ以上の幅になった時の左右の余白をなくす
- ホバースタイルのトランジションを統一
- 画像の圧縮やり直し
- JSのwindow.matchMediaを使うか検討する
- commentsの背景の敷き方見直し
- 個人情報保護方針に同意する、の一文をlabelでマークアップしても良い
- accessセクションでのMapのリンクにrel=”referrer”
- resultsセクションでのfigureタグの使用
- serviceで定義リストを使用
- newsセクションにリストタグを使用
- buttonタグの中にaタグは使えない 単にaタグに装飾するなど
- Montserrat 300,400,500,600,700読み込み
- jsの最後にdefer
- リストタグ、aタグにもクラス名を振る
- mainタグの使用
- srcset属性の使用
- ブレークポイントの設定見直し
- フォントファミリーの指定見し
- 色の変数名の付け方見直し
- グローバルナビにホバー効果つける
- ヘッダーのスクロールを解除 タブレット表示横幅固定に？
かなりの数ですね。また折に触れて記事に起こすかもしれません。
余談 : この課題なのですが、ダミーテキストのままだと何の会社なのかよくわからないので、就活用ポートフォリオに加えるにあたってAIにテキストを作ってもらいました。受ける企業に応じてテキストと写真が変えられる着せ替え素材が作れるといいな～と思いましたが元のカンプのデザイナーさんに失礼ですし、大変なのでやめておきました。
コメント