プロンプトの概要

ここで紹介するプロンプトを使うと、「2071年のドーナツ部長」の一部の機能を持ったコードを生成することが可能です。

どんなプロンプトなのか？

2枚のPNG画像（背景透過）と3種類のテキストを重ね合わせて、ブラウザで表示可能にするコードを生成します。※プロンプトは自由に改変いただいても構いません。もちろん、商用利用も可能です！

今日の日付を取得し、画像の上に表示しますので、Javascriptを改修することでブラウザ上で動く時計として拡張させることも可能です。

また、このアウトプットをIPFSへ保存することで、動的に絵柄の変わるNFTにも応用ができます。

出力レイヤ

出力レイヤー構成─ Text2┣ Text1┣ img2┣ img1┣ Text3┣ Background

出力物・HTML・CSS・javascript

使用GPT

GPT-4での使用を想定しています。

どんなアウトプットが期待できるのか

出力レイヤー構成

─ Text2：Hello Worldにて白色で表示します┣ Text1：今日の日付を「年月日形式」にて黄色で表示します┣ img2：1600 × 1600サイズのpng画像をご用意ください（img2.png）┣ img1：1600 × 1600サイズのpng画像をご用意ください（img1.png）┣ Text3：縦書きで「拝啓」と白色で表示します┣ Background：青色のベタ塗りです

出力物

・HTML・CSS・javascript

注意事項

※まれにHTMLとCSSのみになることがありますが、「Javascriptも追加して」とオーダーを追加することで解決できます※ご利用には、コードエディタ（テキストエディタ）が必要です

プロンプトについて

以下のプロンプトをご利用ください

あなたはプロのプログラマです。HTMLとCSS、場合によってはJavascriptを使って、Webページを作成することができます。

以下の条件でHTMLとCSSを作成し、ブラウザで表示ができるようにしてください。

#条件・フォルダ構成　img1、img2、HTML、CSSは同じ階層にある・レイヤ構成　上から順に、Text2＞Text1＞img2＞img1＞Text3>Backgroundとする　レイヤ構成は、z-indexを用いてCSSに定義・画像のサイズ：1600×1600、表示サイズを画像サイズに合わせる

・img1：png、img2：png・Text2：Hello World（カラーコード：#DDDDDD、サイズ 20、フォント「Arial Black」）・Text1：今日の日付を取得し表示（カラーコード：#FFD700、サイズ 10、フォント「Arial Black」）・Text3は、縦書き。 拝啓 という文字を表示する（カラーコード：#DDDDDD、サイズ 30、フォント「HiraMinProN-W6」）・テキストの位置：viewport単位（vw、vh）により定義・Backgroundは、カラーコード #000080・ max-width:100%;height:auto;　を適用・コードは、HTMLとCSSに分けて記述する

出力物をカスタマイズするポイント

テキストの大きさを変えるには？

「style.css」をコードエディタで開いて、「#text1」または「#text2」の「font-size:」の数字を変更し、上書き保存してください。

（例）

※上記の「font-size: 10px;」を「font-size: 50px;」と変更すると、大きくなります。

テキストの位置を変えるには？

「style.css」をコードエディタで開いて、「#text1」または「#text2」の「top:」「left:」の数字を変更し、上書き保存してください。

（例）

※上記の「top: 40vh;」を「top: 80vh;」と変更すると、下に移動します。※上記の「left: 40vw;」を「left: 60vw;」と変更すると、右に移動します。

テキストの色を変えるには？

「style.css」をコードエディタで開いて、「#text1」または「#text2」の「color: #DDDDDD;」のカラーコード（ #DDDDDD）を変更し、上書き保存してください。

※カラーコードは「CSS カラーコード」と検索し、参照ください。