@tosk/gen-ui 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/gen-ui.js +13 -0
- package/package.json +1 -1
package/gen-ui.js
CHANGED
|
@@ -433,6 +433,19 @@ ${html}
|
|
|
433
433
|
3. コードは \`document.addEventListener('DOMContentLoaded', () => { ... })\` 内に記述し、DOM読み込み後に実行されるようにしてください。
|
|
434
434
|
4. エラーハンドリング（try-catch等）を適切に行い、コンソールエラーが出ないように配慮してください。
|
|
435
435
|
|
|
436
|
+
### 画像リソースのルール（重要）
|
|
437
|
+
画像（imgタグやbackground-image等）が必要な場合は、架空のパスではなく、以下のルールに従ってください
|
|
438
|
+
1. 一般的な画像（背景、商品、記事サムネイルなど）
|
|
439
|
+
- 書式: "https://picsum.photos/{width}/{height}?random={unique_id}"
|
|
440
|
+
- {width}, {height} は必要なサイズ（例: 800/600）に置き換える。
|
|
441
|
+
- {unique_id} には要素ごとに異なるランダムな数字（1, 2, 3...）を入れる。
|
|
442
|
+
- 例: <img src="https://picsum.photos/400/300?random=1" alt="記事画像">
|
|
443
|
+
|
|
444
|
+
2. ユーザープロフィール画像（アバター・アイコン）:
|
|
445
|
+
- 書式: "https://i.pravatar.cc/{size}?img={1-70}"
|
|
446
|
+
- {size} はサイズ（例: 150）。imgパラメータには1〜70のランダムな数字を入れる。
|
|
447
|
+
- 例: <img src="https://i.pravatar.cc/150?img=12" alt="ユーザーアイコン" style="border-radius: 50%;">
|
|
448
|
+
|
|
436
449
|
### 制約条件
|
|
437
450
|
1. CSSは、外部のライブラリやフレームワーク（Tailwind CSS や Bootstrap等）に依存してはいけません。
|
|
438
451
|
2. CSS内に外部リソース (@import等) を含めないでください。
|