2014-11-27

レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと
技術的には「Media Queries（メディア・クエリー）」「Fluid Grid（フルード・グリッド）」「Fluid Image（フルード・イメージ）」という3つのテクニックを用いて実現する

フルードグリッド

フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン（Fluid Design）」を合わせたものです
レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更します

フルードイメージ

フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます
イギリスのコンサルティングファームClearleftのリチャード・ルター（Richard Rutter）氏によって提唱されました

メディアクエリー

メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です
レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます

枝豆隊ロゴ
豆はカラダにイイ

    ホーム
    枝豆一覧
    枝豆隊
    アクセス

枝豆の栄養素はスゴい

枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。
代表的な豆料理
枝豆
イラスト　枝豆

枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。
ずんだ
イラスト　ずんだ

ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。
枝豆隊隊長
肖像 枝豆隊長

枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。

2004-2012©枝豆隊

《HTML5新要素を使った場合》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width">
<title>豆はカラダにイイ | 枝豆隊</title>
<linkrel="stylesheet"href="css/style.css">
</head>
<body>

<header>
<h1><imgsrc="img/logo.png"alt="枝豆隊ロゴ"></h1>
<h2>豆はカラダにイイ</h2>

<nav>
 <ul>
   <li><ahref="#">ホーム</a></li>
   <li><ahref="#">枝豆一覧</a></li>
   <li><ahref="#">枝豆隊</a></li>
   <li><ahref="#">アクセス</a></li>
 </ul>
</nav>

</header><!-- /header -->

<divid="contents">
<divid="main">

<sectionid="vitamin">
<h3>枝豆の栄養素はスゴい</h3>
<p>枝豆は大豆が未成熟で収穫したものですが、<ahref="#">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
</section>

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

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

</div><!--/#main-->

<divid="sub">

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

</div><!--/#sub-->

</div><!--/#contents-->

<footer>
<p><small>2004-2012&copy;枝豆隊</small></p>
</footer><!-- /footer -->

</body>
</html>

@charset "utf-8";

/* Reset */
html, body, div, h1, h2, h3, h4, p, ul, li  {
  margin: 0;
  padding: 0
}
a {
  text-decoration : none;
}
ul {
  list-style : none;
}
img {
  border: none;
  vertical-align : top;
}

/* Fluid-img */
img {
  max-width : 100%;
}

/* Body */
body {
  font-family : verdana, sans-serif;
  font-size : 100%;
  line-height : 1.5;
}

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

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

/* Nav */
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;
}
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;
}

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

/* Footer */
footer {
  padding : 24px 0;
  color : white;
  text-align : center;
  background : #629E3C;
}

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

/*1024px*/
@media screen and (min-width : 1024px) {
nav ul {
  width :93.75%;/* 960/1024 */
  margin : 0 auto;
}
#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*/

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

《新要素を使用しない場合》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width">
<title>豆はカラダにイイ | 枝豆隊</title>
<linkrel="stylesheet"href="css/style2.css">
</head>
<body>

<divid="header">
<h1><imgsrc="img/logo.png"alt="枝豆隊ロゴ"></h1>
<h2>豆はカラダにイイ</h2>

<divid="nav">
 <ul>
   <li><ahref="#">ホーム</a></li>
   <li><ahref="#">枝豆一覧</a></li>
   <li><ahref="#">枝豆隊</a></li>
   <li><ahref="#">アクセス</a></li>
 </ul>
</div>

</div><!-- /#header -->

<divid="contents">
<divid="main">

<divid="vitamin">
<h3>枝豆の栄養素はスゴい</h3>
<p>枝豆は大豆が未成熟で収穫したものですが、<ahref="#">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
</div>

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

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

</div><!--/#main-->

<divid="sub">

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

</div><!--/#sub-->

</div><!--/#contents-->

<divid="footer">
<p><small>2004-2012&copy;枝豆隊</small></p>
</div><!-- /#footer -->

</body>
</html>

matsunamima’s diary

2014-11-27

レスポンシブWebデザイン入門

ゼロから始めるレスポンシブWebデザイン入門

レスポンシブWebデザインとは

フルードグリッド

フルードイメージ

メディアクエリー