このワイヤーの特徴
写真を、切り取らずに見せられる
写真を元の比率のまま並べ、縦長の写真も横長の写真も、構図を欠けさせずに見せています。
比率が違っても、余白なく並ぶ
写真を列ごとに上から詰めて並べ、比率の違う写真の間に大きな余白ができないようにしています。
写真の下に、題名を添える
比率が違っても、写真の下には同じ形で題名と説明を添えています。
写真の大きさが違っても、何の写真かは同じように読み取れます。
SPでは、2列にする
SPでは3列では写真が小さくなるため、2列にしています。
縦長の写真が続くと長くなるため、表示する件数は少なめにしています。
制作時のよくある失敗
読み上げやキーボードの順番が、見た目と違う
列ごとに詰める作り方では、見た目の並びとHTMLの順番が一致しないことがあります。
順番が大事な一覧には使わないか、HTMLの順番どおりに見える作り方を選びます。
写真の読み込みで、配置が崩れる
写真の大きさが決まる前に並べると、読み込みの途中で配置が動きます。
写真の縦横の比率を先に指定しておきます。
極端に縦長の写真が、一覧を長くする
縦に長すぎる写真が1枚あると、その列だけが長くなります。
一覧では比率の上限を決め、それを超える写真は切り取ります。
SPでも3列のまま並べる
SPで3列にすると写真が小さくなり、構図を見せるという目的が果たせません。
SPでは2列か1列にします。
よくある質問
メイソンリー型は、CSSだけで作れますか?
CSSの多段組み（columns）で近い見た目を作れます。
この場合は上から下へ列ごとに並ぶため、横に読む順番とは異なる点に注意します。
写真の順番は、どう決めればよいですか?
列ごとに詰めるため、細かな順番は伝わりにくくなります。
見せたい写真を最初のほうに置き、日付などの順番が大事な一覧には使わない形が安全です。
写真を押したら、拡大したほうがよいですか?
構図を見せる目的なら、拡大できると細かいところまで見てもらえます。画像拡大型 モーダルを参考にしてください。
