3x3 グリッドレイアウト作成プロンプト

3x3 グリッドレイアウトのウェブページを作成するプロンプト

3x3 のグリッドレイアウトを持つウェブページを作成するためのプロンプトについて解説します。 このプロンプトは、以下の HTML と CSS コードを生成することを目的としています。

プロンプトの内容:

画面全体を 3x3 のグリッドレイアウトで分割。
中央の列は 960px の固定幅。
左右の列は可変幅。
上の行 (ヘッダー) は 100px の固定高。
下の行 (フッター) は 100px の固定高。
中央の行 (コンテンツ) は可変高。
ヘッダーとフッターには、背景色と文字色を設定。
9つのセルの中にヘッダー、コンテンツ、フッターを配置。
UTF-8文字コードを使用。

上記のプロンプトは、Google の大規模言語モデル「Gemini 2.0 Flash Thinking Experimental 01-21」によって作成されました。

プロンプトの目的:

このプロンプトは、ウェブページの基本的なレイアウトを、大規模言語モデルを使って効率よく生成する試みです。特に、CSS Grid Layout を利用し、レスポンシブで柔軟な 3x3 グリッドレイアウトを、HTML/CSS の初心者の方にも分かりやすいように、段階的な指示で実現することを目指しています。

各種LLMでの実行結果:

• Gemini 2.0 Flash: [実行結果]
• Gemini 2.0 Flash-Lite Preview 02-05: [実行結果]
• Gemini 2.0 Pro Experimental 02-05: [実行結果]
• Gemini 2.0 Flash Thinking Experimental 01-21: [実行結果]
• Claude 3.5 Sonnet: [実行結果]
• OpenAI GPT-4: [実行結果]
• Vercel v0: [実行結果]
• DeepSeek-V3: [実行結果]
• DeepSeek-R1: [実行結果]

補足事項:

上記のリンク先には、各LLMが生成したコードをそのまま掲載しています。

実行結果は、LLMの種類やバージョン、プロンプトの与え方によって異なる場合があります。

このプロンプトは実験的なものですので、実際のウェブページ制作では、必要に応じてプロンプトを調整したり、生成されたコードを修正したりしていただく必要があります。