レスポンシブWebデザインでつくる「2カラムレイアウト」の通常ページもいよいよ完成に近づいてきた。前回のメインエリアに続き、サイドーバー内の画像スタイルを記述していこう。完成サンプルは【こちら】から。下のそれぞれの画像にならい、スマートフォン→タブレット→PCの順にサイドバーを完成させていく。
　

【スマートフォン】

【タブレット】

【PC】

　
上の画像を見ればお分かりだろうが、PCでは右横にあるサイドバーが、スマートフォンやタブレットではメインエリアの下にきている。それではサイドバー上部にある3枚の画像のスタイルを「style-page.css」の「スマートフォン向け（共通）スタイル」から記述していく。下記ハイライト部分が、今回追加したサイドバーの画像のスタイル。ソース黒枠右上の「ソースを表示」からコピーできる。
　
「style-page.css」

/*==========================================
 サイドバーのスタイル
===========================================*/
aside {
  text-align: center;
  margin: 0 auto;
  width: 90%;
}
.sub {
  text-align: left;
  width: 100%;
}
.top {
  width:100%;
}
.top img {
  width:100%;
  height:auto;
  margin-bottom: 20px;
}

以下はHTMLのサイドバー部分。サイドバーの画像はとりあえず何でもいいので、トップページのスライドショーで使用したものを使う。
　
「page.html」

<!-- サイドバー -->
<hr class="yokosen">
	<aside>
	<div class="top" class="cf">
		<img src="images/topimage.jpg" alt="ピックアップ">
		<img src="images/topimage2.jpg" alt="ピックアップ">
		<img src="images/topimage3.jpg" alt="ピックアップ">
	</div>
	<div class="sub">
ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。ここはサイドバー。記事ランキングとピックアップが入ります。
	</div><!-- #sub end -->
	</aside>

　
「aside要素」内にあるclassセレクタ「top」の中にフルードイメージを用いた「img要素」を3つ並べてあるだけの簡単なコードである。次にタブレット向けスタイルの記述を見ていこう。タブレット表示では3つの画像が左に、テキストが右にくるレイアウトとなる。それでは下記ハイライト部分をタブレット向けスタイルのメディアクエリ内に追加してみよう。
　
「style-page.css」

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

　
テキスト部分である「.sub」と画像部分である「.top」のスマートフォン向けスタイルからの変更箇所を、追加もしくは上書きしていく。まずはそれぞれ「float」での回り込み指定を新たに追加。そしてスマートフォン向けの1カラムから、タブレット向けの2カラムに変更するために、「width:48%;」を指定して縦2列に並ぶようにする。続いて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;
  }
  .sub {
    float: none;
    width: 300px;
  }
  .top {
    float: none;
    width:300px;
  }
  .yokosen {
    display:none;
  }
}

　
「.sub」と「.top」はタブレット向けスタイルではそれぞれに回り込みを指定していた。PC向けでは1列に並ぶため「float: none;」を上書きして解除してやる。そして、現段階でこのサイトは「フリードグリッド」を導入していないので、「.top」の横幅はPC固定スタイルに合わせpxで指定する。最後にここで新たに登場した「.yokosen」だが、まずはHTMLを見てほしい。
<hr class="yokosen">という水平線の記述があるのが分かるだろう。ここではhrタグにclass名を付加している。この「.yokosen」のスタイルを、スマートフォン向けスタイルとタブレット向けスタイルでは何も指定していないので、「reset.css」に記述してあるディフォルトの水平線のスタイルが適応される。そしてPC向けスタイルで、「display:none;」とすることで、ウィンドウ幅961px以上ではサイドバー上部の水平線は表示されないのである。
　

▼　▼　▼

　
これで「2カラムレイアウト」でつくる通常ページは残すところ「フリードグリッド」の完成のみとなった。と言っても、トップページ作成のときに説明しているので楽勝だろう。それが終われば、いよいよWordPressを導入しサイトと連結していく。期待して待っていてほしい。
　

Tweet