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

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

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

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

見本

模写

写真追加

---

スマホ版

見本

模写

写真追加

---

困った点

今回XDファイルを見本にしながら作成したのですが、detail左部分の画像の高さと右の文字部分の高さが微妙に合わいませんでした。

上の画像を見てもらうと青い方の画像と文字部分で高さの違いがあるのが分かるかと思います。XD通りの文字同士の間隔に設定したのですがずれてしまいました。

フォントファミリーが違うことの影響なのか、そもそもXDは大体の大きさでしか表示していないのか。。。

感想

今回作ってみた感想としてcodestepさんのプロフィールサイト／LPと比べてみると若干ボリュームは少ない感じがしました。プロフィールサイトを作った方なら直ぐに作れると思います。

最後に

背景色の設定の仕方、flexbox、table要素の使い方を確認できる課題でした。

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

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