ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

【Webコーディング模写】10月分-1 まとめ

Webコーディング模写 HTML CSS

Twitterで知った ちづみさんnote-コーディング模写初級編
を購入。入門編があるのに勢い余って←初級編からスタート。

成果物

スクリーンショット
スクリーンショット
動画

制作期間
10/7~10/8 合計12時間

学習項目

HTML/CSS/JavaScript

復習

  • header分の高さ調整(padding-topでの対応)
  • 要素の中央配置(margin,calc)
  • 要素横並び(display:inline-block/float)

new!!

  • 全体、Bootstrap封印(px単位で合わせるため)
  • 偶数番目・奇数番目でCSS切替(疑似要素::nth-child(odd/even))
  • フォント"YuGothic"指定
  • inline-block要素自動折り返し位置の修正(letter-spacing,white-spacing)

XD

  • 共有urlから要素内容・サイズ・レイアウト情報取得

まとめと感想

XDデザインカンプからのコーディング

XDデザインカンプからコーディングするのは初めて。
サイト模写でChrome拡張機能のRulerを使っていたが、それに似た感覚だった。
最初は要素の位置を把握するのに戸惑っていたが、今回でかなり慣れることができた。

inline-block要素について

コーディングの内容について新しく触れたところとして、
inline-block要素の自動折り返し位置を修正するのに時間がかかってしまった。
また、要素横並びに関してIEへの対応を考えなければ
display:flexが便利ということ。
今回は使用していないが、今後試したい。

Bootstrap封印

今回、デザインカンプにpx単位で合わせて行くことを考えて
Bootstrapを封印して取り組んだ。
横並び要素があるときはほぼ100%で使用してきていたが、
使わずとも書けるようになっていたので、 理解しながら使えていた事を実感できたのも良かった。

全体

目標制作期限は"1週間"となっていたところ2日間で完成できた。
学習項目について復習内容の範囲では
ほぼググらずコーディングできた点も良かった。
しかし、レスポンシブ対応についてほぼ考えずに書いたのが反省点。

次回

順番が逆になってしまったが、入門編をコーディング。