【コーディング練習】Codestepさんの【HTML/CSS コーディング練習】入門編：フォトサイト2／LPを模写しました

今回はコーディング練習としてCodestepさんの【HTML/CSS コーディング練習】入門編：フォトサイト2／LPを模写しました

写真追加では適当に写真を持って来てそれっぽくしてみました。

スマホ版とPC版があります。

---

見本

模写

写真追加

---

スマホ版

見本

模写

写真追加

---

困った点

どう頑張ってもピクセルパーフェクトとはいかないですね。PC版はだいぶ見本に近い間隔になっていますが、スマホ版は全体の長さがやはり長くなってしまいます。

感想

今回作ってみた感想としてcodestepさんのフォトサイト／LPと比べてみるとコンテンツ間の間隔も変更する必要があるのでよりボリュームが多く倍ほどの時間がかかりましたが今の自分にないコンテンツの配置の仕方を学べて楽しかったです。

最後に

スマホ版、PC版で画像の並べ方やborderの引き方を変える技術が要求される課題でした。

ここまで読んでいただきありがとうございました。

コーディング、HP作成の出品もしていますので、ぜひ検討してみてください