webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

レスポンシブデザイン実践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-2018©枝豆隊

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

<h3>代表的な豆料理</h3>

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

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

<div class="sub">
<h2>枝豆隊隊長</h2>
<p class="photo"><img src="img/03.jpg" alt=""></p>
<p class="txt">枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</div>
</div>
<footer>
<p><small>2004-2018 &copy; 枝豆隊</small></p>
</footer>
</body>
</html>


スタイルシート

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

html,body,h1,h2,h3,h4,p,ul,li,small {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  vertical-align:bottom;
}

/*PCレイアウト*/
header {
  text-align:center;
}
h1 {
  padding:20px 0;
}

header p {
  font-size:32px;
  font-weight:bold;
  margin-bottom:20px;
}
nav {
  width:100%;
  height:50px;
  background:#093;
}
nav ul {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
nav li {
  width:25%;
  height:50px;
  float:left;
}
nav li a {
  display:block;
  line-height:50px;
  color:#FFF;
  border-left:1px solid #FFF;
}
nav li:last-child a {
  border-right:1px solid #FFF;
}
nav li a:hover {
  background:#3C3;
}
.wrapper {
  width:960px;
  margin: 0 auto;
  overflow:hidden;
  padding-top:40px;
}
.wrapper img {
  max-width:100%;/*フルードイメージ*/
}
.main {
  width:620px;
  float:left;
}
.main h2 {
  font-size:30px;
  margin-bottom:20px;
}
.main p {
  line-height:1.6;
}
.main-txt {
  margin-bottom:20px;
}
.main h3 {
  font-size:24px;
  margin-bottom:16px;
}
.mame h4 {
  font-size:20px;
  margin-bottom:8px;
}
.mame .photo {
  margin-bottom:10px;
}
.mame .txt {
  margin-bottom:40px;
}
.sub {
  width:300px;
  float:right;
}
.sub h2 {
  margin-bottom:10px;
}
.sub .photo {
  margin-bottom:10px;
}
.sub .txt {
  line-height:1.4;
}

footer {
  width:100%;
  height:60px;
  background:#66CC00;
}
footer p {
  text-align:center;
  line-height:60px;
}

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