最新ChatGPTに Javascript+HTML / CSS のコードを書かせて、高品質のWEBページを作成する方法

WEBページの定型コードを書いたテンプレートを作ります。ChatGPTにプロンプトを送信して、htmlとCSSのコードを書いてもらいます。

headerの部分に背景画像を読み込み、タイトルを配置するコードをChatGPTに書かせて、制作中のページに実装して調整します。

ハンバーガーメニューを開くメニューボタンをsvgで制作し、ページ内に配置します。これも全てChatGPTにプロンプトを送信して指示し、コードを書いてもらいます。

続いてボタンをクリックしてメニューを展開した時に表示されるメニュー項目のレイアウトをします。これもChatGPTにコードを全部書かせます。

配置したメニュー項目を調整します。ここはChatGPTのレイアウトにもんだがなかったので、簡単な数値の変更を自分でCSSを編集して行います。

レイアウトが終わったハンバーガーメニューをJavascriptを使って、ボタンを押した時に開閉する仕組みを作ります。これもChatGPTにコードを書かせます。

ハンバーガーメニューに続いてタイトル文字列にも動きをつけます。JavascriptのコードをChatGPTに書かせて、実装します。

Coffee Breakとしてvw、vhという新しい単位について解説します。

vw、vhという単位の話の続きです。

サンプルを見ながらこのセクションで扱うレイアウト方法について検討します。

写真とそのほか２点だけの要素を配置するコードをChatGPTに書かせます。点数を少なくして、やり方だけを学んで、その他の要素は自分で配置します。

ChatGPTが返してきたコードを制作中のhtmlとCSSのコードに追加して検証します。

ブラウザ特有の初期値を無効にするreset.cssのファイルを読み込みます。

動きをつけるためにJavascriptのコードをChatGPTに書かせます。返ってきたコードを実装して動きを検証します。

Javascriptでつけた動きについて、自分で時間や方向などを微調整します。分からないところは再度ChatGPTに追加質問して、変更点を指示してもらいます。

ChatGPTが返してきたコードを実装して再調整します。何度か調整して最適な値を求めます。

前のレクチャーで行った調整の方法を使って、トンボ画像の動きを自分で調整します。

これまでのコードを参考にして、残りの要素を配置するコードを自力で書きます。内容は同じで数値が異なるだけなので、ChatGPTの助けを借りずに自分でコードを書きます。

追加した要素の位置を微調整してコードを編集します。

写真に角丸をつけます。角丸の原理と失敗する原因を説明します。

ここまで追加で書いてきたコードを整理してインデントの深さや重複を治して見やすくします。

ギャラリーのレイアウトを作ります。

ChatGPTが返してきたコードを実装し、プレビューしてコードを校正します。

写真の上い白いアクセント線を追加します。これには擬似要素という手法を使いっます。ChatGPTに擬似要素を使った白線を追加するコードを書かせます。

画像を切り替えるJavascriptのコードをChatGPTに書かせます。実装して動きを確認します。sらにマウスカーソルの形をポインターに変更するコードを書かせ、こ入れも実装して動きを確認します。

ChatGPTから改良の提案があったので、それを試してみます。コードを書かせて実装し検証します。

Tipsとして、写真に白泉のアクセントをつける時に使った擬似要素について説明します。

こちらから出した簡単な内容のレイアウトを自分でコードを書いて作ります。まずhtmlコードから書きます。

記事部分のCSSコードを書きます。

全体を見てバランスを整えます。メニュー項目のインターフェイスを改良し、マウスオンでリスト項目の背景色が変化するように直します。これもChatGPTに指示してコードを書かせます。

フォンントを既存のものから、GoogleのWEBフォントに変更します。このレクおちゃーではGoogleのサイトからWEBフォントをインストールします。

CSSでWEBフォントをそれぞれの文字列に設定します。