レスポンシブデザインで作るWEB - ＷＥＢクリエイター修行日記

レスポンシブデザインが登場した理由

それはandroidの登場。あまりにも端末種類が多すぎるので、全てに対応するように分岐を書くことが不可能になったから。

レスポンシブに取り組む際のポイント

プロトタイプを作ること。
使いまわしできる「プロトタイプ」をひとつ作れば生きていける。

どのWEB技術学習を優先するか迷ったらレスポンシブ！

数多あるWEBの技術の中でレスポンシブひとつで中小企業のニーズは全て満たす。レスポンシブさえ覚えれば食べていける！

プロトタイプとは

S、M、Lの3サイズのスタイルシートと、それらに振り分けるための分岐点（ブレークポイント）の設定を作ること。
ブレークポイントは「メディアクエリー」で指定する。
メディアクエリーはデバイスの解像度、画面幅、向きなどによって適用するCSSを切り替える技法のことです。
メディアクエリーはこんな感じ。

@media screen and(min-width:768px){

「幅768pxよりも大きい表示画面幅の時」という条件です。

ASCIIの「ゼロから始めるレスポンシブWebデザイン入門」に従ってレスポンシブデザインのWEBを作ってみました。

完成デモ
※960グリッドシステムの12カラム画像が背景に適用されたままになっています。気に入ったのでそのまま残してありますが、普通はデザイン完成時にCSSから消します。

レスポンシブindex.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>トップ|allweb 豆はカラダにイイ</title>
<link rel="stylesheet" type="text/css"  href="css/style.css" media="all">

</head>

<body>
<!--▼header-->
<header>
<hgroup>
<h1><a href="/"><img src="img/logo.png" alt="ロゴ　webクリエイター"></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 end-->
<!--▼content-->
<div id="content">
<div id="main">
<section id="vitamin">
<h3>枝豆の栄養素はスゴい</h3>
<p>枝豆は大豆が未成熟で収穫したものですが、<a href="">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
</section>

<section id="recipi">
<h3>代表的な豆料理</h3>
<h4>枝豆</h4>
<img src="img/edamame2.jpg" alt="イラスト　枝豆"><p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>

<h4>ずんだ</h4>
<img src="img/zunda2.jpg" alt="イラスト ずんだ"><p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</section>

</div>
<!--▲main end-->

<!--▼sidemenu-->
<div id="sidemenu">

<aside>
<h4>枝豆隊隊長</h4>
<img src="img/kuma.gif" alt="肖像 枝豆隊長"><p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</aside>

</div>
<!--▲sidemenu end-->
</div>
<!--▲content end-->

<!--▼footer-->
<footer>
<p><small>2004-2012&copy;Webクリエイター修行日記</small></p>
</footer>
<!--▲footer end-->

</body>
</html>

レスポンシブstyle.css

@charset "UTF-8";
/* reset  */
*{margin:0;	padding:0;}
a{	text-decoration:none;}
ul,ol{list-style:none;}
img{	vertical-allign:bottom; max-width:100%;}
/* layout */
h1,h2,h3,h4,h5,h6{margin-bottom:24px;}
h1{font-size:48px; line-height:1.0;}
h2{font-size:36px; line-height:1.333;}
h3{font-size:24px; line-height:1.0;}
hgroup: h2,h4,h5,h6{font-size:16px; line-height:1.5;
}
body{
	font-size:16px;	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, verdana, sans-serif; line-height:1.5; 
	}

/* header */
header{text-align:center; pagging-top:24px;}
header h1{margin-bottom:24px;}
header h2{color:#62240b;}

/* nav */
nav ul li{width:25%; float:left;}
nav ul li a{display:block; color:#d8c2a4;
padding:12px 0;
}
nav ul li a:hover{
	color:white;
	background-color:#7d4934;
}
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{margin-bottom:50px;
}
nav ul{overflow:hidden;}

/*メインコンテンツ*/
#content{
	width:90%;
	margin:0 auto;
	text-align:center;
}
#content p{
	margin-bottom:24px;
	text-align:left;
}
#content img{
	margin-bottom:24px;
	box-shadow:0 0 12px #000;
}

/*　フッター */
footer{
	color:white;
	text-align:center;
	padding:24px 0;
	background-color:#693;
}

/* ブレークポイント */



/* 768px以上の指定 */
@media screen and(min-width:768px){
	/* ここに768px〜1023pxまでのCSSを記述 */
#content{text-align:left;}

/*  1024px以上の指定*/
@media screen and(min-width:1024px){
	/* ここに1024px以上のCSSを記述*/
	html{font-size:16px;}
}
	
/* グリッドCSS */	
html{
	font-family:verdana, sans-serif;
	font-size:100%;
	line-height:1.5;
	background:url(../img/960_grid_12_col.png) repeat-y top center;
}


/* contentの二段組の作成*/
#content{
	overflow:hidden;
	width:93.75%;} /* 960/1024 */
#content #main,
#content #sidemenu{
	float:left;
	margin:0 1.0416667%;} /*10/960 */
#content #main{width:64.5833333%;}	/* 620/960*/
#content #sidemenu{width:31.25%;} /* 300/960*/

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

/* footerの指定*/
footer{
	width:91.796875%; /*940/1024*/
	padding:24px 0;
	margin:0 auto;
}

レスポンシブデザインが登場した理由

レスポンシブに取り組む際のポイント

プロトタイプとは

ASCIIの「ゼロから始めるレスポンシブWebデザイン入門 」に従ってレスポンシブデザインのWEBを作ってみました。

ASCIIの「ゼロから始めるレスポンシブWebデザイン入門」に従ってレスポンシブデザインのWEBを作ってみました。