サイト制作もいよいよ大詰めだ。今回は最後の総仕上げとして「フリードグリッド」への変換を行う。

「フリードグリッド」への変換

前回までに完成したサイトは、961px以上では固定レイアウトとなり、ウィンドウサイズを広げてもpxでそれぞれの要素の幅を指定しているので、幅は固定されたままであった。そこでPC用のブレイクポイントを920pxに改め、921px～1100pxまでをいわゆるリキッドレイアウト（可変レイアウト）にしていく。そして、リキッドに対応したグリッドデザインを特に「フルードグリッド」と言い、レスポンシブWebデザインは「フリードグリッド」を導入することで完成するのである。

960pxで固定レイアウトを作った理由

それならばなぜ最初から920pxで固定レイアウトにしなかったのか？それはグリッドデザインを行う際に、グリッドのカラム数が12や16など多くの数字で割り切れる960pxが、フレキシブルにグリッドの設計を行える数値なのだ。TRIAINAでは、この960pxを基準に固定レイアウトを作成し、その後「フリードグリッド」を導入し、pxで指定していた箇所を%へと変換していく。

カラム幅の変更

pxで指定していた値を%へ変換するには、以下のような計算式を使う。

変更する部分は、以下の画像の6つ並んだカラムである。このカラムの「.news」はPC向けスタイルではpx指定をしていたのを思い出してほしい。カラム以外の要素、例えばグローバルナビゲーションは最初から%を指定していたので、変更する必要なない。
　

　

/* PC向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
  #main .news {
    width: 140px;
    padding:0 10px 0;
  }
}

上記CSSのpx部分を、計算式を使い%へと変更していく。まずは「width: 140px;」。変換したい値はもちろん「140px」。変換したい値の親要素の幅は、「#main」の幅であるが、このidセレクタはさらに親要素である「#contents」の「max-width: 960px;」を継承している。なので変換したい値の親要素の幅は「960px」である。
　すなわち「140÷960×100＝14.5833333」となる。同様に「padding」の左右の幅10pxも計算する。「10÷960×100＝1.04166667」となる。計算して出た数値をスタイルシートに書き込んでいく。その際に、「961px以上では固定レイアウト」の部分も下記のように変更。「min-width: 961px」を「min-width: 921px」と修正し、PC向けスタイルのブレイクポイントを「920px」に変更する。

/* PC向けレイアウト指定：921px～1100px（1101px以上は固定レイアウト） */
@media only screen and (min-width: 921px) {
  #main .news {
    width: 14.5833333%;
    padding:0 1.04166667% 0;
  }
}

これだけでは、921pxから960pxまでが可変レイアウトとなっただけである。と言うのも、「header」の「img要素」や、グローバルナビゲーションの「ul要素」、コンテンツエリア全体のスタイルである「#contents」に、「max-width: 960px;」と指定しているので、それ以上は可変しないのである。なので「max-width: 960px;」と記述してある所を、「max-width: 1100px;」に変更してやる。変更箇所は下記CSSのハイライト部分。ソース黒枠をマウスオーバーで右上「ソースを表示」からコピーしてほしい。
　
「style.css」

@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 全デバイス共通のスタイルとスマートフォン向けレイアウト指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/*==========================================
 body
===========================================*/
body {
  width: 100%;
  background-color:#FFF;
  font-family:'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color:#000;
}
a {
  color:#000;
  text-decoration:none;
}
a:hover {
  color:#555;
  text-decoration:underline;
}

/*==========================================
 ヘッダーのスタイル
===========================================*/
header {
  text-align:center;
  margin:0 auto;
}
header h1 {
  padding:15px 5px 15px 5px;
}
header h1 img {
  width:100%;
  height:auto;
  max-width:200px;
}
header img {
  width:100%;
  height:auto;
  max-width:1100px;
  margin-bottom:-2px;
}

/*==========================================
 グローバルナビゲーションのスタイル
===========================================*/
#gnav ul {
  text-align:center;
  margin:0 auto;
  max-width: 1100px;
}
#gnav ul li {
  float: left;
  width: 50%;
  border-bottom: 2px solid #000;
  padding-top: 15px;
  padding-bottom: 15px;
}
#gnav ul li a{
  display: block;
}

/*==========================================
 コンテンツエリア全体のスタイル
===========================================*/
#contents {
  max-width: 1100px;
  margin: 0 auto;
  text-align:center;
  padding-bottom: 20px;
}
/*==========================================
 コンテンツエリア -> NEWのスタイル
===========================================*/
#main h2 {
  margin-bottom: 15px;
}
#main .news {
  width: 50%;
  float: left;
  margin-bottom: 20px;
}
#main .news img {
  width: 100%;
  height: auto;
  max-width: 90%;
} 
#main .news h3 {
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  line-height: 2.0em;
  padding: 0 5%;
}
#main .news p {
  text-align: left;
  font-size: 0.7em;
  line-height: 2.0em;
  padding: 0 5%;
}

/*==========================================
 フッターのスタイル
===========================================*/
footer {
  margin: 0 auto;
  text-align:center;
  border-top: 2px solid #c0c0c0;
  padding: 15px 0 15px 0;
}
footer p {
  font-size: 0.6em;
  margin-top: 10px;
}

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

/* PC向けレイアウト指定：921px～1100px（1101px以上は固定レイアウト） */
@media only screen and (min-width: 921px) {
  header #back{
    background-color:#dddddd;
    height:auto;
  }
  #main .news {
    width: 14.5833333%;
    padding:0 1.04166667% 0;
  }
  #main .news img {
    max-width: 100%;
} 
  #main .news h3 {
    padding: 0;
}
  #main .news p {
    padding: 0;
}
}

119行目の「/* タブレット向けレイアウト指定：521px～960px */」とあった部分を「/* タブレット向けレイアウト指定：521px～920px */」に変えてある。これで「フリードグリッド」は完成だ。では実際にPC画面で見てみよう。ウインドウ幅を伸縮させて、921px～1100pxの幅が可変するのを確かめてほしい。
　
【「フリードグリッド」の完成】
　

　
最大幅が1100pxとなり、ワイドPC画面で見ても迫力あるものとなる。これこそが「レスポンシブWebデザイン」のコンセプトである、「どのスクリーンサイズで見ても最適なサイトを提供する」ということなのだ。一通りの「レスポンシブWebデザイン講座」はこれで終わりだが、次回はこのトップ画面をさらにカスタマイズしていく。そしてトップ画面だけではなく、ページのテンプレートサイトも作成したい。
　
「レスポンシブWebデザイン」は無限の可能性を秘めている。TRIAINAではさらなる高見を目指し、その極意を追求していきたいと切望する。〜第一章完〜
　

Tweet