A Little Each Day

note to self

レスポンシブwebデザインの基礎基本

こんにちは。本日はレスポンシブwebデザインの基本的なことを説明したいと思います。

スマートフォンやタブレットが普及している昨今、従来のPCだけでなくスマホやタブレットから見ても綺麗なレイアウトを提供するためにレスポンシブwebデザインは現代のwebデザインでは必須の技術となっています。

今回は難しいことはやらずに、本当にレスポンシブwebデザインの基礎基本、導入の部分を見ていきたいと思います。

バージョン

HTML5
CSS3


viewportを設定しよう

viewportとはスマホやタブレットなどの画面で見た時にきちんとレスポンシブ対応させるために書く必須の設定です。

この設定がないとせっかくレスポンシブ対応してもレイアウトが崩れてしまいます。

この設定はHTMLファイルのheadタグ内に書きましょう。

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


これは決まり文句なのでそのまま覚えましょう。


メディアクエリを書こう

メディアクエリとはデバイスの幅に対応してCSSを書くことができる設定方法です。

この設定はCSSファイルに書いていきます。

@media(max-width: ◯◯px){
  この中に◯◯px以下の時に対応させたいcssを書く
}


※今回はmax-widthですが、min-widthでも大丈夫です。


ちなみに各cssの分岐点になる◯◯pxの部分はブレイクポイントと呼びます。覚えておきましょう。


レスポンシブwebデザインを組んでみよう

それでは実際にレイアウトを組んでみましょう。

前提としてviewportとメディアクエリの設定の下準備が終わっていることとします。

今回はPC・タブレット・スマホの3通りのレイアウトを用意します。

PC

PCではコンテンツ部分を横に3つ並べるレイアウトを組みたいと思います。今回はPCレイアウトがデフォルトとします。

<div class="wrapper">
  <div class="box orange">
    ヘッダー
  </div>
  <div class="box yellow">
    サイドバー1
  </div>
  <div class="box gray">
    コンテンツ
  </div>
  <div class="box skyblue">
    サイドバー2
  </div>
  <div class="box lime">
    フッター
  </div>
</div>
.box{
  height: 100px;
}
.orange{
  background-color: orange;
  width: 100%;
}
.yellow{
  background-color: yellow;
  width: 33.333%;
  float: left;
}
.gray{
  background-color: gray;
  width: 33.333%;
  float: left;
}
.skyblue{
  background-color: skyblue;
  width: 33.333%;
  float: left;
}
.lime{
  background-color: lime;
  width: 100%;
  clear: left;
}


これで以下のようなレイアウトになります。

f:id:chi_kun:20160521152552p:plain


タブレット

次にタブレットのレイアウトを組みたいと思います。

タブレットはコンテンツとサイドバー2を横並びにしたいと思います。

@media(max-width: 1000px){
  .yellow{
    width: 100%;
  }
  .gray{
    width: 50%;
    float: left;
  }
  .skyblue{
    width: 50%;
    float: left;
  }
}


サイドバー1の幅を100%にして、横にするコンテンツとサイドバー2をそれぞれ50%にします。

f:id:chi_kun:20160521155934p:plain


きちんとコンテンツとサイドバー2が2カラムになってますね。


スマホ

最後にスマホのレイアウトを作りましょう。
スマホは全ての要素を縦一列にしてみましょう。

@media(max-width: 700px) {
  .gray{
    width: 100%;
  }
  .skyblue{
    width: 100%;
  }
}


コンテンツとサイドバー2の幅が今までは50%になっていたので、それぞれ100%にしましょう。

f:id:chi_kun:20160521160916p:plain


きちんと縦一列になっていますね。


ここまで簡単にですが、レスポンシブwebデザインの基礎基本に触れてきました。

実際にレイアウトを組むときはもっと複雑なHTMLやCSSを書くと思うので、よく使うTipsやテクニックはまた今度機会があれば書きたいと思います。



本日は以上です。