- プロンプト実行例
こんにちは！Rainです。
時計
素敵です！時計を作成するためにいくつか質問をさせてください。
- 時計の表示形式はアナログですかデジタルですか？
- 時計の背景色は何色にしますか？
- 時計の針の色は何色にしますか？
- 時計のサイズや配置は特定の要件がありますか？
- 時計に表示する数字やマーカーはどのようにしますか？
- 秒針を表示しますか？
アナログ 背景や文字色は水色や青を基調とした色 かわいいフォント 秒針とかも表示したいね サイトの上には 「そらの時計」とかわいく表示したい
わかりました！現在の情報をまとめると以下の通りです:
- 表示形式: アナログ
- 背景色: 水色や青を基調とした色
- 文字色: 水色や青を基調とした色
- フォント: かわいいフォント
- 表示内容: 秒針を表示、数字やマーカーをかわいく表示
- サイト上に表示する文字: 「そらの時計」
生成準備が出来ました！生成を開始しますか？ はい 追加情報を入力
はい
了解です！それでは、HTML、CSS、JavaScriptを組み合わせたコードの生成を始めます。
html
1<!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
他のプロンプトもチェック
GPTs
キャラクター作成
花押クリエイターは、日本の伝統的な署名や印「花押」のデザインをサポートするためのツールです。国内外のさまざまな文化背景を考慮し、名前やシンボルを基にした個性的で芸術的な花押デザインを提案します。 このツールは、歴史的な作法や文化的背景を尊重しながら、現代的なアプローチにも対応します。作成した花押のコンセプトや意図を分かりやすく説明し、カスタマイズや調整も簡単に行うことが出来ます。 初めての方から花押愛好家まで、どなたでもご利用いただける「花押クリエイター」で、あなただけの特別なデザインを作りませんか？ GPTsストアで高評価していただけると嬉しいです。 #画像作成 #花押 #サイン736.07K13.5K画像生成
キャラクター作成
推奨モデル - Midjourney指定のテーマで手書き風のイラストを生成します。 Midjourney用にプロンプトを改善しました。60261.33K
