おはこんばんちわ
valです
今回２つ目のLP模写を完成させたので
今回の成果とつまづいたポイント等について書いていきます
1回目のLP模写に関してはこちら
今回の成果
今回模写したのはこちらのサイトになります
そして模写した結果がこちら
こちらは画像なので実際にページとして作成したものは
Googleドライブの方に上げておきます
よろしければ見てやってください
LP模写の際に気をつけたこと
前回はレスポンシブ対応はさせなかったので
今回はしっかりとレスポンシブ対応したコーディングをしました
またなるべく共通したCSSを複数回記述することが無いようにしました
単純にコードが長くなって見づらいですしね
大まかには上記の2点になります
つまづいた所
今回つまづいたところとしては
- クラス名の付け方
- レスポンシブ対応
の2点になります
クラス名の付け方がクッソムズイ
クラス名をつける際はクラス名だけでできるだけ内容がわかるように
というのは前回から心がけているのですが
今回はそれに加えて何回も同じスタイルの記述を避ける
というルールというか心掛けを追加したのでどうしようかと悩みました
悩みに悩んだ挙げ句
もうテキトーでいいや！
と開き直ってclass=”section1″
とかやりだしましたｗ
動けばいいんです動けば
レスポンシブ対応めんどくさすぎ問題
今回LP模写を始めてから完成まで約40時間かかったのですが
大半がこのレスポンシブ対応に苦慮した結果になります
はじめにPCでの表示の内容を完成させて
それからスマホサイズの実装という流れでコーディングしたのですが・・・
後からレスポンシブ対応させるのめんどくさすぎる！！！！
この部分のCSSはどこだ～って探してる時間がとても長い・・・
あっちにいったりこっちにいったり
書く場所間違えたりなんだりしてる間にソースがぐっちゃぐちゃになってしまったので
一度リセットしました・・・（泣）
ある程度小分けにコーディングして
同時にレスポンシブ対応させていくのが良さそうです
あとは後から知ったのですが
最近はスマホから見る人が多いからか
スマホ表示をベースとしてそこからレスポンシブ対応として
タブレット表示、PC表示とコーディンぐしていくのがトレンド？らしいですね
次からはそうやってやってみようと思います
まとめ
今回で2つ目のLP模写となりましたが
2つ目にしてなんとなく頻出の傾向がわかってきたような気がします
実際どうやるかわからなくてググる回数も減りました
もうあと１，２個模写してみたら
クラウドソーシングでLP模写の案件を受けてみようかなと思います
そもそも案件を取れるかは別として・・・
それでは
コメント
[…] […]
[…] […]