様々な画像の埋め込み方法とスケルトンローディングエフェクトのテストページです。
このページでは、様々な画像の埋め込み方法とスケルトンローディングエフェクトをテストします。
Note
<img>タグでの記述や<figure>タグでの埋め込みでは、スケルトンエフェクトは表示されません。
1. 基本的な外部画像
2. 異なるアスペクト比の画像
ワイド画像（横長）
ポートレート画像（縦長）
正方形画像
3. Figureコンポーネントでの埋め込み
4. 連続する複数の画像
1枚目：
2枚目：
3枚目：
5. 長いalt属性を持つ画像
6. 高解像度画像
7. 様々なアスペクト比
超ワイド
縦パノラマ
ほぼ正方形
8. テーマ別画像
自然
建築
抽象
9. エッジケース
非常に小さい画像
非常に横長の画像
10. 空のalt属性
11. 連続ロードテスト
以下は5枚の画像が連続で読み込まれ、スケルトンエフェクトをテストします：
12. 異なるサイズの連続画像
13. Figureコンポーネントとキャプション付き連続画像
14. 極端なアスペクト比
超横長（3:1）
超縦長（1:3）
パノラマ（4:1）
15. 様々なサイズのグリッド風配置
注意事項
- すべての画像はLorem Picsumのプレースホルダー画像を使用しています
- 各画像は10秒間のスケルトンローディングエフェクトを表示します
- スケルトンは最初にデフォルトの16:9アスペクト比で表示されます
- 画像の読み込み完了後、実際の画像のアスペクト比に調整されます
- ローディング中も画像表示後も角丸は表示されません
- 画像は画面サイズに応じて適切にスケーリングされます
期待される動作
- スケルトンがデフォルト16:9のアスペクト比で即座に表示される
- 画像読み込み完了後、実際の画像のアスペクト比にスケルトンが調整される
- スケルトンが10秒間シマーアニメーションを表示する
- 10秒後に画像がスムーズにフェードインする
- どの段階でも角丸は表示されない
- レスポンシブデザインで異なる画面サイズに対応する