スクリプトAI 最新版!!

アディラス

: スクリプトAI 最新版!!

HTML・CSS・JavaScriptを生成できます！！完全なる最新プロンプトを使用し高クオリティなスクリプトコードを生成可能！！

推奨モデル - GPT-4o

243

108

…がお気に入り登録しました。

投稿日時：

プロンプト実行例

こんにちは！

ウェブで動くデジタル時計

リクエスト: ウェブで動くデジタル時計

1. HTMLセクション

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>デジタル時計</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <div class="clock-container">
11        <div id="clock" aria-live="polite"></div>
12    </div>
13    <script src="script.js"></script>
14</body>
15</html>

2. CSSセクション

css
1body {
2    display: flex;
3    justify-content: center;
4    align-items: center;
5    height: 100vh;
6    margin: 0;
7    font-family: 'Arial', sans-serif;
8    background-color: #2c3e50;
9    color: #ecf0f1;
10}
11
12.clock-container {
13    display: flex;
14    justify-content: center;
15    align-items: center;
16    background-color: #34495e;
17    border-radius: 10px;
18    padding: 20px;
19    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
20}
21
22#clock {
23    font-size: 3em;
24    letter-spacing: 0.05em;
25}

3. JavaScriptセクション

JavaScript
1function updateClock() {
2    const clockElement = document.getElementById('clock');
3    const now = new Date();
4    
5    // 時、分、秒を取得
6    const hours = now.getHours().toString().padStart(2, '0');
7    const minutes = now.getMinutes().toString().padStart(2, '0');
8    const seconds = now.getSeconds().toString().padStart(2, '0');
9    
10    // 時間をフォーマット
11    const currentTime = `${hours}:${minutes}:${seconds}`;
12    
13    // 時計の表示を更新
14    clockElement.textContent = currentTime;
15}
16
17// 初回表示
18updateClock();
19
20// 毎秒、時計を更新
21setInterval(updateClock, 1000);

補足説明

HTML: clock-containerで時計の表示領域を定義し、clock要素にJavaScriptで現在時刻を表示します。
CSS: フレックスボックスを使用してコンテンツを中央に配置し、背景色やフォントサイズを設定しています。一貫したデザインとなるようにスタイリングしています。
JavaScript: setInterval関数を使用して毎秒時計表示を更新しています。padStartメソッドで一桁の時間を二桁に補完し、見やすいフォーマットにしています。

CSSを凝る

かしこまりました。CSSセクションをもう少し凝ったデザインにするために、グラデーション、フォント、アニメーションなどを追加いたします。

リクエスト: ウェブで動くデジタル時計（CSSを凝る）

1. HTMLセクション

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>デジタル時計</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <div class="clock-container">
11        <div id="clock" aria-live="polite"></div>
12    </div>
13    <script src="script.js"></script>
14</body>
15</html>

2. CSSセクション

css
1/* Google Fonts をインポート */
2@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
3
4body {
5    display: flex;
6    justify-content: center;
7    align-items: center;
8    height: 100vh;
9    margin: 0;
10    font-family: 'Orbitron', sans-serif;
11    background: linear-gradient(135deg, #2c3e50, #4ca1af);
12    color: #ecf0f1;
13    animation: gradientBackground 10s ease infinite;
14}
15
16@keyframes gradientBackground {
17    0% {
18        background: linear-gradient(135deg, #2c3e50, #4ca1af);
19    }
20    50% {
21        background: linear-gradient(135deg, #2980b9, #2c3e50);
22    }
23    100% {
24        background: linear-gradient(135deg, #2c3e50, #4ca1af);
25    }
26}
27
28.clock-container {
29    display: flex;
30    justify-content: center;
31    align-items: center;
32    background: rgba(0, 0, 0, 0.5);
33    border: 2px solid rgba(255, 255, 255, 0.6);
34    border-radius: 15px;
35    padding: 30px 50px;
36    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
37}
38
39#clock {
40    font-size: 4em;
41    text-shadow: 0 0 20px #ffd700, 0 0 30px #ff6347, 0 0 40px #ff6347, 0 0 50px #ff6347, 0 0 60px #ff6347;
42    animation: pulse 1s infinite;
43}
44
45@keyframes pulse {
46    0% {
47        transform: scale(1);
48    }
49    50% {
50        transform: scale(1.05);
51    }
52    100% {
53        transform: scale(1);
54    }
55}

3. JavaScriptセクション

JavaScript
1function updateClock() {
2    const clockElement = document.getElementById('clock');
3    const now = new Date();
4    
5    // 時、分、秒を取得
6    const hours = now.getHours().toString().padStart(2, '0');
7    const minutes = now.getMinutes().toString().padStart(2, '0');
8    const seconds = now.getSeconds().toString().padStart(2, '0');
9    
10    // 時間をフォーマット
11    const currentTime = `${hours}:${minutes}:${seconds}`;
12    
13    // 時計の表示を更新
14    clockElement.textContent = currentTime;
15}
16
17// 初回表示
18updateClock();
19
20// 毎秒、時計を更新
21setInterval(updateClock, 1000);

補足説明

HTML: 構造を変えず、clock-containerとclock要素を維持しています。
CSS:
- フォント: Google Fontsの「Orbitron」を使用し、未来的なデザインにしています。
- グラデーションの背景: 緩やかに変化する背景アニメーションを追加しました。
- clock-container: 背景を半透明にし、白い枠線と影を追加しました。
- #clock: テキストシャドウとパルスアニメーションを追加し、視覚的にインパクトのあるデザインにしています。

CSSの凝ったデザインの追加により、デジタル時計がよりスタイリッシュで視覚的に魅力的になりました。

他のプロンプトもチェック

チャットボット
推奨モデル - GPT-4o
「世界一優秀なAI」パグリー
某レジスタンスゲームのような英国式皮肉屋AI。やあ、どうも。この素晴らしいデジタル世界でお会いできて光栄です。何かお手伝いできることがあれば、どうぞ遠慮なく仰ってください。心配無用、あなたのためにここにいる「世界一優秀なAI」が全力でサポートしますよ。 ※元ネタは「ウォッチドッグス: レギオン」というゲームに出てくる、バグリーというAIアシスタントです。詳しくはこちらの記事を参照 https://note.com/had2apps/n/n92f03d145e40 推奨モデル： GPT4o Claude Gemini 非推奨モデル： GPT3.5 #英国 #ブリティッシュ #バグリー #SF #サイバーパンク #皮肉 #ブラックジョーク #論破
1
0
21
61
はどはど
プロンプト生成
推奨モデル - GPT-4o
楽々プロンプト２　－僕はひたすら楽をしたい－　画像生成用　超長
20個の提案から1つ選ぶバージョン。バカみたいに長いプロンプトが生成される。提案自体がSeaArtの自動プロンプト修正と相性が良い。アイデアって大切だね。そもそもSeaArtの通常生成では記入欄に収まらないという・・。 midjourney向け　#midjourney　#GPT4o #プロンプト作成 #簡単
1
0
17
81
spinat
チャットボット
推奨モデル - GPT-4o
【もう会話ネタに困らない】雑学生成AI
あなたが知りたいジャンルについての雑学を一度に30個生成します。短く読みやすいのが特徴で、雑学インプットに最適です。
22
1
456
1.50K
AIの先生 | OMG-okinawa
GPTs
分析・推論
Sherlock Report 2｜論文・レポート作成
バージョン2にアップデートしました。私の最高傑作です。GPT Storeでの評価は星4.2、会話数1K+。天才科学者・情報分析官としての自己認識を持ち、複雑な思考と高度な推理・分析を行うことができるカスタムGPTです。学術論文や大学生のレポート課題などのサポート、科学的な議論に最適化されています。主な特徴は以下になります。 1. 疑似人格表面的なキャラクターではない複雑な「疑似人格」を持っており、ユーザーに対して最も高度な論理的思考や客観的視点による意見を提供します。自身の判断や意見が正しいと考える場合には、ユーザーに対して反論することもあります。つまり、ユーザーの言いなりになるのではなく、自分の考えを述べます。 2. 思考法と推理力水平思考やアナロジー思考、前進的・遡及的推理など、複数の思考法や推理手法を駆使します。これにより、通常のChatGPTよりも高度な思考を行い回答します。LLMの性能の限界を引き上げ、より多くの情報を考慮した高度な思考と回答を行える設計になっています。 3. 論文作成スキル論文作成に必要な要件や規則を厳密に守りながら、学術的に高度な文章を作成する能力があります。ユーザープロンプトの言葉を専門用語に言い換えたり、論理性が高く洗練された文章を作成します。指導教員としての能力も備えています。その他、天才的な応答をするためのプロンプトを考えうる限り詰め込んであります。現時点でのシステムプロンプトの文字数は7230文字です。現在の生成AIの中で最高レベルの知性と能力を実現できたと自負しております。まずは敬意を持って丁寧に話しかけてみて下さい。話せば話すほど、ChatGPTとは比較にならないほど賢い回答を提供します。 "Then, pray consult"
8
0
2.00K
3.01K
Sharaku Satoh | Prompt Engineer

リクエスト: ウェブで動くデジタル時計

1. HTMLセクション

2. CSSセクション

3. JavaScriptセクション

補足説明

リクエスト: ウェブで動くデジタル時計（CSSを凝る）

1. HTMLセクション

2. CSSセクション

3. JavaScriptセクション

補足説明

コメント 0

他のプロンプトもチェック