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

12-24

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

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

PCサイズ　960px以上
タブレットサイズ　641px～959px

スマートフォンサイズ　640px以下

felica29.starfree.jp

ascii.jp

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

テキスト

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

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

枝豆の栄養素はスゴい

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

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>edamame</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header>
<h1><img src="img/logo.svg" alt=""></h1>
<p>豆はカラダにイイ</p>
</header>

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

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

<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>
</div><!-- /.main -->
<div class="sub">
<h2>枝豆隊隊長</h2>
<p class="photo"><img src="img/03.jpg" alt=""></p>
<p class="txt">枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</div><!-- /.sub -->
</div><!-- /.wrapper -->

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

style.css

@charset "utf-8";

:root{
--main-color:#3D931C;
}

html,body,h1,h2,h3,h4,p,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;/* フルードイメージ */
}
h1{
width: 80px;
margin: 30px auto 20px;
}
header>p{
text-align: center;
font-size: 20px;
margin-bottom: 20px;
}
.g-nav{
height: 50px;
background-color: var(--main-color);
}
.g-nav>ul{
display: flex;
max-width: 960px;
margin: 0 auto;
}
.g-nav li{
width: 25%;
}
.g-nav a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;
border-right: 1px solid #FFF;
}
.g-nav li:first-of-type>a{
border-left: 1px solid #FFF;
}
.g-nav a:hover{
background-color:#367259
}

.wrapper{
display: flex;
justify-content: space-between;
max-width: 960px;
margin: 80px auto;
}
.main{
width: calc(70% - 20px);
}
h2{
margin-bottom: 10px;
}
.main-copy{
margin-bottom: 50px;
}
h3{
font-size: 24px;
margin-bottom: 10px;
}
h4{
font-size: 22px;
margin-bottom: 10px;
border-left: 20px solid var(--main-color);
padding-left: 20px;
}
.photo{
margin-bottom: 10px;
}
.food{
margin-bottom: 80px;
}
.sub{
width: calc(30% - 20px);
}
footer{
height: 100px;
background-color: var(--main-color);
}
footer>p{
text-align: center;
line-height: 100px;
color: #FFF;
}

@media (max-width:959px){
.wrapper{
padding: 0 10px;
box-sizing: border-box;
}
}
@media (max-width:640px){
.wrapper{
display: block;
}
.main{
width: 100%;
}
.sub{
width: 100%;
}
}