実際のサイトを模倣する
↓↓↓このサイトを模倣した↓↓↓
今日は実際にあるサイトの画面キャプチャから素材を切り出し
styleまで仕上げるという学習をした。
試しにタイムアタックしてみたところ、約50分かかった。
1画面の小さなページだったためもう少し早くできるかと思ったが、
やってみると意外と時間がかかってしまった。
早く仕上げるために試したこと
・画像のファイル名をナンバリングにした
元画像をペイントで開いて手書きで番号を付けておく。
ファイル名から判別できないが、ペイントを見ればどれが何かすぐに分かる。
ファイル名を考える工数、コーディング工数が削減される。
今回は画像が20枚強と少なかったためこの方法で問題なかったが、
数が増えたり複数人での作業前提ではやるべきでない。
・<img>タグのコピペ
画像のファイル名をナンバリングにしてあるので、
<img src="img/ph0.jpg" alt="">を必要数コピー＆ペーストし、
ファイル名の数字の箇所だけ追記するという手法を取った。
・置換による一括修正
<img>を<li>でくくる作業を忘れており、後から追記した。
必要箇所だけ切り取りメモ帳に貼り付けてから、
Ctrl+hの置換機能を使い「<img」を「<li><img」に、
「">」を「"></li>」に変換した。
スライス～保存作業が最も時間がかかった。
コーディングに比べ慣れていないせいもあるが、1pxでもずれると
後で面倒ということもあり慎重に作業した結果だ。
工夫できる点はあると思うので、学習を続けたい。
