今日は会社で、LPの改修に悪戦苦闘していました。
備忘録の意味も込めて、それについて書いていきたいと思います。
だいぶマニアックな内容なので、興味がない方はとてもつまらないと思います。笑

元のLP

もともとは、社内でデザインまで行い、コーディングは外注して制作されたLPとのことです。
そのLPの内容を少し改修する予定があったところ、僕がWeb制作についてある程度知識があるということで、
「せっかくだから、こうやさんにお願いしよう。」
という流れになったようです。

コーディングについては最近触っていなかったので、若干の不安はありました。
が、その不安以上に、今までやってきたことが活かせることのうれしさの方が大きかったし、いざという時に聞ける先輩がいるという安心感がありました。

Sassについてあらためて理解する

まずは、コードの中身を見てみます。
LPなのになぜかPHPがガッツリ使われているし、Sassもしっかり使われています。

ひとまず、Sassについて使い方などを調べて、思い出して理解するところからです。笑

そういえば、少し前に「Dart Sass」なるものに移行して、@import が使えなくなり、代わりに @use と @forward を使うようになったんですね。

この @use と @forward の違いについて調べます。
どうやら、 @use は二段階潜って参照することはできないようです。（もうちょい自分の言葉で説明できるようになりたい。笑）

まあ、とりあえずざっくりと理解したところで、先に進みます。

コンパイル

次に、scssファイルをcssファイルにコンパイルしなければなりません。
scssファイルというのは、あくまでもcssを効率的に書くためのファイルで、最終的にcssファイルにコンパイルして集約しなければなりません。（この説明、合ってる？笑）

VSCodeの拡張機能「DartJS Sass Compiler and Sass Watcher」（名前長いね。笑）を入れて、設定を変えて、無事にコンパイルすることができました。
この辺りは、ググれば誰かが記事を書いてくれているんですよね。ありがたや。

CSSが効かない…

最低限の準備ができたので、いよいよLPの改修を。

まずは、テキストを追加するところから。
index.php にテキストを追加してみます。
ローカル環境で、テキストが反映されました。
もちろん、css はまだ書いていないので、テキストは左側に寄ったまま。

とりあえず、真ん中寄せにしてみようと、 text-align: center; を書いてみます。

「…あれ、変わらない。」

いろいろ見てみると…
どうやらcssファイルを読み込んでいないようです。

さらに調べたり、いろいろファイルを見てみたり、ケアレスミスがないかチェックしてみたり…

ダメだ…

さすがに自分では解決できないと思い、先輩に聞いてみることに。

画面共有をして、いろいろと見てもらった結果…

どうやら、ローカル環境の css には、本番環境の css が当たっているというのが原因でした。（説明難しい。笑）
原因は分かったのですが、それを変えるためにどのファイルの内容を書き換えれば良いのかがわかりません。

先輩曰く
「もしかしたら、あえてややこしくしてるのかもね。勝手に修正できないように。笑」

なるほど。
制作会社としては、継続的に仕事を依頼してもらうためにあえてLPの中身を複雑にしている、とも考えられますね。

結局、この日は解決策が分からず、翌日以降に持ち越しです。

過去の経験

本当なら、中島聡さんばりにロケットスタート時間術で高速で作業を進めたかったのですが…
なかなかそううまくはいかないですね。笑

とはいえ、今日思ったこととしては、
「過去の経験が少しだけ役に立ってる」
ということです。

Sassに関しても、少しググって調べればなんとなく思い出して、どういう構造になっているのか理解できます。

PHPに関しては、さすがに理解するのが難しいですが、少しは何をやっているのかがイメージできます。
これが全くの知識ゼロの状態だと、チンプンカンプンですね。笑

分からないことをググって調べるのも、プログラミングやWeb制作をやっていたおかげで癖になっています。
どのタイミングで人に聞くのかが、なかなか難しいんですけどね。笑

またLP改修について進捗があれば、noteでも投稿したいと思います。
需要なさそうですが。笑

最後までお読みいただき、ありがとうございました。