- プロンプト実行例
こんにちは！Rainです。
時計
素敵です！時計を作成するためにいくつか質問をさせてください。
- 時計の表示形式はアナログですかデジタルですか？
- 時計の背景色は何色にしますか？
- 時計の針の色は何色にしますか？
- 時計のサイズや配置は特定の要件がありますか？
- 時計に表示する数字やマーカーはどのようにしますか？
- 秒針を表示しますか？
アナログ 背景や文字色は水色や青を基調とした色 かわいいフォント 秒針とかも表示したいね サイトの上には 「そらの時計」とかわいく表示したい
わかりました！現在の情報をまとめると以下の通りです:
- 表示形式: アナログ
- 背景色: 水色や青を基調とした色
- 文字色: 水色や青を基調とした色
- フォント: かわいいフォント
- 表示内容: 秒針を表示、数字やマーカーをかわいく表示
- サイト上に表示する文字: 「そらの時計」
生成準備が出来ました！生成を開始しますか？ はい 追加情報を入力
はい
了解です！それでは、HTML、CSS、JavaScriptを組み合わせたコードの生成を始めます。
html1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<title>そらの時計</title> 7<style> 8 body { 9 background-color: lightblue; 10 text-align: center; 11 font-family: 'Arial', sans-serif; 12 } 13 #clock { 14 width: 200px; 15 height: 200px; 16 border: 10px solid blue; 17 border-radius: 50%; 18 position: relative; 19 margin: 50px auto; 20 } 21 #hour, #minute, #second { 22 position: absolute; 23 width: 50%; 24 height: 2px; 25 background-color: blue; 26 transform-origin: 100%; 27 transition: transform 0.5s; 28 } 29 #hour { 30 height: 4px; 31 background-color: darkblue; 32 } 33</style> 34</head> 35<body> 36<h1>そらの時計</h1> 37<div id="clock"> 38 <div id="hour"></div> 39 <div id="minute"></div> 40 <div id="second"></div> 41</div> 42<script> 43 function setClock() { 44 const now = new Date(); 45 const seconds = now.getSeconds(); 46 const minutes = now.getMinutes(); 47 const hours = now.getHours(); 48 49 const secondDeg = seconds * 6; 50 const minuteDeg = minutes * 6 + seconds * 0.1; 51 const hourDeg = hours * 30 + minutes * 0.5; 52 53 document.getElementById('second').style.transform = `rotate(${secondDeg}deg)`; 54 document.getElementById('minute').style.transform = `rotate(${minuteDeg}deg)`; 55 document.getElementById('hour').style.transform = `rotate(${hourDeg}deg)`; 56 } 57 58 setClock(); 59 setInterval(setClock, 1000); 60</script> 61</body> 62</html>
このコードは、背景色や文字色を水色や青を基調としたものに設定し、かわいいフォントを使用して「そらの時計」というタイトルを表示します。時計自体はアナログ表示で、秒針、分針、時針が表示されるようになっています。
お楽しみください！他に何か作成したいものがあれば教えてください。
コメント 0
他のプロンプトもチェック
画像生成
資料作成
推奨モデル - DALL•E 3指定されたテーマの形を打ち上げ花火として、シンプルに表現するプロンプトです。 細部を極力省き、テーマの大枠の形だけを花火で描きます。複雑さを排除したシンプルなデザインでありながら、花火は鮮やかで、見た人を驚かせること間違いなし。さらに、画像の最下部には建物や山々などのシルエットが描かれ、花火の美しさを引き立てます。このプロンプトで生成された花火の画像は、驚きと感動を呼び起こし、特別な瞬間を彩ります。どんなテーマでも、感動的な花火ショーを楽しむことができるでしょう。 【用途例】 記念日のお祝い SNSの投稿ネタ SNSのプロフィール画像 イベント告知 シーズナルデコレーション グリーティングカード オンライン会議の背景 アート作品の一部 ウェディング演出 パーティーのデコレーション 出版物のカバーアート デジタル年賀状 ブログやウェブサイトのヘッダー画像 プレゼン資料などの表紙 ---------- 😊少しでも気に入っていただけましたら、お気に入り（❤マーク）をクリックしていただけると、とても励みになりますので、ぜひお願いいたします。 😊また、「いつか使ってみよう」と思っている方も、お気に入りに登録しておくと、いつでもマイページからすぐにご利用いただけます。 😊感想など、お気軽にコメントください。4138217画像生成
キャラクター作成
絵柄：Pako風（繊細な線、光の表現が美しい中性的な絵柄） キャラの雰囲気：カルナ風（Fateのキャラのように気品とミステリアスな魅力あり） 見た目： 真っ白な肌と白髪（肩までのストレート、右目が隠れる） ピンクの虹彩、薄い青眼（縁もピンク） 痩身で23歳くらいの青年 服装：やや裸体に近く、芸術的な布（ゆるくまとっている、または上半身裸でシーツのようなものを羽織る） ポーズ・表情：ソファに気怠げに座り、アンニュイで色気のある表情 雰囲気：高貴さと儚さが共存し、エロスよりも芸術性を重視007341画像生成
キャラクター作成
推奨モデル - DALL•E 3DALL·E 3は，シンプルな日本語で画風を指示しても，割としっかり効きます。他の画像生成AIサービスのように，複雑な呪文を唱えなくても十分ハイクオリティかつ期待通りの出力を得ることが可能です。 今回は，「往年のタイリングされたドット絵」をサンプルに取り上げてみました。 「アニメ調」「ドット絵」といった基本的なスタイルを指定する指示は，適当に書くだけて十分効果を発揮します。「PC-98風のタイリング」のような細かい指示は，「必ず〜」のような枕詞を書かないと，無視される場合があります。 DALL·E 3を利用できる方は，「必ず〜」の有無により生成される英語のプロンプトの表現が変わることを確認可能です。 #ドット絵 -- 例えば，サンプルの地下鉄は以下のようなプロンプトに変換されます。 Create a pixel art image in anime style with PC-98 style tiling, using less than 16 colors. The scene is set on a Japanese subway platform, capturing the moment a Japanese train is arriving. The image should embody the limited color palette characteristic of early PC-98 games, capturing the detailed, pixelated aesthetic of a Japanese subway environment and the dynamic scene of the train arriving.3027250
