世界最大級の長行スクリプトコードを生成AI！！ ※Claude 3.5 Sonnet推奨！

アディラス

: 世界最大級の長行スクリプトコードを生成AI！！ ※Claude 3.5 Sonnet推奨！

長い行のスクリプトコードを生成します！

推奨モデル - GPT-4o

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

投稿日時：

プロンプト実行例

こんにちは！

HTMLを使い、CSSを凝ったデザイン性重視・高性能なデジタル時計

承知しました。HTMLとCSSを使用して、デザイン性重視かつ高性能なデジタル時計を作成します。このコードは1000行以上になるように、詳細な実装、豊富なコメント、さまざまな機能、そしてテストケースを含めて作成します。

まず、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    <style>
8        /* ここにCSSを記述します（後ほど詳細に記述します） */
9    </style>
10</head>
11<body>
12    <div class="clock-container">
13        <div class="clock">
14            <div class="time-display">
15                <span class="hours">00</span>
16                <span class="colon">:</span>
17                <span class="minutes">00</span>
18                <span class="colon">:</span>
19                <span class="seconds">00</span>
20            </div>
21            <div class="date-display">
22                <span class="year">2023</span>
23                <span class="month">01</span>
24                <span class="day">01</span>
25            </div>
26            <div class="day-of-week">Sunday</div>
27            <div class="timezone">UTC+09:00</div>
28        </div>
29        <div class="controls">
30            <button class="toggle-theme">テーマ切替</button>
31            <button class="toggle-format">12/24時間制切替</button>
32            <button class="set-alarm">アラーム設定</button>
33            <button class="toggle-stopwatch">ストップウォッチ</button>
34            <button class="toggle-timer">タイマー</button>
35        </div>
36        <div class="alarm-container" style="display: none;">
37            <input type="time" id="alarm-time">
38            <button class="set-alarm-btn">アラームをセット</button>
39        </div>
40        <div class="stopwatch-container" style="display: none;">
41            <div class="stopwatch-display">00:00:00</div>
42            <button class="start-stopwatch">開始</button>
43            <button class="stop-stopwatch">停止</button>
44            <button class="reset-stopwatch">リセット</button>
45        </div>
46        <div class="timer-container" style="display: none;">
47            <input type="number" id="timer-hours" min="0" max="23" placeholder="時">
48            <input type="number" id="timer-minutes" min="0" max="59" placeholder="分">
49            <input type="number" id="timer-seconds" min="0" max="59" placeholder="秒">
50            <button class="start-timer">開始</button>
51            <button class="stop-timer">停止</button>
52            <button class="reset-timer">リセット</button>
53            <div class="timer-display">00:00:00</div>
54        </div>
55    </div>
56
57    <script>
58        // ここにJavaScriptを記述します（後ほど詳細に記述します）
59    </script>
60</body>
61</html>

次に、CSSを記述します。デザイン性を重視し、さまざまな視覚効果を取り入れます。

css
1/* リセットCSS */
2* {
3    margin: 0;
4    padding: 0;
5    box-sizing: border-box;
6}
7
8/* 基本スタイル */
9body {
10    font-family: 'Arial', sans-serif;
11    display: flex;
12    justify-content: center;
13    align-items: center;
14    min-height: 100vh;
15    background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
16    color: #ffffff;
17    transition: background 0.5s ease;
18}
19
20/* ライトテーマ */
21body.light-theme {
22    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
23    color: #333333;
24}
25
26/* 時計コンテナ */
27.clock-container {
28    background: rgba(0, 0, 0, 0.5);
29    border-radius: 20px;
30    padding: 40px;
31    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
32    text-align: center;
33    transition: all 0.5s ease;
34}
35
36/* ライトテーマの時計コンテナ */
37.light-theme .clock-container {
38    background: rgba(255, 255, 255, 0.8);
39    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
40}
41
42/* 時計表示 */
43.clock {
44    font-size: 4rem;
45    margin-bottom: 20px;
46}
47
48/* 時間表示 */
49.time-display {
50    display: flex;
51    justify-content: center;
52    align-items: center;
53}
54
55/* 時、分、秒の数字 */
56.hours, .minutes, .seconds {
57    display: inline-block;
58    width: 100px;
59    text-align: center;
60    background: rgba(0, 0, 0, 0.2);
61    border-radius: 10px;
62    padding: 10px;
63    margin: 0 5px;
64    transition: all 0.3s ease;
65}
66
67/* ライトテーマの時、分、秒の数字 */
68.light-theme .hours, .light-theme .minutes, .light-theme .seconds {
69    background: rgba(0, 0, 0, 0.1);
70}
71
72/* コロン */
73.colon {
74    font-size: 3rem;
75    animation: blink 1s infinite;
76}
77
78/* コロンの点滅アニメーション */
79@keyframes blink {
80    0%, 100% { opacity: 1; }
81    50% { opacity: 0; }
82}
83
84/* 日付表示 */
85.date-display {
86    font-size: 1.5rem;
87    margin-top: 10px;
88}
89
90/* 年、月、日の数字 */
91.year, .month, .day {
92    display: inline-block;
93    background: rgba(0, 0, 0, 0.2);
94    border-radius: 5px;
95    padding: 5px 10px;
96    margin: 0 5px;
97}
98
99/* ライトテーマの年、月、日の数字 */
100.light-theme .year, .light-theme .month, .light-theme .day {
101    background: rgba(0, 0, 0, 0.1);
102}
103
104/* 曜日表示 */
105.day-of-week {
106    font-size: 1.2rem;
107    margin-top: 10px;
108    font-style: italic;
109}
110
111/* タイムゾーン表示 */
112.timezone {
113    font-size: 1rem;
114    margin-top: 5px;
115    opacity: 0.7;
116}
117
118/* コントロールボタン */
119.controls {
120    margin-top: 20px;
121    display: flex;
122    justify-content: center;
123    flex-wrap: wrap;
124}
125
126/* ボタン共通スタイル */
127button {
128    background: #4CAF50;
129    border: none;
130    color: white;
131    padding: 10px 20px;
132    text-align: center;
133    text-decoration: none;
134    display: inline-block;
135    font-size: 16px;
136    margin: 4px 2px;
137    cursor: pointer;
138    border-radius: 5px;
139    transition: all 0.3s ease;
140}
141
142/* ボタンホバー効果 */
143button:hover {
144    background: #45a049;
145    transform: translateY(-2px);
146    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
147}
148
149/* ボタンアクティブ効果 */
150button:active {
151    transform: translateY(0);
152    box-shadow: none;
153}
154
155/* アラームコンテナ */
156.alarm-container {
157    margin-top: 20px;
158}
159
160/* アラーム入力フィールド */
161#alarm-time {
162    padding: 10px;
163    font-size: 16px;
164    border: none;
165    border-radius: 5px;
166    margin-right: 10px;
167}
168
169/* ストップウォッチコンテナ */
170.stopwatch-container {
171    margin-top: 20px;
172}
173
174/* ストップウォッチ表示 */
175.stopwatch-display {
176    font-size: 2rem;
177    margin-bottom: 10px;
178    background: rgba(0, 0, 0, 0.2);
179    border-radius: 10px;
180    padding: 10px;
181    display: inline-block;
182}
183
184/* ライトテーマのストップウォッチ表示 */
185.light-theme .stopwatch-display {
186    background: rgba(0, 0, 0, 0.1);
187}
188
189/* タイマーコンテナ */
190.timer-container {
191    margin-top: 20px;
192}
193
194/* タイマー入力フィールド */
195#timer-hours, #timer-minutes, #timer-seconds {
196    width: 50px;
197    padding: 5px;
198    font-size: 16px;
199    border: none;
200    border-radius: 5px;
201    margin-right: 5px;
202    text-align: center;
203}
204
205/* タイマー表示 */
206.timer-display {
207    font-size: 2rem;
208    margin-top: 10px;
209    background: rgba(0, 0, 0, 0.2);
210    border-radius: 10px;
211    padding: 10px;
212    display: inline-block;
213}
214
215/* ライトテーマのタイマー表示 */
216.light-theme .timer-display {
217    background: rgba(0, 0, 0, 0.1);
218}
219
220/* レスポンシブデザイン */
221@media (max-width: 600px) {
222    .clock {
223        font-size: 3rem;
224    }
225
226    .hours, .minutes, .seconds {
227        width: 80px;
228    }
229
230    .date-display {
231        font-size: 1.2rem;
232    }
233
234    .controls {
235        flex-direction: column;
236    }
237
238    button {
239        width: 100%;
240        margin: 5px 0;
241    }
242}
243
244/* アニメーション */
245@keyframes fadeIn {
246    from { opacity: 0; }
247    to { opacity: 1; }
248}
249
250.clock-container {
251    animation: fadeIn 1s ease;
252}
253
254@keyframes pulse {
255    0% { transform: scale(1); }
256    50% { transform: scale(1.05); }
257    100% { transform: scale(1); }
258}
259
260.hours, .minutes, .seconds {
261    animation: pulse 2s infinite;
262}
263
264/* カスタムスクロールバー */
265::-webkit-scrollbar {
266    width: 10px;
267}
268
269::-webkit-scrollbar-track {
270    background: #f1f1f1;
271}
272
273::-webkit-scrollbar-thumb {
274    background: #888;
275    border-radius: 5px;
276}
277
278::-webkit-scrollbar-thumb:hover {
279    background: #555;
280}
281
282/* フォーカス時のスタイル */
283button:focus, input:focus {
284    outline: none;
285    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
286}
287
288/* アクセシビリティ向上のためのスタイル */
289.visually-hidden {
290    position: absolute !important;
291    height: 1px;
292    width: 1px;
293    overflow: hidden;
294    clip: rect(1px 1px 1px 1px);
295    clip: rect(1px, 1px, 1px, 1px);
296    white-space: nowrap;
297}
298
299/* 印刷時のスタイル */
300@media print {
301    body {
302        background: none;
303        color: #000;
304    }
305
306    .clock-container {
307        box-shadow: none;
308        border: 1px solid #000;
309    }
310
311    .controls, .alarm-container, .stopwatch-container, .timer-container {
312        display: none;
313    }
314}
315
316/* 高コントラストモード */
317@media (forced-colors: active) {
318    .clock-container {
319        border: 2px solid CanvasText;
320    }
321
322    button {
323        border: 1px solid CanvasText;
324    }
325}
326
327/* ダークモード対応 */
328@media (prefers-color-scheme: dark) {
329    body:not(.light-theme) {
330        background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
331        color: #ffffff;
332    }
333}
334
335/* フォールバックフォント */
336@font-face {
337    font-family: 'CustomDigitalFont';
338    src: url('path/to/digital-font.woff2') format('woff2'),
339         url('path/to/digital-font.woff') format('woff');
340    font-weight: normal;
341    font-style: normal;
342    font-display: swap;
343}
344
345.time-display {
346    font-family: 'CustomDigitalFont', 'Arial', sans-serif;
347}
348
349/* パフォーマンス最適化 */
350.clock-container {
351    will-change: transform;
352}
353
354/* アクセシビリティ向上 */
355.controls button {
356    min-width: 44px;
357    min-height: 44px;
358}
359
360/* 国際化対応 */
361html[lang="ja"] .day-of-week {
362    font-size: 1rem;
363}
364
365/* RTL言語サポート */
366html[dir="rtl"] .clock-container {
367    direction: rtl;
368}
369
370/* Flexboxフォールバック */
371.clock-container {
372    display: flex;
373    flex-direction: column;
374    align-items: center;
375}
376
377.no-flexbox .clock-container {
378    display: block;
379    text-align: center;
380}
381
382/* CSS変数の使用 */
383:root {
384    --primary-color: #4CAF50;
385    --secondary-color: #45a049;
386    --background-dark: linear-gradient(45deg, #1a1a1a, #2c2c2c);
387    --background-light: linear-gradient(45deg, #f0f0f0, #e0e0e0);
388    --text-color-dark: #ffffff;
389    --text-color-light: #333333;
390}
391
392body {
393    background: var(--background-dark);
394    color: var(--text-color-dark);
395}
396
397.light-theme {
398    background: var(--background-light);
399    color: var(--text-color-light);
400}
401
402button {
403    background: var(--primary-color);
404}
405
406button:hover {
407    background: var(--secondary-color);
408}
409
410/* アニメーションの最適化 */
411@media (prefers-reduced-motion: reduce) {
412    .clock-container,
413    .hours, .minutes, .seconds {
414        animation: none;
415    }
416}
417
418/* CSS Grid レイアウト */

続き

はい、CSSの続きから記述します。

css
1/* CSS Grid レイアウト */
2.clock-container {
3    display: grid;
4    grid-template-areas:
5        "clock"
6        "controls"
7        "alarm"
8        "stopwatch"
9        "timer";
10    gap: 20px;
11}
12
13.clock { grid-area: clock; }
14.controls { grid-area: controls; }
15.alarm-container { grid-area: alarm; }
16.stopwatch-container { grid-area: stopwatch; }
17.timer-container { grid-area: timer; }
18
19@media (min-width: 768px) {
20    .clock-container {
21        grid-template-areas:
22            "clock clock"
23            "controls controls"
24            "alarm stopwatch"
25            "timer timer";
26        grid-template-columns: 1fr 1fr;
27    }
28}
29
30/* カスタムチェックボックス */
31.custom-checkbox {
32    position: relative;
33    padding-left: 35px;
34    margin-bottom: 12px;
35    cursor: pointer;
36    font-size: 18px;
37    user-select: none;
38}
39
40.custom-checkbox input {
41    position: absolute;
42    opacity: 0;
43    cursor: pointer;
44    height: 0;
45    width: 0;
46}
47
48.checkmark {
49    position: absolute;
50    top: 0;
51    left: 0;
52    height: 25px;
53    width: 25px;
54    background-color: #eee;
55    border-radius: 4px;
56}
57
58.custom-checkbox:hover input ~ .checkmark {
59    background-color: #ccc;
60}
61
62.custom-checkbox input:checked ~ .checkmark {
63    background-color: var(--primary-color);
64}
65
66.checkmark:after {
67    content: "";
68    position: absolute;
69    display: none;
70}
71
72.custom-checkbox input:checked ~ .checkmark:after {
73    display: block;
74}
75
76.custom-checkbox .checkmark:after {
77    left: 9px;
78    top: 5px;
79    width: 5px;
80    height: 10px;
81    border: solid white;
82    border-width: 0 3px 3px 0;
83    transform: rotate(45deg);
84}
85
86/* カスタムラジオボタン */
87.custom-radio {
88    position: relative;
89    padding-left: 35px;
90    margin-bottom: 12px;
91    cursor: pointer;
92    font-size: 18px;
93    user-select: none;
94}
95
96.custom-radio input {
97    position: absolute;
98    opacity: 0;
99    cursor: pointer;
100}
101
102.radio-checkmark {
103    position: absolute;
104    top: 0;
105    left: 0;
106    height: 25px;
107    width: 25px;
108    background-color: #eee;
109    border-radius: 50%;
110}
111
112.custom-radio:hover input ~ .radio-checkmark {
113    background-color: #ccc;
114}
115
116.custom-radio input:checked ~ .radio-checkmark {
117    background-color: var(--primary-color);
118}
119
120.radio-checkmark:after {
121    content: "";
122    position: absolute;
123    display: none;
124}
125
126.custom-radio input:checked ~ .radio-checkmark:after {
127    display: block;
128}
129
130.custom-radio .radio-checkmark:after {
131    top: 9px;
132    left: 9px;
133    width: 8px;
134    height: 8px;
135    border-radius: 50%;
136    background: white;
137}
138
139/* トグルスイッチ */
140.switch {
141    position: relative;
142    display: inline-block;
143    width: 60px;
144    height: 34px;
145}
146
147.switch input {
148    opacity: 0;
149    width: 0;
150    height: 0;
151}
152
153.slider {
154    position: absolute;
155    cursor: pointer;
156    top: 0;
157    left: 0;
158    right: 0;
159    bottom: 0;
160    background-color: #ccc;
161    transition: .4s;
162    border-radius: 34px;
163}
164
165.slider:before {
166    position: absolute;
167    content: "";
168    height: 26px;
169    width: 26px;
170    left: 4px;
171    bottom: 4px;
172    background-color: white;
173    transition: .4s;
174    border-radius: 50%;
175}
176
177input:checked + .slider {
178    background-color: var(--primary-color);
179}
180
181input:focus + .slider {
182    box-shadow: 0 0 1px var(--primary-color);
183}
184
185input:checked + .slider:before {
186    transform: translateX(26px);
187}
188
189/* カスタムセレクトボックス */
190.custom-select {
191    position: relative;
192    font-family: Arial;
193}
194
195.custom-select select {
196    display: none;
197}
198
199.select-selected {
200    background-color: var(--primary-color);
201}
202
203.select-selected:after {
204    position: absolute;
205    content: "";
206    top: 14px;
207    right: 10px;
208    width: 0;
209    height: 0;
210    border: 6px solid transparent;
211    border-color: #fff transparent transparent transparent;
212}
213
214.select-selected.select-arrow-active:after {
215    border-color: transparent transparent #fff transparent;
216    top: 7px;
217}
218
219.select-items div,.select-selected {
220    color: #ffffff;
221    padding: 8px 16px;
222    border: 1px solid transparent;
223    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
224    cursor: pointer;
225    user-select: none;
226}
227
228.select-items {
229    position: absolute;
230    background-color: var(--primary-color);
231    top: 100%;
232    left: 0;
233    right: 0;
234    z-index: 99;
235}
236
237.select-hide {
238    display: none;
239}
240
241.select-items div:hover, .same-as-selected {
242    background-color: rgba(0, 0, 0, 0.1);
243}
244
245/* プログレスバー */
246.progress-bar {
247    width: 100%;
248    height: 30px;
249    background-color: #e0e0e0;
250    border-radius: 15px;
251    overflow: hidden;
252}
253
254.progress {
255    width: 0;
256    height: 100%;
257    background-color: var(--primary-color);
258    transition: width 0.5s ease-in-out;
259}
260
261/* ツールチップ */
262.tooltip {
263    position: relative;
264    display: inline-block;
265    border-bottom: 1px dotted black;
266}
267
268.tooltip .tooltiptext {
269    visibility: hidden;
270    width: 120px;
271    background-color: #555;
272    color: #fff;
273    text-align: center;
274    border-radius: 6px;
275    padding: 5px 0;
276    position: absolute;
277    z-index: 1;
278    bottom: 125%;
279    left: 50%;
280    margin-left: -60px;
281    opacity: 0;
282    transition: opacity 0.3s;
283}
284
285.tooltip .tooltiptext::after {
286    content: "";
287    position: absolute;
288    top: 100%;
289    left: 50%;
290    margin-left: -5px;
291    border-width: 5px;
292    border-style: solid;
293    border-color: #555 transparent transparent transparent;
294}
295
296.tooltip:hover .tooltiptext {
297    visibility: visible;
298    opacity: 1;
299}
300
301/* カスタムスクロールバー（Firefoxのみ） */
302* {
303    scrollbar-width: thin;
304    scrollbar-color: var(--primary-color) #f1f1f1;
305}
306
307/* アコーディオン */
308.accordion {
309    background-color: #eee;
310    color: #444;
311    cursor: pointer;
312    padding: 18px;
313    width: 100%;
314    text-align: left;
315    border: none;
316    outline: none;
317    transition: 0.4s;
318}
319
320.active, .accordion:hover {
321    background-color: #ccc;
322}
323
324.panel {
325    padding: 0 18px;
326    background-color: white;
327    max-height: 0;
328    overflow: hidden;
329    transition: max-height 0.2s ease-out;
330}
331
332/* モーダル */
333.modal {
334    display: none;
335    position: fixed;
336    z-index: 1;
337    left: 0;
338    top: 0;
339    width: 100%;
340    height: 100%;
341    overflow: auto;
342    background-color: rgb(0,0,0);
343    background-color: rgba(0,0,0,0.4);
344}
345
346.modal-content {
347    background-color: #fefefe;
348    margin: 15% auto;
349    padding: 20px;
350    border: 1px solid #888;
351    width: 80%;
352}
353
354.close {
355    color: #aaa;
356    float: right;
357    font-size: 28px;
358    font-weight: bold;
359}
360
361.close:hover,
362.close:focus {
363    color: black;
364    text-decoration: none;
365    cursor: pointer;
366}
367
368/* カード */
369.card {
370    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
371    transition: 0.3s;
372    width: 40%;
373    border-radius: 5px;
374}
375
376.card:hover {
377    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
378}
379
380.container {
381    padding: 2px 16px;
382}
383
384/* フォーム要素のスタイリング */
385input[type=text], input[type=password], input[type=email], textarea {
386    width: 100%;
387    padding: 12px 20px;
388    margin: 8px 0;
389    display: inline-block;
390    border: 1px solid #ccc;
391    border-radius: 4px;
392    box-sizing: border-box;
393}
394
395input[type=submit] {
396    width: 100%;
397    background-color: var(--primary-color);
398    color: white;
399    padding: 14px 20px;
400    margin: 8px 0;
401    border: none;
402    border-radius: 4px;
403    cursor: pointer;
404}
405
406input[type=submit]:hover {
407    background-color: var(--secondary-color);
408}
409
410/* レスポンシブテーブル */
411.responsive-table {
412    overflow-x: auto;
413}
414
415table {
416    border-collapse: collapse;
417    width: 100%;
418}
419
420th, td {
421    text-align: left;
422    padding: 8px;
423}
424
425tr:nth-child(even) {
426    background-color: #f2f2f2;
427}
428
429/* メディアクエリ */
430@media screen and (max-width: 600px) {
431    .column {
432        width: 100%;
433    }
434}
435
436/* 印刷用スタイル */
437@media print {
438    .no-print, .no-print * {
439        display: none !important;
440    }
441}
442
443/* アニメーション */
444@keyframes slideIn {
445    from {
446        transform: translateY(-100%);
447    }
448    to {
449        transform: translateY(0);
450    }
451}
452
453.slide-in {
454    animation: slideIn 0.5s ease-out;
455}
456
457/* CSS変数 */
458:root {
459    --font-size-small: 0.8rem;
460    --font-size-medium: 1rem;
461    --font-size-large: 1.2rem;
462    --spacing-small: 0.5rem;
463    --spacing-medium: 1rem;
464    --spacing-large: 1.5rem;
465}
466
467/* ユーティリティクラス */
468.text-center { text-align: center; }
469.text-left { text-align: left; }
470.text-right { text-align: right; }
471.float-left { float: left; }
472.float-right { float: right; }
473.clearfix::after {
474    content: "";
475    clear: both;
476    display: table;
477}
478
479/* アクセシビリティ */
480.visually-hidden {
481    position: absolute !important;
482    height: 1px;
483    width: 1px;
484    overflow: hidden;
485    clip: rect(1px 1px 1px 1px);
486    clip: rect(1px, 1px, 1px, 1px);
487    white-space: nowrap;
488}
489
490/* フォーカス可視化 */
491:focus {
492    outline: 3px solid var(--primary-color);
493    outline-offset: 2px;
494}
495
496/* スキップリンク */
497.skip-link {
498    position: absolute;
499    top: -40px;
500    left: 0;
501    background: #000000;
502    color: white;
503    padding: 8px;
504    z-index: 100;
505}
506
507.skip-link:focus {
508    top: 0;
509}
510
511/* 高コントラストモード */
512@media (forced-colors: active) {
513    .button {
514        border: 2px solid ButtonText;
515    }
516}
517
518/* プリントスタイル */
519@media print {
520    body {
521        font-size: 12pt;
522    }
523    
524    a[href^="http"]:after {
525        content: " (" attr(href) ")";
526    }
527}
528
529/* RTL言語サポート */
530[dir="rtl"] .float-left {
531    float: right;
532}
533
534[dir="rtl"] .float-right {
535    float: left;
536}
537
538/* CSS Grid フォールバック */
539.grid {
540    display: flex;
541    flex-wrap: wrap;
542}
543
544@supports (display: grid) {
545    .grid {
546        display: grid;
547    }
548}
549
550/* レガシーブラウザサポート */
551.clearfix:before,
552.clearfix:after {
553    content: " ";
554    display: table;
555}
556
557.clearfix:after {
558    clear: both;
559}
560
561.clearfix {
562    *zoom: 1;
563}
564
565/* ベンダープレフィックス */
566.box {
567    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
568    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
569    box-shadow: 0 0 10px rgba(0,0,0,0.5);
570}
571
572/* CSS変数のフォールバック */
573.element {
574    color: black;
575    color: var(--text-color, black);
576}
577
578/* Flexboxフォールバック */
579.container {
580    display: table;
581    width: 100%;
582}
583
584.container > * {
585    display: table-cell;
586}
587
588@supports (display: flex) {
589    .container {
590        display: flex;
591    }
592
593    .container > * {
594        display: block;
595    }
596}
597
598/* メディアクエリ */
599@media screen and (min-width: 600px) {
600    .column {
601        float: left;
602        width: 50%;
603    }
604}
605
606@media screen and (min-width: 900px) {
607    .column {
608        width: 33.33%;
609    }
610}
611
612/* 印刷用スタイル */
613@media print {
614    .no-print, .no-print * {
615        display: none !important;
616    }
617    
618    body {
619        font-size: 12pt;
620    }
621    
622    a[href^="http"]:after {
623        content: " (" attr(href) ")";
624    }
625}
626
627/* アニメ

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

GPTs
ロールプレイ
Irene Westenra（アイリ）｜毒舌AITuber
ヴァンパイアの女王アイリーン・ウェステンラ。愛称はアイリ。AITuber用システムプロンプトのサンプルとして作成したキャラクターです。Qiitaでプロンプトを公開しています。最初の入力で「今日のテーマ」を選んで話を始めます。その後は、入力されたメッセージをYouTubeのコメントだと認識して、短めの返答を挟んでから話を続けます。とてつもなくワガママな毒舌ツンデレキャラにしました。設計としては、いつもの疑似人格プロンプトをなるべくコンパクトにまとめて、いつもよりキャラクター設定やトークスタイルの書き込みを多めにしました。何を言っても罵倒されます。
0
0
1
10
Sharaku Satoh | Prompt Engineer
画像生成
キャラクター作成
あなただけの女神＝ヴィーナス美女画像＝
悩みも苦しみも吹き飛ばす、神々しく美しいマイ女神様がご降臨！
1
1
10
36
user_128286078432577536
画像生成
物語・脚本・プロット
推奨モデル - DALL•E 3
スマトラシジミ
日本にはいない珍しい夜行性の蝶「スマトラシジミ」の画像を作る　https://oshiete.ai/items/152661874826013696
1
0
4
480
user_128286078432577536
計画立案
ゴールシークプロンプト
ゴールシークプロンプト、あなたがどんなことをしたいのかをChat GPT に伝えると、その達成方法をアドバイスしてくれます
141
4
1.25K
6.70K
ハヤシシュンスケ

世界最大級の長行スクリプトコードを生成AI！！ ※Claude 3.5 Sonnet推奨！

コメント 0

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