未来電子テクノロジーでインターンをしている<@y_mishima_miraidenshi>です。
プログラミング学習を始めて1ヶ月ほど経過し、現在ホームページ作成に取り組んでいます。
その際、僕が解決に手間取ってしまった問題を忘れないよう記録しておこうと思います。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
初期設定の罠
ホームページ作成にあたり、まずはヘッダー作成に取り組みます。
ホームページに飛べるようリンクを埋め込んだロゴと内容を示したリストを作成することを考え以下のようなコードを記述します。
出力は下図のようになりました。
CSSで何か記述したわけでもないのに、ロゴとリストの左端が合っていませんね。
この原因は、ページのコードを見ればすぐに解決します。
薄緑色がpadding、薄オレンジ色がmarginを表しています。
そうです、初期設定でpaddingとmarginが勝手に設定されていたんです。
どうりで端が合わないわけですね。
このpaddingとmarginを無くせば、下図のようにきれいな出力になります。
このように初期の設定値の影響で出力が期待通りにならないことがあるので確認する必要がありますね。
僕はこの原因が分からず、ずっと苦戦してしまいました…
おわりに
実際にホームページ作成をしてみることで、理解できていない部分が明確になってインプット学習とは違った学びが得られていると実感します。
今後もさらなるレベルアップに向け、学習していきたいと思います。