CSSの基本　レスポンシブレイアウトのおさらい

2013-02-02

CSSの基本としてレスポンシブレイアウトをテーマにしてみました。昨年あたりから注目を集めているレスポンシブレイアウト。さまざまなスクリーンサイズに対応したWebサイトを作成するための方法として是非身につけておきたいスキルですね。

レスポンシブレイアウトがこれまでのモバイルサイトと違うのは一つのHTML構造を使ってCSS側でデザインやレイアウトを変更することです。わざわざモバイルサイト用にデザインを作ることなく、通常のデザインを使って作成できるというのが大きな違いですね。

ここでは基本的なところをマスターするため、ものすごく単純化したHTML構造を使って実際のレスポンシブレイアウトをためしてみようと思います。

レスポンシブの基本　viewport

いきなりモバイル向けのレイアウトとなるとちょっとややこしいので、まずは普通にPC向けのレイアウト用にCSSを書いていきます。それでつくってみたのがこちら。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>レスポンシブレイアウト</title>
  <meta name="viewport" content="width=device-width ">
  <link rel="stylesheet" type="text/css" href="responsive.css" media="all" />
</head>
<body>
  
  <div id="wrapper">
    <div id="header">
      <hgroup>hgroup</hgroup>
      <nav>nav</nav>
    </div>
    <div id="main">
      <section>section1</section>
      <section>section2</section>
      <section>section3</section>
    </div>
    <div id="side">
      <aside>aside1</aside>
      <aside>aside2</aside>
      <aside>aside3</aside>
    </div>
    <div id="footer">
      <div class="container">
        <footer>footer1</footer>
        <footer>footer2</footer>
        <footer>footer3</footer>
      </div>
    </div>
  </div>

</body>
</html>

こちらがCSS。なんの変哲もない、ブログっぽいレイアウトにしています。

@charset &quot;utf-8&quot;;
/* =============================== 
    Layout 
================================== */
#wrapper{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* header */
hgroup{
    height: 80px;
    background-color: #f4f1f1;
    border-bottom: 1px solid #555;
}
nav{
    height: 40px;
    background-color: #d6d3d3;
    border-bottom: 1px solid #555;
}

/* main */
#main{
    float: left;
    width: 659px;
    background-color: #d0cccc;
    border-right: 1px solid #555;
}
section{
    width: 600px;
    height: 200px;
    margin: 20px 0 20px 20px;
    background-color: #f7f7f7;
}

/* side */
#side{
    float: left;
    width: 300px;
    background-color: #848181;
}
aside{
    width: 280px;
    height: 200px;
    margin: 20px 0 20px 10px;
    background-color: #f7f7f7;
}

/* footer */
#footer{
    clear: both;
    float: left;
    width: 960px;
    background-color: #666464;
}
footer{
    float: left;
    width: 300px;
    height: 200px;
    margin: 20px 10px 20px 10px;
    background-color: #f7f7f7;
}

ここで重要なのがHTMLのmeta要素、viewportというやつ。iPhoneなんかでwebサイトを見ると、本当なら横幅の320px分しか表示されないはずなのに、実際は画面いっぱいに縮小して表示されます。これがviewportの機能で、iPhoneの小さい画面を仮想的にPC画面と同じサイズで見せているということですね。

つまり、レスポンシブレイアウトにする場合こちらで画面サイズの指定をしてCSSを変更しても、PCサイズで表示されてしまうということです。

これをHTMLのmeta要素で上記のコードのように記述することで、画面表示を端末の画面サイズで表示させるようにすることができる、ということですね。

レスポンシブの基本　@media

ではこのPC用に作ったレイアウトからモバイルサイト用にCSSを変更していきます。やり方は@mediaを使って横幅を指定し、その中にモバイル用のCSSを書き込んでいくという流れになります。

@mediaの使い方はこんな感じです。

@media screen and (min-width:769px){

    /* PC用サイズ */
    
}

@media screen and (min-width:481px){

    /* タブレット用サイズ */
    
}

    /* それ以外はモバイル用サイズ */

横幅が最低769px以上ならPC用、最低481px以上ならタブレット用、480px以下はモバイル用サイズという意味です。もちろん数字は変更可能なのでもっと細かくすることも可能です。今回はモバイル用のみなので、タブレットサイズまでは普通にPC用画面を表示するようにします。

先ほど作ったPC用CSSはPC用サイズの中にコピペします。コピペ元のCSSはそのまま残しておきこれを元にしてモバイル用レイアウトを作成していきます。

/* =============================== 
    Layout 
================================== */

/* モバイル用レイアウト */

#wrapper{
    width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* header */
hgroup{
    height: 80px;
    background-color: #f4f1f1;
    border-bottom: 1px solid #555;
}
nav{
    height: 40px;
    background-color: #d6d3d3;
    border-bottom: 1px solid #555;
}

/* main */
#main{
    width: 320px;
    background-color: #d0cccc;
}
section{
    width: 300px;
    height: 200px;
    margin: 20px 10px;
    background-color: #f7f7f7;
}

/* side */
#side{
    width: 320px;
    background-color: #848181;
}
aside{
    width: 300px;
    height: 200px;
    margin: 20px 0 20px 10px;
    background-color: #f7f7f7;
}

/* footer */
#footer{
    width: 320px;
    background-color: #666464;
}
footer{
    width: 300px;
    height: 200px;
    margin: 20px 10px 20px 10px;
    background-color: #f7f7f7;
}


/* PC用サイズ */
@media screen and (min-width:481px){
    
    /* コピペしたPC用CSS */   
}

横幅を320pxに、内側に10pxのマージンを入れています。それ以外は基本的に同じです。そしてこれをブラウザで見てみると・・・ブラウザのサイズを小さくすると確かにレイアウトが変更されるのがわかります。

レスポンシブの基本　display:none

これだけでも一応モバイルサイズの画面に対応してはいるのですが、縦に長くなり見づらいレイアウトになってしまいます。これをさけるため、モバイル用のデザインを考えなくてはいけません。たとえば、サイドのメニューは画像を削除してテキストだけのレイアウトにするとか、テキストのメニューをアイコンで表示してしまうなどです。

結局はモバイル用に新しくデザインするしかない？と思っていたのですが、これの解決方法としてdisplay:noneで不要な箇所を非表示にしてしまうという方法があります。例えばフッター部分にメニューを集約させて、サイドバーはばっさり削除するなどです。

ここまでで基本的なレスポンシブレイアウトの方法を紹介しました。画面サイズでレイアウトを変更する事ができたので、ここからさらにCSSを変更して完成度を高めていくことができます。