【Webコーディング模写】- 9月分まとめ ※12/28 追記

9月分のWebコーディング模写が1つおわったので、
そのまとめです。元ページ - Name Of Love
参考書籍 : 久保田涼子著「Webデザイン良質見本帳」SBクリエイティブ株式会社

成果物

※12/28 画像差し替え対応済。

学習項目

HTML/CSS/JavaScript

ハンバーガーメニューの作成
真ん中にロゴを配置したグローバルメニュー
スクロール時にフェードイン・色変化のヘッダー
画面幅を取得してレスポンシブ対応するスクリプト
input要素、placeholderのスタイル変更
最下部スクロールでコンテンツに隠れるフッター
svgをcssでスタイル変更

XD

XDでSVG書き出しCSSで操作
その他
svg取得するChrome 拡張機能 svg-grabber
Webコンテンツ全体のスクリーンショットを撮るChrome 拡張機能 FireShot

まとめと考察

自力コーディングを終えて

復習内容に加え新しい要素にもたくさん触れることができた今回の模写。
大きかったのは、自分の得意と苦手を把握できたこと。
まとめると下のようなかんじ。

得意 :
コンテンツ部分は1時間以内でつくれていた。
特に、Bootstrapとflickityに比較的慣れた。

苦手 :
一方、ヘッダー作成にほぼ1ヶ月費やした。
(初見内容とニガテしかなかった。)
特に、calcの中央配置に苦労していた。
(とはいえ最終的には多用していたので... 克服？)
そして、初見じゃないのに躓いていたのが、
position、float、z-indexのセット。
重なっているせいで奥の要素がクリックできないとき、
理由がわからず混乱し続けるなどしていた。

対策 :
要素の重なりについて、開発途中ではabsoluteで配置する各要素をbackground-colorで色分けし、視覚的に把握するようにした。これで同じ沼に嵌ることは回避できそう。

ソース比較

見た目にはほぼ再現できていたように思えても、ソース内容を見ると多くの違いがあった。

flickityカスタムについて
本家も同じくflickityを使用していたが、公式デモを超えた内容が厳しく、buttonの大きさとhover時のカスタマイズができなかった。スクリプト追加で実装できることがわかった。
スライド画像タグ - img と picture
本家ではimgタグでなくpictureタグを使用していた。レスポンシブに画像リソースを提供できるタグで、PC用の画像をスマホ時に扱うと読込に時間がかかるといった事態を防ぐための対応。確かに、imgのみでの実装だとスライド読込時間が遅れてレイアウトが崩れていた。
alt属性付与
今回自分の実装では対応していなかったが、本家ではもちろん対応していた。ユニバーサルデザインの観点からも画像を用いたページで特に大切なので気を配りたい。
レスポンシブに切り替わるスライドの実装方法
2つのスライドを作成しdisplay: block, noneで切り替える方法をとったが、本家では1つのスライド内でコンテンツを複数パターン用意して切り替えていた。
スライド内テキストにてdiv全体にリンク
自分はボタンにしかリンクを貼っていなかったが、本家ではテキストを含むdiv全体にリンクが貼られていた。
ふわっと下から現れるアニメーションの実装方法
自分はコンテンツ自体をY軸方向にtransformで移動 + opacity変化で実装したが、本家ではJavaScript プラグイン[Scroll Trigger]を使用していた。
フッターのアイコン
自分はfontawesomeを利用したが、本家ではsvgのオリジナルアイコンを使用していた。タグの書き方は後学したい。
レスポンシブなナビゲーション実装方法
自分はPC版もSP版もglobal_navクラス要素の非表示/表示とスタイル変化のみで実装したが、本家ではPC版で横並びに表示するメニューとSP版で横から出すメニューとは別物に用意していた。