WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

レスポンシブデザイン実践1

今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。
まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。


今回のブレイクポイントは

HTML5の要素を使うので、IE8などに対応させる場合は必要な記述を加えましょう。(2016年1月のIEのサポートポリシー変更に伴いIE8に対応させる必要性をしっかりと考えましょう)
Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft

IE8に対応させる場合
<!--[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>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  menu, main, nav, section { display: block; }
</style>


ascii.jp


画像のダウンロード
http://ascii.jp/elem/000/000/699/699812/index-3.html


作例

PCレイアウト
f:id:yachin29:20160401010640j:plain


タブレットレイアウト
f:id:yachin29:20160401010715j:plain


スマホレイアウト
f:id:yachin29:20160401010740j:plain

テキスト

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

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

枝豆の栄養素はスゴい

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

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

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

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

2004-2012©枝豆隊




index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>枝豆隊長</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1><img src="img/logo.png" alt="枝豆隊ロゴ"></h1>
<p>豆はカラダにイイ</p>
<nav class="menu">
 <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 -->

<div id="wrapper">
<div id="main">
<div id="vitamin">
<h3>枝豆の栄養素はスゴい</h3>
<p>枝豆は大豆が未成熟で収穫したものですが、<a href="#">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
</div>
<div id="reciept">
<h3>代表的な豆料理</h3>
<h4>枝豆</h4>
<img src="img/01.jpg" alt="イラスト 枝豆">
<p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
<h4>ずんだ</h4>
<img src="img/02.jpg" alt="イラスト ずんだ">
<p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</div>
</div><!--/#main-->

<div id="sub">
<h4>枝豆隊隊長</h4>
<img src="img/03.jpg" alt="肖像 枝豆隊長">
<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</div><!--/#sub-->
</div><!--/#contents-->
</div>
<footer>
<p><small>2004-2016&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;
  line-height: 1.0;
  font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
a {
  text-decoration : none;
}
ul {
  list-style : none;
}
img {
  border: none;
  vertical-align: bottom;
}

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


/* Body */
body {
  line-height : 1.5;
}
h1 {
  font-size : 48px;
  margin-bottom: 16px;
}
h2 {
  font-size : 36px;
  margin-bottom: 16px;
}
h3 {
  font-size : 24px;
  margin-bottom: 16px;
}
h4 {
  font-size : 18px;
  margin-bottom: 16px;
}

/*Headerレイアウト*/
header {
  text-align: center;
  padding-top: 16px;
}
/* Nav */
nav {
  margin-bottom : 24px;
  background: #b7715d; 
}
nav ul {
  overflow: hidden;
  width :960px;
  margin : 0 auto;
}
nav ul li {
  width : 25%;
  height: 50px;
  float : left;
  border-right: 1px solid #FFF;
  box-sizing: border-box;
}
nav ul li:first-child {
  border-left: 1px solid #FFF;
}
nav ul li a {
display : block;
color : #D8C2A4;
line-height: 50px;
}
nav ul li a:hover {
color : #FFFFFF;
background-color : #7D4934;
}
#wrapper {
  overflow : hidden;
  width : 960px;
  margin: 0 auto;
}
#main { 
  float : left;
  width : 600px;
  padding: 10px;
}
#sub {
  width : 300px;
  float: right;
} 
#main p, #sub p { 
  margin-bottom : 24px;
}
#main img { 
  margin-bottom : 24px; 
  box-shadow : 0 0 10px #000;
}
#sub img {
  margin-bottom: 24px;
}
/* Footer */
footer {
  padding : 24px 0;
  color : white;
  text-align : center;
  background : #629E3C;
}

/*タブレット用*/ 
@media screen and (max-width : 959px){

}
/*スマホ用*/
@media screen and (max-width : 767px) {

}