ミツケンです。
1日中かかっても原因は見つからず
今日はDAY5の最後まで取り掛かることができた。
DAY5自体は昨日から取り組んでいたのだが、DAY5の2でつまずいてしまったのだ。
左右にそれぞれ文字をフロートさせようとするが、なぜかうまく表示されない。
講師の指南動画通りにコーディングしているのに。
スペルミスか、記号を抜いてしまっているのか、色々と問題に当たったり検索したりもしたが全く解決しそうにない。
気力が抜けて休みながら何度も何度も解決を試みたがそれでも問題の所在は分からない。
そんなこんなで夜中までもつれ込んだ。
寝る前になってChromeの検証でCSSを打ち込んでみたところ、検証上では動画通りに表示された。
もう寝る時間だし、解決の手がかりも見つけたから一旦手打ちにしようということで昨日はそこで終わった。
あっさり解決
そして本日。朝目覚めてから早速取り組んだ。
検証で書いたCSSをVScodeにコピペしたり、検証で色々といじくり回したりしてみたがやっぱりうんともすんともならない。
もう挫折しそうになりかけていた。
そこをなんとか耐えてもう1度様々なサイトを当たってみた。
そうするとすんなりと解決方法が見つかった。
/*—————-
header
—————-*/
上記のようにコーディングするところを
/*—————-
header
—————-/*
とコーディングしてしまっていたのだった。
これはコメントアウトというもので/*と*/の間にかかれたコードは実際の表示には反映されなくなるというものだ。
ところが自分は最後の部分を/*としてしまっていたのでコメントアウトが閉じられていなかった。
そのため/*から後のコードも反映されなくなっていた。
検証ではきちんと反映されていたが、VScodeでは反映されていなかったのはこのためなのであった。
最初が/*だからそれに引きずられて間違えてしまったのだろう。
昨日は血なまこになって打ち間違いを探していたのに全く見当がついていなかった。
こんな単純なことで全く前にすすめなくなる、Web制作の学習は本当に骨が折れる。
上記のサイトが今回解決に導いてくれたサイトだ。
一番下の方にコメントアウトの閉じ忘れが言及されている。
初心者向けで内容も分かりやすい。
