Help us understand the problem. What is going on with this article?

レスポンシブWebデザインの5つのレイアウトパターン

More than 5 years have passed since last update.

ほぼ可変デザイン [ Mostly fluid ]

  • 可変前提のデザイン
  • フルードグリッドやフルードイメージを活用し、ブレークポイントによって要素が拡大縮小する
  • 大きな画面サイズでは複数の段組みになるが、モバイルサイズでは1カラムで縦に並ぶ

ほぼ可変デザイン:
Qiita

参考サイト:
5D Institute
Todo MVC
Tilde

レイアウトを変更するデザイン [ Column drop ]

  • マルカラムレイアウトで始まりシングルカラムレイアウトで終わるパターン
  • 画面幅が狭くなるほど、カラムが落ちていく
  • ブレークポイントによってサイズを変えるので、ブレークポイントが多く必要になるのも特徴の1つ

カラムを落とすデザイン:
Qiita

参考サイト:
Responsice Patterns
TIME
The Great Discontent
ISO

レイアウトを変更するデザイン [ Layout shifter ]

  • サイズに合わせて単にカラムが落ちるだけでなく、それぞれの画面サイズに対してレイアウトが調整される

レイアウトを変更するデザイン:
Qiita

ポイントを纏めました。

参考サイト:
Responsive Patterns
The Next Web
Paid to Exist
Cantina Dorigati

1カラムベースのデザイン [ Tiny tweadks ]

  • モバイルファーストの考え方が色濃く出ているデザインパターン
  • シングルカラムのみのデザイン

1カラムベースのデザイン: Qiita

参考サイト:
Responsive Patterns
Lycos

見えない領域を使うデザイン [ Off canvas ]

  • ブラウザサイズが大きい場合はすべて表示されているが、小さくなった場合、サイドバーやナビゲーションなど一部の情報が隠れる
  • 隠れた情報はクリックやフリックをすると現れるなど、別の手段でアクセスできる

見えない領域を使うデザイン:
Qiita

参考サイト:
Responsive Patterns
British Vogue

参考書籍

参考:画像は書籍「レスポンシブWebデザインテクニックブック」より

nakoro
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away