タグ

2016年8月23日のブックマーク (1件)

  • レスポンシブな3カラム・レイアウトの変形パターンを考える

    ウェブサイトで3つのアイテム(製品ラインとか製品の特長とか)をフィーチャーしたい場合、ふつうに3カラムのレイアウトを使いますよね?ですが、いくつかの条件を満たしつつレスポンシブに対応しようとすると結構難しかったりします。 2つでもなく、4つでもなく、どうしても3つのアイテムをフィーチャーしたい。 4カラムだとデスクトップサイズでも各アイテムが小さすぎるし、2カラムだとデカすぎる、みたいな。やっぱり、デスクトップサイズでは3カラムがちょうど良い場合もありますよね。 そんな時どういった対応ができるのか、ちょっと考えてみたいと思います。 レイアウトの条件 たとえば、以下のようなレイアウトの条件があったとします。 どの画面サイズでも表示を隠さない(コンテンツ・パリティ) アイテムの扱いは極力平等にしたい(コンテンツ・プライオリティ) あえて優先順位をつけるなら、左から1、2、3番の順 誘導用のキャ

    レスポンシブな3カラム・レイアウトの変形パターンを考える