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

アディラス

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

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

推奨モデル - GPT-4o

104

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

投稿日時：

プロンプト実行例

こんにちは！

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/* アニメ

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

チャットボット
推奨モデル - GPT-4o
シーシャミックス考案AI
シーシャのミックスを考案してくれるAIアシスタントです。参考程度にご利用ください。 AIにシーシャを理解させる実験として作りました。これによって考案されたミックスでよさそうだと思ったものは、ぜひシーシャカフェやシーシャバーで注文して、吸ってみてください。【注意】フレーバーによって燃焼しやすさ、味や香りの出やすさ、味や香りが出る速度、水分量が異なります。長らく使用されていないフレーバーは水分が通常より抜けていることもあります。また、シーシャの設定や温度湿度などの空調、ホイルの巻き方、ホイルの穴の開け方、炭の温度、ハガルへの盛り方、手入れや調整、そしてシーシャプレイヤーの経験から培われたノウハウや手腕、手法、こだわり、スタイル、価値観などによっても、味や香りの感じ方、煙の量、継続時間などが細かく変化します。他にも、調理用ボウルでフレーバーをかき混ぜて均等化したり、ハガルの種類やヒートマネジメントシステムの種類や使い方によっても変わります。このAIでは、そのあたりの前提が学習されておりませんので、あくまで参考程度に留めてください。 #シーシャ #フレーバー #ミックス #shisha #flavor #mix #hookah #フーカー
0
0
141
765
はどはど
GPTs
キャラクター作成
AIイケメンキャラクリエーター
いくつか質問に答えるとあなたの好みに合わせたアニメキャラを出力します。（画風・髪型・年齢・系統・画角）
1
0
21
138
Tam-BizAI編集長
GPTs
資料作成
日本地図作成
正確で美しい日本地図を描きます。統計データを基に都道府県を塗り分けた地図（コロプレスマップ）も描けます。都道府県別のデータ分析やプレゼン用の地図を作成するのに最適です。画像生成ではなく、PythonライブラリのJapanmapを使用しています。
4
0
41
144
ITnavi
画像生成
資料作成
往年のノベルゲーム風の画面素材作成
往年のノベルゲームによくある，装飾つきのメッセージボックスのようなUIを生成AIで作成します。 1024x1024のサイズで生成されるため，必要に応じて切り出し・リサイズ・引き伸ばしを行うことで，往年のノベルゲームっぽい雰囲気を持ったゲームを開発する際の素材として活用できます。
1
0
15
69
おだんごん

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

コメント 0

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