レスポンシブ

レスポンシブで驚いた話。発見があったので、メモ。これまで、対比が異なる画像はスマホサイズとPCサイズを用意し、ブレイクポイントによって画像を切替えて、実装してきました。レスポンシブが広がった頃から、そうやってきたので、それが当たり前だと思っていました。例外で対応するとすれば、背景として用いて、トリミングっぽく使用するくらいだったのですが、先日の話です。

クライアントの要望で、画像のソースは出来るだけ統一したいとのことで、背景として使うしかないかなと思いながらも、検索するとそれがありました。object-fitです。画像をトリミングするプロパティで、モダンブラウザに対応しているので、対象を絞り込めれば、楽ができます。スゴいなobject-fit。技術は日々新しくなるので、何事も調べないとダメですね。

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしも…

Webクリエイターボックス

上記対応をする中で、さらにもう一つ解決したことがあります。画像のソースが一つなので、スマホサイズとPCサイズを分けずに、一覧の表示数を変えるというもの。具体的には、PCサイズで3つ表示していた一覧が、スマホサイズでは2つにしなけれならなかったのです。その時は、dlが外側にあり、内側にaでラップしたdtとddがあり、そのaタグに:last-of-typeで、最後のアイテムを非表示にしました。ちなみに、:last-childと:last-of-typeは効く時と効かない時があるので、その際に効く方を使用しています。

.class:last-of-type {
 display: none;
}