Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

レスポンシブ ウェブデザイン パターン

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

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

パターン

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

Mostly Fluid

ほとんどの 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

Column drop は幅いっぱいに表示するマルチカラム レイアウトです。コンテンツに対してウィンドウ幅が狭くなると、単純に列を垂直にスタックします。

最終的には、すべての列が垂直にスタックされます。このレイアウト パターンでは、コンテンツやデザインの変化に合わせてブレークポイントを指定します。

お試しください

主に fluid サンプルでは、コンテンツは最小ビューで垂直にスタックされますが、画面が 600px 以上になった場合、プライマリおよびセカンダリ コンテンツの div は、画面の幅いっぱいに表示されます。div の順番は CSS の order プロパティで設定されます。 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 パターンは最もレスポンシブなパターンで、さまざまな画面幅に合わせて複数のブレークポイントを設定します。

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

お試しください

この簡単な例では、layout shifter パターンを使用しています。小さな画面ではコンテンツは垂直にスタックされますが、画面が大きくなるにつれて大幅に変化し、左に 1 つの 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

Off canvas パターンでは、コンテンツを縦にスタックせずに、ナビゲーションやアプリメニューのような使用頻度の低いコンテンツをオフスクリーンに配置します。これらのコンテンツは画面サイズが十分に大きい場合にのみ表示され、小さい画面ではクリックしたときのみ表示されます。

お試しください

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

このサンプルを使用する際は、Safari for iOS 6 および Android ブラウザでは 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);
  }
}