２カラム構成がレスポンシブウェブデザインのポイント

理屈は分かっているつもりが、自分で記述しようとすると上手くいかないのがレスポンシブデザインです。

習得のポイントを理解できるよう、ブラウザの画面幅によって表示がどのように変化するのかサイドメニューの部分を色分けしたサンプルページを作ってみました。

目次非表示

レスポンシブウェブデザインの知りたいポイント
サイドメニューの色が変わるサンプルページ
- サンプルCSS
- サンプルHTML（PHPで作成）
２カラムレスポンシブスタイルの正体

レスポンシブウェブデザインの知りたいポイント

今回用いるのは、PCでは右サイドバーを表示しモバイルデバイスではその表示メニューがコンテンツ下に回り込むオーソドックスなデザインです。

レスポンシブデザインを使いたいと思ったとき、参考サイトを見てもなかなか理解しにくいのが、メディアによって数値分けされている表示幅がなぜこの値なのかというところではないでしょうか。

Webデザインのテクニックを掲載しているサイトでも、この数値の根拠にまで言及してしまうと最新のデバイスに対応するために後々に記事を編集しなければならなくなるので面倒なこともあってか詳しく記載されているサイトは少ないです。

それに、実際に細かいところまで具体的に書かれていても情報量が多すぎて分かりにくいのが正直なところでしょう。

こうなると参考サイトの数値をそのまま採用してしまうのが手っ取り早いのですが、サイトの独自性に拘るなら、スタイルシートの数値がなぜそうなのか根拠を知りたいところです。

サイドメニューの色が変わるサンプルページ

今回は、メディアクエリで記載した数値によりブラウザの表示幅でどのように変化するのか分かるようサイドメニューの背景に色を付けたサンプルページを作ってみました。

参照：レスポンシブなサンプルページ

デスクトップPCやノートPCなどでブラウザの端をマウスで左右に縮小させて、表示がどのように変化するか確認することができます。

サンプルCSS

今回作成したページはスタイルシートを外部のCSSファイルに記述しました。


html {
  height: 100%;
  position: relative;
 }
body {
   height: 100%;   
   margin: 0px;
   -webkit-text-size-adjust: 100%;
}
.wrapper{
     width: 100%; 
     position: relative; 
     min-height: 100%; 
}
.hwrapper{
   margin:   0;
   padding: 10px;
   background-color: #faac58;
}
.header{
  margin:   0;
  max-width: 800px;
  padding: 10px; 
  clear : both;
}
img{
margin-top: 10px;
}
.wrap{
   margin: auto;
   max-width: 1000px;
   padding-bottom:150px; /*フッターの高さに合わせる*/
}
.container {
  margin: auto;
  max-width: 95%;
  padding: 10px; 
  background-color: #ccc;
  clear : both;
}
.side {
  margin: auto;
  margin-top: 3px;
  max-width: 95％;
}
.fwrapper{
   width: 100%;
   background-color: #98fb98;
   height:150px; 
   position:absolute;
   bottom:0;
   clear: both;
}
.footer{
  margin: auto;
  max-width: 800px;
  padding: 10px;
}
/*480から767までの画面サイズ*紫*/
@media screen and (min-width: 480px){
img{
max-width: 100%;
height: auto;
}
img{
width: 130px;
clear: both;
margin:15px;
}

.container {
  margin: auto;
  max-width: 95%;
}

.side {
    float: none;
    max-width: 95%;
    padding: 10px;  
    background-color: #ff00ff;
}
}
/*768から1023の画面サイズ*水色*/
@media screen and (min-width: 768px){
img{
width: 300px;
height: auto;
}
.container {
  float:left;
  margin-left: 5px;
  width: 67%;
}
.side {
  float: right;
  margin-right: 5px;
  margin-top: 3px;
  max-width: 25%;
  padding: 10px; 
  background-color: #00ffff;
}
}
/*1024以上の画面サイズ*緑*/
@media screen and (min-width: 1024px){
img{
width: 370px;
height: auto;
}
.container {
  float:left;
  margin: auto;
  width: 680px;
}
.side {
  float: right;
  margin: auto;
  margin-top: 3px;
  max-width: 270px;
  background-color: #BEF781;
}
}

表示幅が小さなデバイスではコンテンツ下に回り込んだメニューは無色。
480pxから767pxまでタブレットなどでは紫色
768pxから1023pxのノートパソコンなどでは水色「ここで下に回り込んでいたメニューがサイドバーに移ります。」
1024px以上の大きなモニタでは緑で表示されるようにしています。

サンプルHTML（PHPで作成）

HTMLの記述は、実用を考えてヘッダーとフッダーを外部ファイルにし読み込むためPHPの「ｉｎｃｌｕｄｅ文」を使いました。

phpが苦手な方は、ｉｎｃｌｕｄｅが使われているヘッダーとフッダー部分を以前書いた記事「コンテンツのボリュームが少なくてもフッターを最下部に固定したい」のＨＴＭＬに読み替えていただければ理解できるかと思います。


<!DOCTYPE html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css" media="all">
</head>
<body>
<div class="wrapper">
<?php include 'heder.html'; ?><!ここヘッダー>
<div class="wrap">
<div class="container">
<h2>テスト見出し</h2>
<p>インフォメーション、ここに本文を長々と書いていきます。書き足りないと背景の色が付きません。</p>
</div>
<div class="side">
<p>サイドメニュー、ここにカテゴリーなどのメニューを作成します。</p>
</div>
</div>
<?php include 'footer.html'; ?><!ここフッダー>
</div>
</body>
</html>

HTMLの記述だけだとこのようにシンプルですが、メディアクエリがある分スタイルシートまで一緒に記述してしまうのは現実的ではなさそうです。

今回のサンプルは「float」を用いたレスポンシブデザインの常套手段ですが、こうしてみると実際の操作はスタイルシートで行われているのが分かります。