サイト用フォトギャラリー（拡大表示付き）

サイト用フォトギャラリー（拡大表示付き）: 用途

よくできたフォトギャラリーは、ページを重くせずに、仕事、空間、商品を見せられます。このジェネレーターは、CSS gridでレスポンシブなグリッドを作り、パソコンとスマートフォンの列数、サムネイルの形、角の丸みを選べます。

写真をタップするとHTML標準のdialog要素で拡大表示され、画面上とキーボードの矢印、キャプション、Escキーまたは外側のタップで閉じる操作に対応します。サムネイルは遅延読み込みされ、キャプションは代替テキストになるため、アクセシビリティと画像SEOにも有効です。

使い方

1. 写真のアドレスとキャプションを貼り付けます。
2. 列数、形、角を選びます。
3. コードをコピーしてサイトに貼り付けます。

使うタイミング

• 写真家、理容師、建築家のポートフォリオ。
• レストランや店舗の内観写真。
• サービスのビフォー・アフター。

よくある質問

ライブラリなしで動きますか？

はい。グリッドはCSS gridで、拡大表示にはブラウザ標準のdialog要素を使っています。暗い背景、フォーカス、Escキーで閉じる動作はdialogが処理します。スクリプトは写真の切り替えだけの数行です。

写真のせいで読み込みが重くなりませんか？

サムネイルにはloading=lazyとdecoding=asyncを使っているので、画面に近づいたときだけダウンロードされます。さらに軽くするには、サムネイル用に小さい画像を用意し（サイト用画像ツールで作れます）、大きい画像は拡大表示のときだけ使います。

キャプションは必要ですか？

キャプションは写真の代替テキスト（alt）になり、スクリーンリーダーが読み上げ、画像SEOにも役立ちます。「写真1」ではなく、「ひげ付きのグラデーションカット」のように写っているものを説明してください。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール