Web-Gimmick Web制作と知識のメモ帳

リッキドデザイン+レスポンシブ、サイド幅固定でコンテンツ幅可変レイアウトの作り方。

レスポンシブサイトの中で最もポピュラーな形じゃないでしょうか。
サイドコンテンツの幅は固定して、メインコンテンツの幅をブラウザサイズで可変させる。
これだけだとリキッドデザインってやつですね。

さらにメディアクエリを追加して各デバイスごとに表示を切り替えることでレスポンシブ化します。なんだか言葉にするとややこしく聞こえるけどやってみると意外に簡単です。

今回はリッキドデザイン+レスポンシブレイアウトの作り方です。

リッキドデザイン+レスポンシブ、サイド幅固定でコンテンツ幅可変レイアウトの作り方

サイド幅固定でコンテンツ幅可変レイアウトのデモ。

余計な装飾があるとわかりづらいので、
デモはなるべくシンプルに作ってます。
やりたいことは次の通り。

  • PCの表示にはサイドコンテンツの幅を固定、メインコンテンツの幅を可変。
  • タブレットの表示にはPCと同じレイアウトでサイドコンテンツの幅を小さくして表示。
  • スマホの表示にはfloatを解除して1カラムで表示する。
可変レイアウトのデモ

デモでは980px以上=PC用、640px〜980px=タブレット用、640px以下=スマホ用として、メディアクエリを指定してます。

HTMLとCSSの記述方法。

HTML

viewportの指定、head内に。

<meta name="viewport" content="width=device-width">

レイアウトのhtml

<header>
	ヘッダー
</header><br>
<div id="wrapper" class="clr"><h3>
	<div id="mainWrapper">
		<section id="mainContent">
			メイン
		</section>
	</div>
	<section id="sideContent">
		サイド
	</section>
</div>
<footer>
	フッター
</footer>

CSS

レイアウトのCSS

body {
	color: #000;
	font-size:1.8rem;
}
header{
	max-width: 1120px;
	text-align: center;
	background-color: #7AA7D6;
	padding: 60px 0;
	margin: 0 auto;
}
#wrapper{
	max-width: 1120px;
	margin: 0 auto;
}
#mainWrapper{
	width: 100%;
	float: left;
}
#mainContent{
	background-color: #FBFCD0;
	text-align: center;
	padding: 250px 0;
	margin-right: 300px;
}
#sideContent{
	width: 300px;
	background-color: #D1E7F9;
	text-align: center;
	padding: 250px 0;
	margin-left: -300px;
	float: right;
}
footer{
	max-width: 1120px;
	text-align: center;
	background-color: #7AA7D6;
	padding: 60px 0;
	margin: 0 auto;
}


@media screen and (max-width: 980px) {
#mainContent{
	margin-right: 200px;
}
#sideContent{
	width: 200px;
	margin-left: -200px;
}
}

@media screen and (max-width: 640px) {
#mainWrapper{
	width: 100%;
	float: none;
}
#mainContent{
	margin-right: 0;
}
#sideContent{
	width: 100%;
	margin-left: 0;
	float: none;
}
}

リセットCSSはこちらを使ってます。

仕組みの説明

headerとfooterはとくに問題ないですね普通です。
少しややこしいのがこの部分。

<div id="wrapper" class="clr">
  <div id="mainWrapper">
    <section id="mainContent">
      メイン
    </section>
  </div>
  <section id="sideContent">
     サイド
  </section>
</div>

ここでポイントになるのが
#mainWrapperにwidth: 100%;
そのなかの#mainContentにmargin-right: 300px;(サイドの幅)
そして#sideContentにmargin-left: -300px;(サイドの幅)を指定すること。

こうすることでカラム落ちを防いでくれてます。
たまにどーだったっけ?と忘れがちになりやすい部分。

あとはメディアクエリでディスプレイサイズごとにレイアウトを変更すれば出来上がりです。
サイド幅固定でコンテンツ幅可変レイアウトの作り方でした。

関連する記事はこちら

コメントをどうぞ

サイト内検索

Copyright ShitteLog All rights reserved.