画家のサイトに、これまでの個展のチラシを並べたい。送られてきたのは六枚の画像だった。
開いて、困った。縦長がある。横長がある。正方形に近いのもある。デザイナーが一枚ずつ別の判型で作ったチラシだから、当然だった。サイズの揃わない六枚を、どう並べるか。
cover は、絵を切ってしまう
最初は、よくあるカードで組んだ。各チラシを縦三対四の枠に入れ、object-fit:cover で埋める。グリッドはきれいに揃う。見た目は整う。
「画像が見切れますよ」
そうなのだ。cover は、枠を埋めるために画像の足りない方向を切る。横長のチラシを縦の枠に入れれば、左右が削られる。会場名が消える。会期が消える。デザイナーがそこに置いた情報が、レイアウトの都合で見えなくなる。
きれいに揃えることと、全部見せること。チラシにおいては、後者が絶対だった。日付と会場が読めないチラシに、意味はない。
contain にして、高さだけ決めた
cover を contain に変えた。
.ex-poster-img{
width:100%; height:340px;
object-fit:contain; object-position:center;
background:var(--bg2);
}contain は、画像を切らない。枠の中に、縦横比を保ったまま全体を収める。縦長のチラシは縦いっぱいに、横長のチラシは横いっぱいに入って、余った部分には背景色が出る。
高さだけ 340px で揃えた。幅は三列のグリッドに任せる。そうすると、判型の違う六枚が、それぞれの形のまま、同じ高さの列に並ぶ。揃っているのは外枠だけで、中身は一枚ずつ違う。けれど、それでいい。チラシは元々、一枚ずつ違うものだから。
余白に出る背景色は、欠点ではなかった。むしろ、サイズの違う紙を白い壁にピンで留めたような、展示の手触りが出た。
揃えることが、目的ではない
グリッドを組むとき、つい「全部同じ大きさに」と考えてしまう。揃っている方が、整って見えるから。
でも今回はっきりしたのは、揃えるのは手段でしかない、ということだ。目的は、お客さんがどの個展がいつどこであったかを読めること。そのためなら、画像は切らない方がいい。多少の余白は、出ていい。
cover と contain の違いは、たった一語だ。けれどその一語は、「枠を優先するか、中身を優先するか」という、まったく違う立場を選んでいる。
絵を扱うサイトでは、絵を切らない。当たり前のことを、CSSの一語で守った。
次回は、このサイトを公開するためにドメインを移したとき、メールだけは絶対に止められなかった話を書く。
シンプルシステム株式会社 代表 伊藤勝彦