しょーごさんのコーディング課題中級Ex編が一生終わらない件について

こんにちは、みとか です。

１年半ぶりにしょーごさんのコーディング課題（中級Ex編）に取り組んでいます。

…が、ぜんっぜん進まないーーーーー！！！

あまりにも進まなくて、「全然進まないよ」っていう内容だけで記事が1本書けちゃいました。

中級Ex編が終わらない、というか始まらない

そもそも「しょーごさん」というのは、フリーランスでWEB制作をされていて、Web業界を目指す人にとっては神様のような存在のWEB関連のプロです。

そのしょーごさんが出している「全部盛り教材」を購入したのが約２年前のこと。

中級編にはすでに1年半前、一度取り組んでいて、一応完走しました。

私の中級編オリジナル作品はこちら↓
気になったら見ていってください！
https://test.mitoka-desing.com/　
ID：ex１　　パスワード：ex1

その後、SEO専任のWebディレクターとして働くことになり、SEO沼にどっぷり。
SEO検定4級〜1級までコンプリートしたり、ブログのデータ分析に熱中する日々を送っていました。

でも、「そろそろまたコーディングもやらないと」と思い立ち、ついに再始動！

……したのはいいものの、そこには壮大な沼が広がっていたのです。

※今回、「終わらない、というか始まらない」のは、中級Ex編のことです。

画像を入れただけなのに、なぜかレイアウトが崩壊

再開後の作業は、以前ちょこっと進めていたところの続きで、画像を挿入するところからでした。

──数秒後、ページ全体のレイアウトがなんかズレました。

1年半前の私が何かやらかしてたのか？
でも、ここまで来たらピクセルパーフェクト目指すしかない！

marginやpaddingをちまちま微調整して、数日かけてレイアウトを整えました。

つぎに画像のサイズを調整するぞ～！widthだよね…えい。

またズレました。

しかも今度は別の要素もズレてる。なんで？？？

ここまでで何故か１週間経っていました。もう心が折れそうです。

デベロッパーツールで調べてみたら、画像に max-width 的な謎の指定が入っていて、それが想定外の横幅をとってしまっていたのかなと思います。

テトリスの一番上の段を崩しちゃった感じでしょうか。
一箇所変えたら全体が崩れるって、CSSあるあるですか？

コピペ地獄と“理解してない”の壁

他にも、いろいろな壁にぶつかっています。
アコーディオン、スクロールダウンの矢印、スライダーなど、動きのある要素はまだ実力で実装できず、すべて「コピペOK」と明記されたサイトからコードを拝借して加工して作っていました。

でも、コードの意味を理解していないと、ほんとうに応用が利かないんです。

「どうしてそれが必要なのか」
「どこに影響を与えるのか」

が分からないまま使ってしまうと、見た目は“再現できてるつもり”でも、実は構造が崩れていたりします。

その結果、何かを直すたびに他の部分に影響が出て、「直したはずなのにまたズレる」の無限ループに…。

1年半のブランク、想像以上に深かったと言わざるを得ません。

使っていたプロパティの名前や、よくやっていた構造の組み方も「？？？」になっていました。

昔の自分が書いたコードを読みながら、「こんなの書いたの、誰…？」状態です。

しかも中級Exって、ちょっとしたズレや理解不足が即バグに直結するレベル感です。
思い出しながらのリハビリには過酷すぎました。

まとめ：HTMLからちゃんと組み立て直すことにした

今回、中級Exに再挑戦して強く感じたのは、「見た目だけ再現した“なんとなくのコーディング”は、実務では通用しない」ということです。

デザインを再現するだけなら、CSSをガンガン書いていけばそれっぽく見えることもあります。
でも、構造を理解せずに進めると、後で修正が効かない・原因が追えない・追加ができないという状況にハマります。

「なんでこうなってるの？」が自分で説明できないコードは、すぐに破綻すると気づきました。

なので私は、今回のリハビリで「まずHTMLをちゃんと作る」と決めました。

・まずは余計な装飾を入れず、HTMLだけで構造を正確に組む
・親子関係、グルーピング、見出しの階層などを意識する
・そのあとでCSSやJSを載せていく

この順番で、構造がしっかり意識してやってみようと思います！

完成はいつになることやら…😂