スクリプトAI 最新版!!
HTML・CSS・JavaScriptを生成できます！！ 完全なる最新プロンプトを使用し高クオリティなスクリプトコードを生成可能！！
推奨モデル - ChatGPT
17
0
320
121
投稿日時：
- プロンプト実行例
こんにちは！
ウェブで動くデジタル時計
リクエスト: ウェブで動くデジタル時計
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の凝ったデザインの追加により、デジタル時計がよりスタイリッシュで視覚的に魅力的になりました。
コメント 0
他のプロンプトもチェック
チャットボット
推奨モデル - ChatGPT何か質問したらあなたは出てきた回答を読んで確実にブチ切れます。 そのため沸点の低い人や血圧高い人は利用しないこと。 また周りに危険なものや割れやすいものがないことを確認してから利用すること。15195282.66K
