前回の記事でAIを活用したLP作成の方針は決まったので、いよいよコードを書いていきます🤔
いきなりWordPressに書き込むとやりづらそうなので、まずはVSコードで本番用とサンプル用のファイルを並列表示してみました。
※このブログはキャラクター同士の会話形式で進みます。 → 登場キャラクター紹介はこちら
なぜ本番とサンプルの2つを並べるのか
サンプルを見ないでコードを書けるほど頭に定着しておらず、常にサンプルを見ながら書きたい、というのが理由です😅
いきなり本番にコードを書くのは難しいね。まだ全然覚えてないよ〜😅
自分もスラスラ書けるほど覚えてないなぁ。サンプルはすぐに見られるようにしたいね。
サンプルは本番ファイルでミスったときのバックアップにもなりそうだな。
本番と練習を分けるのは山でも基本や。ぶっつけ本番で難ルートは行かへんで。
VSコードのSplit Editorなら、左右に並べられます。試してみてください。
Split Editorってどういうものなの？
いわゆる一つのアレだな。・・・・・・あとはまかせた😂
Split Editorは、画面を左右に分割して2つのファイルを同時に表示できる機能です。手順はこちらです。
Split Editor（画面分割）の使い方
HTMLとCSSを横に並べて同時に確認できます
VSコードで本番とサンプルを並べてみた
本番とサンプルのHTMLとCSSをすべて同時に見たい、ということでこういう形になりました😀
サンプルを見ながら本番に写経し、
よくわからないプロパティなどは、
都度Claudeに聞いていく感じですね。
ちなみにClaudeは聞いたことに対して、回答を図解してくれることが多いので、
理解するうえでも大変助かっております👍
このやり方なら、少しずつ理解しながら手も動かせるよ。
サンプルって、登山マップみたいなもんだね。地図なしでいきなり山登ったら遭難するもんね～。
そや。地図読めるようになったら、次は地図に頼らず歩いてみぃ。それが本物や。
ミナ、お前まだ地図読む前に遭難しそうだけどな。
うるさーい！！！💢💢💢 ライ太には言われたくないし！！
うひゃー、怒るってことは、図星だろ。こわいこわい🤣
ミナさんは山に例えて、本質をついていましたよ。十分です👍
まあ、最初は念入りに地図を見て、登山道を間違えないようにだね。
まとめ
１：VSコードのSplit Editorを使うと、見たいものが複数見れて便利
２：サンプル（地図）見ながら、本番入力できる（登山道歩ける）ので安心
VSコードの画面分割により、だいぶ作業がしやすくなりました😀
画面が小さいと全体的に見づらいので、
VSコード表示用の大きなモニターがあったほうが便利かなと思います。
最後に現在のLP進捗ですが、
以下のような感じです。
見た目がいい感じになってきて、
作る方も楽しくなってきますね😆
ではでは👋
