ふーしゃのWeb制作ブログ

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

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

Webコーディング模写 HTML CSS

10月分2つめとして、ちづみさんnote-コーディング模写入門編に挑戦！

成果物

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


制作期間
10/8 2時間

学習項目

HTML/CSS/JavaScript

復習

  • header分の高さ調整(padding-topでの対応)
  • 要素の中央配置(margin,calc)
  • 要素横並び(display:inline-block/float)
  • 全体、Bootstrap封印(px単位で合わせるため)
  • フォント"YuGothic"指定
  • inline-block要素自動折り返し位置の修正(letter-spacing,white-spacing)

XD

復習

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

感想

XD操作も、コーディング内容も初心者が取り組みやすい内容で、
"練習用"記載で、ポートフォリオ掲載許可。
大変ありがたい内容のnoteです。ありがとうございます...！

ほとんどが今までの復習内容でコーディングでき、
一度もググらずVSCode/プレビュー/XDデザインカンプとの
行き来で完結できたこと、 2時間で終えられたことが大きかったです。

ただ、今回もレスポンシブにすることを考えずに書いたので、最小限のコード。

シマエナガが可愛すぎるので、とってもレスポンシブにしたい...！←

次回

入門編のPC版デザインから、
タブレット版とスマホ版のデザインカンプをXDで自作。
そして、レスポンシブにコーディング！(ここまでを10月末まで予定)