Responsive Web Design Patterns

レスポンシブ ウェブ デザイン パターンは急速に進化していますが、 デスクトップとモバイル端末間でうまく動作する 確立されたパターンは限られています。

レスポンシブ ウェブ ページで使用されるほとんどのレイアウトは、5 つのパターンのいずれかに分類することができます。 主にfluid、column drop、layout shifter、tiny tweaks、および off canvas です。 いくつかのケースでは、ページはパターンの組み合わせを使用します。たとえば、 column drop と off canvas の組み合わせです。 これらのパターンは本来 Luke Wroblewskiによって認識され、 レスポンシブ ページの起点を提供します。

パターン

シンプルで分かりやすいサンプルを作成するために、 以下の各サンプルは、 flexboxを使用して、実際のマークアップで作成されました。 一般的に 3 つのコンテンツ div はプライマリ コンテナの中に含まれています。 各サンプルは、最初に最小のビューで書き始められ、ブレークポイント が必要に応じて追加されました。 最新のブラウザ向けに flexbox レウアウトは適切に サポートされていますが最適なサポートのためには ベンダーのプレフィックスがまだ必要です。

Mostly fluid

jほとんどの fluid パターンは、主に fluid グリッドで構成されています。 大画面または 中画面では、通常は同じサイズを保ち、より広い画面 で余白を調整ます。

小さな画面では、fluid グリッドはリフローするメインコンテンツを引き起こし、 列は垂直方向に積層されます。 このパターンの主な利点の 1 つは、 通常、小画面と大画面の間に 1 つの ブレークポイントだけが必要であることです。

最小ビューでは、各コンテンツdivは垂直に積層されます。 画面の幅が 600px になった場合 、プライマリ コンテンツ divwidth: 100% にとどまり、 セカンダリ div はプライマリ div の下に 2 列で表示されます。 800px を超える場合、コンテナ div は固定幅となり、画面の中央に配置されます。

このパターンを使用するサイトには以下が含まれます。

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4, .c5 {
  width: 100%;
}

@media (min-width: 600px) {
  .c2, .c3, .c4, .c5 {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .c1 {
    width: 60%;
  }
  .c2 {
    width: 40%;
  }
  .c3, .c4, .c5 {
    width: 33.33%;
  }
}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Column Drop

全幅マルチ カラム レイアウトでは、ウィンドウ幅がコンテンツに合わせて狭くなりすぎないように、 列のドロップは単純に列を垂直にスタックします。

最終的にこの結果は、 すべての列で垂直にスタックされます。 このレイアウト パターンのための ブレークポイントの選択は、コンテンツに依存しており、 各デザインで変更されます。

主に fluid サンプルでは、コンテンツは最小ビューで垂直にスタックされますが 、画面が 600px 以上になった場合、プライマリおよびセカンダリ コンテンツ divは、画面の幅いっぱいになります。 div の順番はオーダー CSS プロパティで 設定されます。 800px で、すべてのコンテンツ div が表示され、 全画面幅が使用されます。

このパターンを使用するサイトには以下が含まれます。

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 60%;
    -webkit-order: 2;
    order: 2;
  }

  .c2 {
    width: 40%;
    -webkit-order: 1;
    order: 1;
  }

  .c3 {
    width: 100%;
    -webkit-order: 3;
    order: 3;
  }
}


@media (min-width: 800px) {
  .c2 {
    width: 20%;
  }

  .c3 {
    width: 20%;
  }
}

Layout shifter

layout shifter パターンは、複数の画面の幅にわたって複数のブレークポイントを有する、 レスポンシブ パターンの代表例です。

このレイアウトの鍵は、リフローや他の列の下へのドロップではなく、 コンテンツの移動です。 各主要ブレイクポイント間の大きな差によって、維持が複雑になり、 全体的なコンテンツのレイアウトだけでなく、要素内の変化が 含まれる可能性があります。

この簡単な例では、ayout shifter パターンを示しています。 小さな画面ではコンテンツは垂直にスタックされますが、 画面が大きくなるにつれて大幅に変化します。左に div および右に 2 つのスタックされた div を持ちます。

このパターンを使用するサイトには以下が含まれます。

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 25%;
  }

  .c4 {
    width: 75%;
  }

}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

Tiny tweaks

Tiny tweaks はレイアウトのための小さな変更を行います。非常にマイナーなフォント サイズの調整、画像サイズの変更、コンテンツの移動などです。

これは、1 ページの線形ウェブ サイト、テキストの多い記事のような、 単一列のレイアウトに適しています。

名前からわかるように、このサンプルでは、画面サイズの変化など少しだけの変更です。 画面の幅が大きくなるにつれて、フォントサイズやパディングを行います。

このパターンを使用するサイトには以下が含まれます。

.c1 {
  padding: 10px;
  width: 100%;
}

@media (min-width: 500px) {
  .c1 {
    padding: 20px;
    font-size: 1.5em;
  }
}

@media (min-width: 800px) {
  .c1 {
    padding: 40px;
    font-size: 2em;
  }
}

Off canvas

縦にコンテンツをスタックするよりも、オフキャンバス パターンは、使用頻度の低いコンテンツを配置します。おそらくナビゲーションやアプリ メニューでオフキャンバスになり、画面サイズが十分に大きい場合にのみ表示され、小さい画面ではコンテンツはクリックでが離れます。

縦にコンテンツをスタックするよりも、このサンプルでは transform: translate(-250px, 0) を使用して、コンテンツ div の 2 つを非表示にします。 JavaScript を使用して、 オープンクラスを追加することで div を表示し、要素を可視化します。 画面の幅が大きくなるにつれて、 オフスクリーンの位置は要素から除去され 可視ビューポート内に表示されます。

このサンプルでは、Safari for iOS 6 および Android Browser は flexboxflex-flow: row nowrap 機能をサポートしないことに注意してください。 このため、絶対位置にフォールバックしなければなりませんでした。

このパターンを使用するサイトには以下が含まれます。

body {
  overflow-x: hidden;
}

.container {
  display: block;
}

.c1, .c3 {
  position: absolute;
  width: 250px;
  height: 100%;

  /*
    This is a trick to improve performance on newer versions of Chrome
    #perfmatters
  */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 

  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;

  z-index: 1;
}

.c1 {
  /*
  Using translate3d as a trick to improve performance on older versions of Chrome
  See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
  #perfmatters
  */
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

.c2 {
  width: 100%;
  position: absolute;
}

.c3 {
  left: 100%;
}

.c1.open {
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}

.c3.open {
  -webkit-transform: translate(-250px,0);
  transform: translate(-250px,0);
}

@media (min-width: 500px) {
  /* If the screen is wider then 500px, use Flexbox */
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .c1 {
    position: relative;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  .c2 {
    position: static;
  }
}

@media (min-width: 800px) {
  body {
    overflow-x: auto;
  }
  .c3 {
    position: relative;
    left: auto;
    -webkit-transition: none 0s ease-out;
    transition: none 0s ease-out;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}