ふーしゃのWeb制作ブログ

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

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

Webコーディング模写 Adobe Xd

成果物

先日作成したデザインカンプを元に、コーディングを終了！ fuchsia-84.hatenablog.com

スクリーンショット

タブレット版スマホ版
全体スクリーンショット

動画

制作期間

10/16,18 合計5時間

学習項目

HTML/CSS/JavaScript

復習

  • header分の高さ調整(padding-topでの対応)
  • 要素の中央配置(margin,calc)
  • 要素横並び(display:inline-block/float)
  • background-size/background-position
  • ハンバーガーメニュー実装
  • トグルボタン実装(CSSアニメーション)

new!!

  • div要素(display:block)の上下入れ替え
  • absolute時高さ0の対応:疑似要素でpadding
  • flickityを削除:destroy
  • メディアクエリとJavaScript連携:windows.InnerWidth

Others

  • git コミット・プッシュ済のメッセージ編集
  • Chrome拡張機能にショートカット設定

感想

レスポンシブ版も完成！
9月分の総復習+いくつかの新要素という感じで、
適度にググりつつあまり手を止めずに書くことができた。

気になった点は、以下の2つ。

flickity
flickityで少し踏み込んでメソッドを呼び出してみたら、
今までの書き方に問題があるよう。
newから記述し、初期化が行われるようにする必要があるとのこと。

XDを使う意義
デザインの部分ではあるが、スマホ時のグローバルメニューを画面一杯にする場合、メニュー内のスクロールとなり画面が固定されたようになる点について、コーディングしてから使いにくさを感じて修正したくなった。
こういった手戻りを少なくするところにXDを使う意義があるはずなので、十分検証できるようにしたい。

次回

月末までに、まだ作れそうなので、
10月分-1 の猫さんレスポンシブ化、または、別のものを選んでもよいかも。