制作背景と目的
twitterを介して知ることができた「カンプコーディング」。実は以前からこの手の学習方法である「模写コーディング」に興味を持っていた背景もあり、この度挑戦させていただきました。
尚、この「カンプコーディング」のデザインをされた方は、プロのWebデザイナーさんでご自身のお仕事は勿論、自分のようなWeb制作初学者へのコーチングも精力的に行われています。個人情報保護のため、念のためお名前は伏せさせていただいております。
制作の目的は従来の学習パターンからの変化と、より実践的な学習を行うことでスキルアップを目指すこと。これまでは教本にて学習ののちアウトプットを行うのみでしたが、上記のような背景もあり、より実践的な学習方法への模索を行ってみました。
サイトURL
※ドメインを解約したため、現在画像でのみ閲覧可能です。もし閲覧ご希望でしたら当方PCに当時の作成データがございますので、そちらをお送りすることは可能です。
制作期間
制作時期は2020年6月18日～2020年7月6日の19日間(作業日数14日)、制作所要時間は概ね約70時間(制作5×10+修正5×4)。制作人数1人。また、Webとは無関係のお仕事を週4日フルタイムで勤務しながらの制作です。
意識した点
「chrome・firefox・edge」だけでなく、これまで見送ってきた「IE11」への初対応を意識してみました。時間を要した上完全ではありませんがこれまでの制作物では大きくレイアウト崩れを起こしていたことを考えると収穫はあったと考えております。特にCSSグリッドでの対応が出来るようになったことは今後活きると感じております。
学んだ事
- jQuery及びJavaScriptの実装
(主にハンバーガーメニュー・フェードインアニメーション・スムーススクロール) - 各ブラウザ対応(特にIE11対応のベンダープレフィックス)
- imgとbackgroundの使い分けについて
- 画像圧縮による容量の軽減
- 第三者からの指摘により自身では気が付かないことに気が付けたこと
- XD(デザインカンプ)に初めて触れたこと
不明点・未解決箇所
タブレットとスマホのヘッダーメニュー表示時、試行錯誤するもデザインカンプ通りにロゴと帯部分が表示されず断念。同じくメニューの内容物の縦中央揃えも上手くいかず(paddingでそれらしく調整はしました)、幅の設定にもやや不安(特にIE11)を抱える結果となりました。
今回に限ったことではありませんが、ヘッダー特にナビゲーション部分と幅の設定や調整はどうも自分には難しく感じるようでサイト制作の度苦戦しています。今後克服していきたいですね。
修正追記(2020/7/26)
上記不明点・未解決箇所だったヘッダー部分非表示の問題と縦中央揃えの問題を試行錯誤の結果解消しました。所要時間約15時間。解決にあたりz-indexの重なり順について、transformやpositionの解除、それらのIE対応について理解を深めることができました。