読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

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

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


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



ascii.jp


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


f:id:yachin29:20170330160832p:plain
f:id:yachin29:20170330160839j:plain
f:id:yachin29:20170330160844j:plain
f:id:yachin29:20170330160851j:plain


作例

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


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


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

テキスト

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

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

枝豆の栄養素はスゴい

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

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

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

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

2004-2017©枝豆隊


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>レスポンシブデザイン実践1</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<header>
	<h1>枝豆隊</h1>
	<p>豆はカラダにイイ</p>
	<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>

<div id="wrapper">
<div id="main">
<h2>枝豆の栄養素はスゴい</h2>

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

<div class="food">
<h4>枝豆</h4>
<p class="photo"><img src="img/01.jpg" alt="枝豆"></p>

<p class="txt">枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
</div>
<div class="food">
<h4>ずんだ</h4>
<p class="photo"><img src="img/02.jpg" alt="ずんだ"></p>

<p class="txt">ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</div><!--/.food-->
</div><!--/#reciept-->
</div><!--/#main-->

<div id="sidebar">
<h2>枝豆隊隊長</h2>
<p class="photo"><img src="img/03.jpg" alt="枝豆隊長"></p>

<p class="txt">枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</div><!--/#sidebar-->
</div><!--/#wrapper-->

<footer>
<p><small>2004-2017&copy;枝豆隊</small></p>
</footer>
</body>
</html>


style.css

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

/* Reset */
html, body, h1, h2, h3, h4, p, ul, li, small  {
  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;
  max-width:100%;
}

/*PCレイアウト部分*/
header {
  width:100%;
}
h1 {
  width:71px;
  height:72px;
  background:url(img/logo.svg) no-repeat;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  margin:20px auto;
}
header > p {
  text-align:center;
  font-size:36px;
  font-weight:bold;
  margin-bottom:20px;
}
nav {
  width:100%;
  height:50px;
  background: #6C1E00;
}
header ul {
  width:960px;
  height:50px;
  margin:0 auto;
}
header li {
  width:25%;
  float:left;
  border-left:1px solid #FFFFFF;
  box-sizing:border-box;
}
header li:last-child {
  border-right:1px solid #FFFFFF;
}
header li a {
  display:block;
  text-align:center;
  line-height:50px;
  color:#FFFFFF;
}
header li a:hover {
  background:#993333;
}


#wrapper {
  width:960px;
  overflow:hidden;
  margin:0 auto;
}
#main {
  width:600px;
  float:left;
}
#main h2 {
  font-size:32px;
  margin:40px 0 20px;
}
#main > p {
  font-size:18px;
  line-height:1.5;
  margin-bottom:40px;
}
#reciept h3 {
  font-size:28px;
  margin-bottom:20px;
}
.food h4 {
  font-size:24px;
  margin-bottom:10px;
}
.photo {
  margin-bottom:10px;
}
.txt {
  line-height:1.4;
  margin-bottom:40px;
}
#sidebar {
  width:300px;
  float:right;
}
#sidebar h2 {
  font-size:24px;
  margin: 40px 0 20px;
}
footer {
  width:100%;
  height:60px;
  background:#009933;
  text-align:center;
}
footer p {
  font-size:18px;
  line-height:60px;
  color:#FFFFFF;
}

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

header ul {
  width:100%;
}
#wrapper {
  width:100%;
}
#main {
  width:62.5%;/*600px ÷ 960px*/
  padding-left:10px;
  box-sizing:border-box;
}
#sidebar {
  width:31.25%;
  padding-right:10px;
  box-sizing:border-box;
}
header li {
  border-left:1px solid #FFFFFF;
  box-sizing:border-box;
}
header li:last-child {
  border-right: none;
}
header li:first-child {
  border-left:none;
}
}

/*スマホレイアウト*/
@media screen and (max-width:767px) {
#wrapper {
  overflow:visible;/*hiddenをリセット*/
}
nav {
  height:100px;
}
header li {
  width:50%;
  border-left:none;
  box-sizing:border-box;
}
header li:last-child {
  border-right:none;
}
header li:nth-child(odd) {
  border-right:1px solid #FFFFFF;
}
header li:nth-child(-n+2) {
  border-bottom:1px solid #FFFFFF;
}

header li a {
  display:block;
  text-align:center;
  line-height:50px;
  color:#FFFFFF;
}
#main {
  width:100%;
  float:none;
  padding:0 10px;
  text-align:center;
}
#main h2 {
  font-size:26px;
}
#sidebar {
  width:100%;
  float:none;
  text-align:center;
  padding:0 10px;
}
}

作成
http://yachin29.webcrow.jp/edamame/