模写サイトのリニューアル

家事や子育てで、皆さんも毎日忙しい日々をお過ごしですか？　

こんにちは、関西在住で主夫歴５年越のYUJIです。

コードの見直しをしてみました

本日は、先般に作成した模写サイトについて、オリジナルコードと見比べて、適切でなかったところや、もっと効率的に改善できるところを見直し、修正した作業をお伝えします。

適切でなかったコード処理について

私が陥ったコード誤りについては、整理してみたところ、このようなポイントでした。

HTML の設定誤り

---

• meta name が抜けている → サイト検索されない
• プラウザのファビコンがない
• header や section などの要素 に id が抜けている
• section に wrapperクラス(.wrapper) が抜けている
• フッター が body の内側にない → footer としての機能ができなくなります。

---

CSS の設定誤り

---

• 最初に charset UFT-8 の設定がされていない → 正確に反映されなくなります
• html のフォントサイズを100% に設定していない
• a タグ の text-decoration: none; の設定がない → リンク設定時に下線部がつきます
• img タグ の max-width: 100%; の設定がない → 個別に設定する必要が生じます
• .wrapper(wrapperクラス) のmax-width の設定がない → PC時の幅調整がされません

---

このようなことがありましたので、修正を行いました模写サイトがこちらです。

修正した模写サイトはこちら

Visit Guam https://id7300.github.io/first-commit/

今回も、苦慮することが多かったですが、特に自分の間違ったコードの使い方については、次に間違うことのないように備忘録をつけて忘れないようにしたいと思います。

これからも、皆さんと一緒に、プログラミングを学んでいきたいと思います。

それでは、また。