前回から引き続き、2段組みのボックスを、「メディアクエリ」を使い、3段組み→6段組みへと可変していこう。まずはスマートフォン向けスタイルに記述したCSSをさらっと見ておこう。
　
「style.css」全デバイス共通とスマートフォン向けスタイル

/*==========================================
 コンテンツエリア全体のスタイル
===========================================*/
#contents {
  max-width: 960px;
  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%;
}

　
このソースの変更部分を、タブレット向けスタイルのメディアクエリ指定内に上書きしていく。
　
「style.css」

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

これでブラウザ幅521px以上では、3段組みのボックスができる。ここまでは簡単だ。スマートフォン向けスタイルの「#main .news」で2段組みボックスの指定である「width: 50%;」を3段組みボックス指定「width: 33.3333333%;」に上書きするだけである。

グリッドデザインの導入

次はPC向け固定スタイルのメディアクエリ指定内に記述する。961px以上は固定レイアウトのため、グリッドデザインを導入。グリッドデザインとは、ページを均等なカラムに分割し、カラムに沿ってパーツを配置していくレイアウト手法であり、規則性を持たすために有効な手段である。TRIAINAでは「960 Grid System」が配布している画像ファイルを利用する。
　

PC向け固定レイアウトを記述

グリッドデザインによって出した値を、PC向け固定スタイルに記述していく。
　
「style.css」

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

　
まずは「.news」に「width: 140px;」と記述。固定レイアウトなのでpxで指定する。そして左右の「padding」を10pxにする。次に「.news」の「img要素」の最大幅を「max-width: 100%;」とする。これはスマートフォン向けスタイルの「.news」の「img要素」に記述した「max-width: 90%;」を変更、上書きするためである。スマートフォン向けスタイルとタブレット向けスタイルでは、「.news」全体の左右にではなく、「img要素」「h3要素」「p要素」それぞれに左右の余白を5%に設定していた。親要素がセンター揃えのため、「img要素」の画像もセンター揃えになり、「max-width: 90%;」と最大値を設けることで、左右に5%ずつの余白ができるのだ。
　
PC向けスタイルでは、「.news」全体のスタイルに左右の「padding」をグリッドデザインに沿って指定。後は、「.news」の「img要素」「h3要素」「p要素」を「.news」ボックスの幅いっぱいになるように、上書きしてあげればいいだけだ。それではPCで見ていただこう。ブラウザ幅を広げたり縮めたりして、見てほしい。
　
【レスポンシブマルチカラム完成】
　
以下、今回追加した「style.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:960px;
}

/*==========================================
 グローバルナビゲーションのスタイル
===========================================*/
#gnav ul {
  text-align:center;
  margin:0 auto;
  max-width: 960px;
}
#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: 960px;
  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%;
}

/* タブレット向けレイアウト指定：521px～960px */
@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向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
  #main .news {
    width: 140px;
    padding:0 10px 0;
  }
  #main .news img {
    max-width: 100%;
} 
  #main .news h3 {
    padding: 0;
}
  #main .news p {
    padding: 0;
}
}

　
これで可変する段組(マルチカラム)が理解できたかと思う。次回はサイトの細かい部分とフッターを作成していく。その後はいよいよ「フリードグリッド」の完成だ。
　

Tweet