84回目授業内容　マルチデバイス・スマートフォン対応サイト〜レスポンシブWebデザイン課題完成系 - 四十路男TokiyoのWeb人生再スタートDiary

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

マルチデバイス・スマートフォン対応サイト

固定レイアウト
- Container全体を4分割する
  - PC:４組
  - タブレット：２組
  - スマートフォン：１組

クライアントとの打ち合わせ方
- ワイヤーフレームを使って打ち合わす

h1タグにindex.htmlは書かない
- 書くなら全部に記述する

imgはpcサイズだとスマートフォンに入りきらない

img{ max-width : 100%}

で横幅指定する

メディアクエリーの設定

グリッドを敷く
- 12・16・等で縦にグリッドを書く

2段組の作成

#contents {
overflow : hidden;
width : 960px} /* 960/1024 */
#contents #main,
#contents #sub {
float : left;
margin : 0 10px } /*10/960*/
#contents #main { width : 620px } /*620/960*/
#contents #sub { width : 300px } /*300/960*/

ナビゲーションパネルの調整
- スマートフォン対応幅での25％を変更する

nav ul {
width : 960px;/* 960/1024 */
margin : 0 auto}

リキッドレイアウト（可変レイアウト）「フルードグリッド」

#contents #main,
#contents #sub { 
float : left;
margin : 0 1.0416667%} /*10/960*/ 
#contents #main { width : 64.5833333%} /*620/960*/
#contents #sub { width : 31.25%} /*300/960*/

- mainとsubの幅とmarginを％表記にする。

親要素であるcontentsもフルードグリッド化

#contents {
overflow : hidden;
width : 93.75%} /*960/1024*/

ナビゲーションも指定

nav ul {
width : 93.75%; /*960/1024*/
margin : 0 auto}

footerも指定

footer {
width : 91.796875%; /*940/1024*/
margin : 0 auto}

レスポンシブWebデザイン課題完成系

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=320,initial-scale=1.0">
<title>トップ|allWeb 豆はカラダにイイ</title>
<link href="http://fonts.googleapis.com/css?family=Righteous" rel="stylesheet" type="text/css">
<link href="css/style_l.css" rel="stylesheet" type="text/css" media="all">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">
</script>
<style>
article section figure {  float: right;  margin: 0 0 15px 15px;}
</style>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,  hgroup, menu, nav, section {
display: block;
}
@-o-viewport {width : 320px; zoom:1.0}
</style>
</head>
<body>
<header>
<hgroup>
  <h1><a href="/"><img src="images/2-1-zu03_a-2_71x72.png" alt="ロゴ　allWebクリエイター塾"></a></h1>
  <h2>豆はカラダにイイ</h2>
</hgroup>
   <nav>
     <ul>
<li><a href="">ホーム</a></li>
<li><a href="">枝豆一覧</a></li>
<li><a href="">枝豆隊</a></li>
<li><a href="">アクセス</a></li>
     </ul>
   </nav>
  </header>
<!-- //header -->

<!--contentns-->
<div id="contents">
<div id="main">
  
<section id="vitamin">
<h3>枝豆の栄養素はスゴい</h3>
<p>枝豆は大豆が未成熟で収穫したものですが、<a href="">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
</section>
  
<section id="reciept">
<h3>代表的な豆料理</h3>
<h4>枝豆</h4>
<img src="images/2-1-zu03_b_639x426.jpg" alt="イラスト　枝豆">　<p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
  
<h4>ずんだ</h4>
<img src="images/2-1-zu03_c_639x426.jpg" alt="イラスト　ずんだ"><p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</section>
  
</div>
<!--//main-->
  
<!--sub-->
<div id="sub">
  
<aside>
<h4>枝豆隊隊長</h4>
<img src="images/2-1-zu03_d_639x428.jpg" alt="肖像 枝豆隊長">　<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</aside>
  
</div>
<!--//sub-->
  
</div>
<!--//contents-->
  
  
<!-- footer -->
<footer>
<p><small>2004-2012&copy;allWebクリエイター塾</small></p>
</footer>
<!-- //footer -->
</body>
</html>

@charset "UTF-8";
/* CSS Document */

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	  margin: 0;
	  padding: 0;
		line-height: 1.0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
	font-family:
		"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro",
	"Hiragino Kaku Gothic Pro W3",
		"メイリオ",
		Meiryo,
		Osaka,
		"ＭＳ Ｐゴシック",
		"MS PGothic",
		sans-serif,
		verdana;
}
:focus {outline: 0;}}
table {
	border-collapse: separate;
	border-spacing: 0;
}
ul, ol {
	list-style-type: none;/* マーカーを消す */
}
a {
text-decoration: none; /* 下線を消す */
}
a img, iframe {border: none;}
img, input {
	vertical-align: bottom;
}
img{ max-width : 100%}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}

h1,h2,h3,h4,h5,h6 { margin-bottom : 24px}
h1 {font-size: 48px; line-height: 1} /* 48px */
h2 {font-size : 36px; line-height : 1.3333} /* 48px */
h3{font-size : 24px; line-height : 1} /* 24px */
hgroup h2,h4,h5,h6 {font-size : 16px; line-height : 1.5} /* 24px */

select {margin: inherit;}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol { margin-left: 2em; }
/* clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* HTML5 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}
/* body */
body {
	/*font-size: 16px;*/
	text-align: left;
	line-height : 1.5;
}
/* link */
a {
	color: #017acd;
}
/* container */
#container {
	width: 900px;
	margin: 0auto;
}
header { text-align : center;padding-top : 24px}
header h1 { margin-bottom : 24px}
header h2 { color : #62240b; font-weight: bold}

nav ul li { width : 25%; float : left}
nav ul li a { display : block; color: #d8c2a4; line-height: 1.8}
nav ul li a:hover { background-color: #900; color: #FFF;}
nav {
margin-bottom : 24px;
background-color: #7D4934;
background: -moz-linear-gradient(top, rgba(81,24,8,0.71) 0%, rgba(91,25,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,24,8,0.71)), color-stop(100%,rgba(91,25,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* W3C */
}
nav ul { overflow : hidden}

#contents {
width : 90%;
margin : 0 auto;
text-align : center}
#contents p { 
margin-bottom : 24px;
text-align : left;
line-height: 1.5;}
#contents img { 
margin-bottom : 24px; 
box-shadow : 0 0 12px #000}

footer {
color : white;
text-align : center;
padding : 24px 0;
background-color: #060}

/*768px*/
@media screen and (min-width : 768px){
#contents { text-align : left}
}

/*1024px*/
@media screen and (min-width : 1024px) {
html {
font-family : verdana, sans-serif;
font-size : 100%;
line-height: 1.5;
background: url(../images/960_grid_12_col.png) repeat-y top center}

#contents {
overflow : hidden;
width : 93.75%} /*960/1024*/
#contents #main,
#contents #sub {
float : left;
margin : 0 1.0416667%} /*10/960*/ 
#contents #main { width : 64.5833333%} /*620/960*/
#contents #sub { width : 31.25%} /*300/960*/

nav ul {
width : 960px;/* 960/1024 */
margin : 0 auto}

footer {
width : 91.796875%; /*940/1024*/
margin : 0 auto}

}

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。