ホームページの作成「html+css」|画像生成と会話するAIの魅力と可能性
https://note.com/chat_gpt777/n/nf357e11a7c65
最近のホームページの作成は「html+css」で文章とレイアウトを別の仕組みで整理することが多い。従来ホームページなどでレイアウトを表組を使って作成していたものにとっては作成途中に完成形を見ることが出来ないので、何かとやりにくいので、未だに表組を使って作成している人も多いのではないかと思う。
最近はやりの生成AIを使って、表組を使ってレイアウト、文章、写真などで構成してある「html」のソースコード(htmlファイルを秀丸等エディタで開く)を入力して一番上に「以下のhtmlは表組でレイアウトを作成しています。これをcssでレイアウト、本文をhtmlに分けてください。」と指示すると綺麗にhtmlとcssを分けてくれる。またチェックしてレイアウトを変更したときは、指示を出す。表の番号の大きさは○○等指示して思い通りのレイアウトにすることが出来る。
またファイルなどはimageフォルダに入れたままにして、ファイル名もそのまま使える。「html+css」に分けるのは凄く簡単になりました。今までの経験で表組で下書きを作って、正規版はそれを生成AIで仕上げをするという形で完成させればと思います。秀丸、vscode等のエディタを使うと作業をするのが楽です。またGemini2.0でやってみましたが、Chatgpt、Claude等でも簡単に分離してくれます。出来上がったコードを細かくチェックするより、出来上がったページを見ながら、生成AIに自然言語で指示(例えば○○は強調文字にとか)すればすぐに修正してくれる。「html+css」の方が見た目は良いと思います。表組は少し野暮ったい感じがしますね。
「生成AIでソフトウェアを開発してみよう」表組でレイアウト
https://pasopia.velvet.jp/2025/photop/
「生成AIでソフトウェアを開発してみよう」CSSでレイアウト
https://pasopia.velvet.jp/2025/photop/aindex.html