CSSのメイソンリーギャラリー（Pinterest風）

CSSのメイソンリーギャラリー（Pinterest風）: 用途

メイソンリーレイアウトは、Pinterestのように、高さの異なる写真を隙間なく列に並べます。写真のアドレスを貼り付けて、スマートフォン、タブレット、パソコンの列数、間隔、角、写真上のキャプションを選びます。

コードはすべてのブラウザで動くCSS columnsを使い、段階的な機能拡張の考え方に従って、CSS標準のメイソンリー（display: grid-lanes。2026年3月のSafari 26.4で提供開始、ChromeとFirefoxでは安定したサポートはまだありません）を@supports内に追加しています。ページでは、2つの方式の順序の違いも説明しています。

使い方

1. 写真のアドレスを貼り付けます。
2. 列数、間隔、角を調整します。
3. コードをコピーします。

使うタイミング

• 写真家のポートフォリオ。
• サロンやスタジオの作品ギャラリー。
• インスピレーションのボード。

よくある質問

メイソンリーレイアウトとは何ですか？

幅は同じで高さが違う要素が、列の中で直前の要素のすぐ下に並び、空きを作らないグリッドです。Pinterestで有名になり、縦長と横長の写真が混在する場合に向いています。

JavaScriptは必要ですか？

いいえ。コードはすべてのブラウザで動くCSS columnsを使っています。CSS標準のメイソンリー（display: grid-lanes。2026年3月のSafari 26.4で提供開始）がある環境では、@supportsで新しい方式が有効になり、写真は左から右の順序が保たれます。

CSS columnsだと、なぜ写真の順序が変わるのですか？

columnsでは、写真は1列目を下まで埋めてから2列目に進みます。新聞と同じです。順序が重要な場合（新しいものを先にしたいときなど）は、重要な写真をリストの先頭に置いて列数を少なくするか、grid-lanesが他のブラウザに対応するのを待ってください。

本当に無料？

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

関連ツール