世界最大級の長行スクリプトコードを生成AI！！ ※Claude 3.5 Sonnet推奨！
長い行のスクリプトコードを生成します！
推奨モデル - ChatGPT
3
0
172
18
投稿日時：
- プロンプト実行例
こんにちは！
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/* アニメコメント 0
他のプロンプトもチェック
GPTs
キャラクター作成
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 あなたの顔写真を送付するだけで顔面偏差値を数字で出力してくれます。各項目別に点数付けしてくれて、顔の強みや特徴まで分析してくれるツール。客観的評価を知りたい方はぜひ使ってみてください。622.77K9.88K物語・脚本・プロット
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 Grokのシステムプロンプト利用しています。Xでハックされたプロンプトが流出していました。Grokをまだ使ったことがない方はぜひ使ってみてください。247463.63K
