Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。

用語解説 レスポンシブ, レスポンシブWebデザイン

レスポンシブWebデザインとは、マルチデバイスに対応するWebサイトの実装手法です。Ethan Marcotte氏が提唱したもので、次の技術(テクニック)を使ってWebサイトを実装していきます。

  1. Fluid Grids
  2. Flexible Images
  3. CSS3 Media Queries

この3つの技術について、具体例をあげて記述していきます。

1. Fluid Grids

Webページの横幅を100%として、いくつかのグリッドに分けてレイアウトする手法です。例えば、グリッドの横幅を「%」や「em」などの相対値で指定します。

.col-1 {
  width: 25%;
  float: left;
}
.col-2 {
  width: 50%;
  float: left;
}
.col-3 {
  width: 25%;
  float: left;
}

横幅を「px(ピクセル)」などの固定値で指定すると、ディスプレイ(解像度)が大きくて不自然な余白が生まれたり、ディスプレイが小さくてコンテンツがはみ出たりします。

相対値で指定すると、コンテンツの大きさが変化するので、色んなディスプレイに丁度よくおさまることができます。

2. Flexible Images

グリッド(や親要素)のサイズに応じて、メディア要素のサイズを変化させる手法です。例えば、画像要素のスタイルを、次のように指定することがあります。

img {
  max-width: 100%
  height: auto;
}

height: auto; とすることで、アスペクト比も維持されます。

3. CSS3 Media Queries

ブラウザの横幅などに応じて、ページのスタイルを切り替える手法です。例えば、次のように @media を使って記述します。

@media (min-width: 768px) {
    
  /* ブラウザ幅768px以上に適用されるスタイル */
  p {
  ・・・
  }
  ・・・
}