Vol.22 レスポンシブWebデザイン「2カラムレイアウト」モバイルファーストの視点からPCスタイルを最初につくる

2014/11/22 up カテゴリー : WEBの現場から！

前回作成したのは、各ページのテンプレートの基本構造。今回コンテンツエリアに「メインエリア」と「サイドバー」で構成する一般的な2カラムレイアウトをつくっていく。前回の基本構造を見直したいなら【こちら】から。

PC向け固定スタイルをグリッドデザインで作成

レスポンシブWebの制作方法は様々だろうが、当サイトが推奨しているのは「モバイルファースト」の視点から、「スマートフォン向けスタイル」→「タブレット向けスタイル」→「PC向け固定スタイル」を順にスタイルシートにメディアクエリを用いて記述していくという方法。しかし、実際にPC向け固定スタイルがある程度定まっていないと、スタイルシートの記述は困難であると言えるのだ。そこで、ひとまずPC向けレイアウト指定のメディアクエリ内に、PC用のCSSをグリッドデザインを取り入れて記述していく。最初は「スマートフォン向けスタイル」と「タブレット向けスタイル」を無視して作成していこう。
　

　
上の画像のように、記事部分であるメインエリアとサイドバーを記述していく。「page.html」のコンテンツエリアの記述を下記のように記述する。ソース黒枠右上の「ソースを表示」からコピー。
　
「page.html」

<!-- コンテンツエリア -->
    <div id="contents" class="cf">
<!-- 投稿記事 -->
        <div id="mainarea">
            <h3>
            COLUMN ＞ カテゴリ名
            </h3>
            <time>2014/11/11</time> 
            <h1>
            タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
            </h1>
            <article>
ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。
            </article>
        </div>
<!-- サイドバー -->
    <aside>
    <div class="sub">
ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。
    </div><!-- #sub end -->
    </aside>
    </div><!-- #contents end -->

　
そして「style-page.css」のPC向けレイアウト指定のメディアクエリ内に下記ソースを追加する。
　
「style-page.css」PC向けレイアウト指定

/* PC向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
  #mainarea {
    float: left;
    text-align: left;
    width: 540px;
    margin: 20px 100px 20px 10px;
  }
  #mainarea h1 {
    font-size: 1.7em;
    font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
    line-height: 1.6em;
    padding: 25px 0;
  }
  #mainarea h3 {
    font-size: 1.2em;
    font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
    line-height: 1.7em;
    text-align: center;
    padding-bottom: 7px;
  }
  #mainarea time {
    font-size: 0.8em;
    line-height: 1.7em;
    float: right;
  }
  #mainarea article {
    padding: 25px 0;
  }
  aside {
    float: left;
    text-align: left;
    width: 300px;
    margin: 20px 10px 20px 0;
  }
  .sub {
    width: 300px;
  }
}

　
これでPC用の固定スタイルの骨組みができあがった。それでは実際に見ていただくが、ウィンドウ幅960px以下のスタイルはまだ記述していないので、PCのウインドウ幅を961px以上で確認してほしい。
　
【2カラムレイアウトPC向け表示】

PC向け固定スタイルをスマートフォン向け（共通）スタイルに

PC向け固定スタイルがある程度できあがった時点で、そのコードをスマートフォン向け（共通）スタイルにコピーして修正していく。「style-page.css」の「コンテンツエリア全体のスタイル」の下あたりに「メインエリアのスタイル」と「サイドバーのスタイル」の場所をつくり、それぞれにコピーしたPC向け固定スタイルの記述をスマートフォン向け（共通）スタイルに最適な記述に変換していくのだ。もちろん、PC向け固定スタイルのメディアクエリ内の記述はそのまま残しておいてほしい。
　
「style-page.css」の全デバイス共通のスタイルとスマートフォン向けレイアウト指定

/*==========================================
 メインエリアのスタイル
===========================================*/
#mainarea {
  text-align: center;
  margin: 20px auto;
  width: 90%;
}
#mainarea h1 {
  font-size: 1.7em;
  font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
  line-height: 1.6em;
  padding: 25px 0;
  text-align: left;
}
#mainarea h3 {
  font-size: 1.2em;
  font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
  line-height: 1.7em;
  text-align: center;
  padding-bottom: 7px;
}
#mainarea time {
  font-size: 0.8em;
  line-height: 1.7em;
  float: right;
}
#mainarea article {
  padding: 25px 0;
  text-align: left;
}
 
/*==========================================
 サイドバーのスタイル
===========================================*/
aside {
  text-align: center;
  margin: 0 auto;
  width: 90%;
  }
  .sub {
  text-align: left;
  width: 100%;
  }

メインエリアもサイドバーも、スマートフォン向け表示では1列のレイアウトにしていくので、幅を90%にして左右の余白を設ける。当然センター揃えにする必要があるので「text-align: center;」（旧IE用の記述）と「margin: 0 auto;」（ここでは20px）を「#mainarea」に指定。1列のレイアウトなので「float: left;」は不要。そして天地のmarginを20pxとしてメインエリア全体のidセレクト「mainarea」のスタイルは完成。
　
「h1」と「h3」、「time」「article」の記述はほぼそのままだが、「h1」と「article」にはセンター揃えを解除する「text-align: left;」を加えてやる。サイドバーの指定も同様の考え方。

「スマートフォンスタイル」からの変更箇所を「PCスタイル」に上書き

それでは「PC」スタイルを修正していこう。トップページ作成のときにも説明したが要するに、「スマートフォン向け（共通）スタイル」から変更する部分を、「PC向け固定スタイル」で上書きしてあげればいい。ここでは先にPC向けスタイルは作成済みなので、スマートフォン向け（共通）スタイルから変更する部分だけを残して、スマートフォン向け（共通）スタイルと同じ記述部分は削除していく作業をするだけである。
　
「style-page.css」PC向けレイアウト指定

/* PC向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
  #mainarea {
    float: left;
    width: 540px;
    margin: 20px 100px 20px 10px;
  }
  aside {
    float: left;
    width: 300px;
    margin: 20px 10px 20px 0;
  }
  .sub {
    width: 300px;
  }
}

　
これで2カラムレイアウトの骨組みが完成した。この骨組みをつくっていく作業は、「モバイルファースト」の考え方はそのままで、先にPC用記述からしていく方法をオススメしたい。骨組みさえつくってしまえば全体が見えてくるので、後は「スマホ」→「タブレット」→「PC」と細かい所を順に作成していけばいいだけだ。では、PCでウィンドウ幅を伸縮したりして実際に見ていただこう。
　
【レスポンシブ2カラムレイアウト骨組み】
　
次回からは「メインエリア」と「サイドバー」内の細かい部分を作成していく。
　