【Webコーディング】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 1 PC版コーディング内容のまとめ
背景
2021年6月、Webデザインの制作課題に取り組みました。
課題元: 【美容室編】Webデザイン実践課題配布！（ポートフォリオ掲載OK） | PENGIN BLOG
今回は、こちらのPC版コーディングを終えたので記事にまとめていきます！
成果物
※12/3撮影後、Menu・Reserveセクションの下線スタイルを破線に修正
あまりTwitterくる時間なくて久しぶりのツイート。11月最終週こちらのコーディングを進めていました🌟
— ふーしゃ@web (@fuchsia_84) 2021年12月3日
引き続き〜！ #クリスタチャレンジ https://t.co/EdI3qnZHDw pic.twitter.com/mzgqV6Vb8v
GitHub - fuchsia-84/Salon_de_beaute
制作期間と工数
制作期間
2021/11/24 から 2021/11/26
(+ 12/3 軽微修正アリ)
スケジュールと工数
5.0h
- 11/25
- Access・Reserve・Menuセクション、フッター
- Styleセクション(Flickityギャラリーのカスタム)
7.0h
- 11/26
- Google Map挿入
- スクロール時ヘッダーのスタイル切替
- トグルボタンクリックでグローバルメニュー表示/非表示の切替
- ページ内リンクのスムーズスクロール
3.0h
合計15.0h / 約1.88人日
(※ : 実装工数に含まず)
未実施事項
学習事項
今回の実装では全くわからず新しく調べた、という項目は特にありませんでした。
主に既知のプロパティやライブラリの仕様や使い方について調べて進めました。
復習メモ
- display:block/noneの切替にはtransition効かない→visibility:hidden/visibleを使う
参考
点線/破線を描く : liner-(radial)-gradient
トグルボタン開閉のアニメーション
PC版コーディングを終えて
知識面について前回すすめた(水族館コーディング)で取り組んだ内容の復習の範囲に収まっていたように思います。
ただ、CSSを記述する時にHTMLから書き直すことになった場面が何度かありました。
(例: セクションタイトル内にあるサブタイトル装飾部分と線分を両方ともspan要素とした→spanにスタイル指定時に重複、線分はdiv要素に変更)
HTML側でいかにタグをうまく振るかがとても重要だと再確認できました。
今後・おわりに
今回はPC版コーディングについてまとめました。
引き続き、レスポンシブ対応を進めます。
