css+htmlでホームぺージ｜画像生成と会話するAIの魅力と可能性
https://note.com/chat_gpt777/n/nb67eb10f1eac
以前に作ったホームページ（静的ページで表組でレイアウトを構成している）をcssでレイアウトするように変えてみた。つづき交流ステーションのトップページをcssを使ったページに変換してみました。やり方は比較的簡単に出来ました。細かいところをこだわると結構、時間が掛かる。凝れば凝るほど細かく作ることが出来る。（でも根気のいる仕事になりますね）
Gemini2.0
https://gemini.google.com/app
Gemini2.0にindex.htmlのファイルデータを読み込ませます。そしてレイアウトをcssで、本文htmlで分けてくださいと指示する。すると5分から10分で完了します。
出来上がったコードを指示に従って、index.html、style.cssで同じフォルダに入れる。勿論imageフォルダも同じところに置くそしてindex.htmlをダブルクリックするとWebブラウザが開いて閲覧することが出来る。出来栄えがわかります。その後何回か、レイアウトに関して注文を付けながら完成にもっていきます。
つづき交流ステーション（表組でレイアウト）現状
https://www.city-yokohama-tsuzuki.net/
つづき交流ステーション（cssでレイアウト）仮です
https://www.city-yokohama-tsuzuki.net/2025index.html
今回のトップページは表組で複雑怪奇な入れ子構造の構成で作成してあり、修正するのはなかなか大変で、あまり弄りたくないものでした。でも生成AIはもろともせず、どんどんコードを書き換えてくれました。（文句も言わず黙って）
またページのキャプチャー画面、urlなどを資料してアップロードしてそのイメージで作成してとか指示すると、それなりに替えてくれます。また背景の色などは画像にしてこの色にしてと指示すると色を分析して同じ色を使ってくれます。今まで色番号を調べてコードを指定していましたね。それが簡単に出来るようになった。
ホームーページビルダーで表組でレイアウトを作ることでどんなホームページにしたいかという意思がはっきり分かります。そこまで意思表示すると生成AIでcssとhtmlで綺麗な最新とコードで記述してくれます。
秀丸、VSCODE等のエディタは必須になりますね。html、cssを全然知らなくても自然言語で、指示すると作成、修正、変更などをやってくれます。出来上がったアウトプットを名前を付けて、サーバーにアップロードするだけで完了です。自分でサーバーをもってアップロードしたり、修正したり、追加したりした経験のある方なら簡単に使いこなせると思います。
使える生成AIとしてはClaude、Gemini2.0が優秀です。Chatgptはちょっとコード生成は苦手かな（いつもoutputだしてくれないので使っていない。でも進化しているかも）
プロンプト
「以下のhtmlは表組でレイアウトを作成しています。これをcssでレイアウト、本文をhtmlに分けてください。」
