「2カラムレイアウト」の通常ページが完成した後は、あらゆるデバイスでもデザインは最適なのかを一通りテストしてみてほしい。PC画面でウィンドウ幅を伸縮させたり、手持ちの端末でテストしてみたり、また以前に紹介した「Viewport resizer」を使って、あらゆる角度から検証するのである。前回までに制作した「2カラムレイアウト」サイトでも2点ほど修正したい箇所がある。

PC向けスタイルの左右のmarginを広げる

　
上の画像を見てほしい。前回までに作成した通常ページをウィンドウサイズ921pxで見たときのデザインである。このサイトは「フリードグリッド」導入前は、全体の幅を960pxとして、左右に10pxずつ余白をとっていた。そして「フリードグリッド」を導入したことで、921px～1100pxまでのウィンドウサイズでは若干、左右の幅が狭いように感じる。ならもう少し、左右のmarginをとってやればいいことだ。CSSのPC向けレイアウト指定のメディアクエリ内の幅を変更するだけである。
　
「style-page.css」

/* 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;
  }
}

　
上記スタイルシートは「フリードグリッド」導入前のコード。「#mainarea」の左のmarginと「aside」の右のmarginの10pxを20pxにそれぞれ変更して左右の幅を広げ、%へ変換する計算式を使う。

前回「フリードグリッド」の導入を行ったときは、「変換したい値の親要素の幅」を960pxと指定していたが、左右の幅を計20px広げた分980pxで計算する。これでグリッドデザインが崩れることなく左右に幅を設けられるのだ。計算済みのソースは下記。
　
「style-page.css」

/* PC向けレイアウト指定：921px～1100px（1101px以上は固定レイアウト） */
@media only screen and (min-width: 921px) {
  #mainarea {
    float: left;
    width: 55.1020408%;
    margin: 20px 10.2040816% 20px 2.04081633%;
  }
  aside {
    float: left;
    width: 30.6122449%;
    margin: 20px 2.04081633% 20px 0;
  }
}

　
これで若干だが幅が広がり、狭苦しさはなくなった。ほんの少しの違いだが、与える印象は違うものになるのだ。下の画像は修正後サイトをウィンドウ幅921pxで観覧時のもの。
　

マイナーブレイクポイントを設定

　
上の画像はウィンドウ幅521pxのときの表示である。グローバルナビゲーションに注目してもらいたい。ブレイクポイントを520pxに設定してあるので、あと1px分、ウィンドウサイズを縮めればグローバルナビは縦3列となるのは了解済みであろう。しかし、521pxのときの横1列のナビでは、隣り合うメニューの文字の距離が若干、狭く感じる。もしメニュー名が、もっと長い文字となった場合は表示が崩れてしまう恐れがある。かと言って、ブレイクポイントの見直しを始めてしまうと、大変な作業になってしまう。そこで最初に定めた520pxと920pxのブレイクポイントを「メジャーブレイクポイント」とし、グローバルナビのブレイクポイントを「マイナーブレイクポイント」として考えるのだ。「メジャーブレイクポイント」は全体における画面設計であり「マイナーブレイクポイント」は部分的な微調整として捉えれば分かりやすいかと思う。スタイルシートの「タブレット向けスタイル」を下記のように2つに分けてみてほしい。
　
「style-page.css」

/* タブレット向けレイアウト指定：521px～760px */
@media only screen and (min-width: 521px) {
  .sub {
    float: right;
    width: 48%;
  }
  .top {
    float: left;
    width:48%;
  }
}

/* タブレット向けレイアウト指定：769px～920px */
@media only screen and (min-width: 769px) {
  #gnav {
    border-top: 1px solid #000;
    border-bottom: 5px double #000;
    margin-top: 10px;
  }
  #gnav ul {
    border-top: none;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #gnav ul li {
    width: 16.6666667%;
    border-bottom: none;
  }
}

　
これでサイドバーのスタイルはそのままで、グローバルナビゲーションのブレイクポイントが768pxとなった。同じように以前に完成済みであるトップページの「style.css」の「タブレット向けスタイル」も2つに分けてほしい。
　
「style.css」

/* タブレット向けレイアウト指定：521px～760px */
@media only screen and (min-width: 521px) {
  #main .news {
    width: 33.3333333%;
  }
}

/* タブレット向けレイアウト指定：769px～920px */
@media only screen and (min-width: 769px) {
  #gnav {
    border-bottom: 5px double #000;
    margin-top: 10px;
  }
  #gnav ul {
    margin-bottom: 10px;
  }
  #gnav ul li {
    width: 16.6666667%;
    border-bottom: none;
  }
}

　
下記リンクから確認できる。

これでトップページと通常ページのテンプレートが全て完成し、第2章が終了した。第3章からはWordPressを導入して、作成したサイトを連動させていく。下記ダウンロードから作成した全ソースをダウンロード可能。乞うご期待！
　
【→sample.zip（zip）】
　

Tweet