【Webコーディング】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 2 SP版コーディング内容のまとめ
背景
2021年6月に取り組んだWebデザイン制作課題のコーディングを進めています。
課題元: 【美容室編】Webデザイン実践課題配布！（ポートフォリオ掲載OK） | PENGIN BLOG
今回は、こちらのSP版コーディングを終えたので記事にまとめていきます！
成果物
こちらのレスポンシブ対応、すすめていました🌟#クリスタチャレンジ
— ふーしゃ@web (@fuchsia_84) 2021年12月7日
タブレット版 : pic.twitter.com/Plf3x3bvyO
続。 #クリスタチャレンジ
— ふーしゃ@web (@fuchsia_84) 2021年12月7日
SP版 : pic.twitter.com/DvxK7MYxWr
Webブラウザで見る ※Chrome・Safari対応、レスポンシブ対応
GitHub - fuchsia-84/Salon_de_beaute
制作期間と工数
制作期間
2021/12/6 から 2021/12/7
スケジュールと工数
- 12/6
- ヘッダー 〜 全セクション
- タブレット/SP版の改行切替
7.0h
- 12/7
- ブレイクポイント変更
- フォントサイズ調整
- マスク画像調整(SVGファイル編集 0.5h ※)
1.0h
合計8.0h / 1.0人日 (※ : 実装工数に含まず)
未実施事項
学習事項
- 画像にマスク適用後余白が出る、画像が見切れる→SVG内でアートボードサイズが余分または不足していることが原因とわかった。フィットさせる。
- 最新のブレイクポイント
- max-width: 1024px - タブレット(PC基準)
- max-width: 599px- SP(PC基準)
- レスポンシブ対応に向けたfont-sizeの工夫…font-sizeをremで指定しline-height、margin/paddingの比率をemで指定しておけば、レスポンス対応時はルートのfont-size指定のみで完了できる。(後述)
参考
SP版コーディングを終えて
【マスク適用後の謎余白に勝利】
余分な余白が出来たり、逆に画像が見切れてしまったりといった現象によく出くわし、CSS側のサイズ指定が悪いのか？？と四苦八苦する場面がよくありました。
前述のようにSVG内でアートボードサイズが余分または不足していることが原因とわかり、アートボードをフィットさせて解決。
最近になってようやくillustlatorを使ってSVGを直接編集するようになり、気付けました。一つ賢くなった！
【最新のブレイクポイント】
768pxの1箇所で制作していましたがデベロッパーツールで見るとやはり不十分だったので改めて調査。
この辺りは定期的に見直しが必要と学びました。
【レスポンシブ対応に向けたfont-size指定の工夫】
今回、rem/emの旨味を上手に活かせない場面が多々ありました。
カンプ制作時にPC版とSP版で文字と余白の比率を一定に揃えなかったため、1.0em=12pxから0.67em=18pxのように切りの悪い数字を何カ所も使うことになってしまいました。
前述したようにこれを揃えておけば、html要素のfont-sizeをレスポンシブ対応するのみで作業が完了するはずです。
デザインとしてはこれを意識して制作できるようにしたいですし、コーディングの観点からは制作者間で共有して適宜調整した方が良いと感じました。
今後・おわりに
Webデザイン制作課題を元に、コーディングまで制作を行ってみました。
全体のコーディング時間が約3人日というのは
自分の中で大きな成長と感じました！
学びの多い課題を提供してくださった
PENGIN BLOG (Twitter: @pengin_company) さまに感謝申し上げます。
今回の制作での経験を元に、今後も進めて参ります。
ありがとうございました。
