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

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

HTML記述例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>トップ|allWeb 豆はカラダにイイ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- .header -->
<header class="header">
    <h1><img src="img/logo.jpg" alt="枝豆隊"></h1>
    <p>豆はカラダにイイ</p>
  <nav class="gnav">
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">枝豆一覧</a></li>
      <li><a href="#">枝豆隊</a></li>
      <li><a href="#">アクセス</a></li>
    </ul>
  </nav><!-- /.gnav -->
</header>
<!-- /.header -->
  
<!-- .container -->
<div class="container">
  <main class="main-content">
  <section class="vitamin">
    <h2>枝豆の栄養素はスゴい</h2>
    <p>枝豆は大豆が未成熟で収穫したものですが、<a href="#">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
  </section>
    
  <section class="recipe">
    <h2>代表的な豆料理</h2>
    <h3>枝豆</h3>
    <img src="img/edamame.jpg" alt="枝豆"><p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
    <h3>ずんだ</h3>
    <img src="img/zunda.jpg" alt="ずんだ"><p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
  </section>
    
  </main>
  <!-- /.main-content -->
  <!-- .sub -->
  <aside class="sub">
  <h2>枝豆隊隊長</h2>
  <img src="img/face.jpg" alt="枝豆隊長"><p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
  </aside><!-- /.sub -->
</div><!-- /.container -->

<!-- .footer -->
<footer class="footer">
  <p><small>&copy;レスポンシブWebデザイン</small></p>
</footer>
<!-- /.footer -->
</body>
</html>

CSS記述例

モバイルファーストで記述

@charset "UTF-8";

/* --------------------------------------
  reset
-------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}


/* --------------------------------------
  body
-------------------------------------- */
body {
  color: #333;
  font-size: 16px;
  font-family: 
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-height: 1.0;
}


/* --------------------------------------
  header
-------------------------------------- */
.header {
  padding: 20px 0;
  text-align: center;
}
  .header h1 {
    margin-bottom: 30px;
  }
  .header p {
    margin-bottom: 30px;
    color: #76430a;
    font-size: 1.2em;
    font-weight: bold;;
  }


/* --------------------------------------
  nav
-------------------------------------- */
.gnav {
  margin-bottom: 0;
  background-color: #7D4934;
}
  .gnav ul {
    display: flex;
    justify-content: center;
  }
  .gnav a {
    display: block;
    padding : 16px;
    color: #fff;
  }
  .gnav a:hover, a.current {
    background-color: #000;
  }


/* --------------------------------------
  layout(common)
-------------------------------------- */
.container {
  width: min(90%, 960px);
  margin: 0 auto 30px;
}


/* --------------------------------------
  main
-------------------------------------- */
h2, h3 {
  margin: 40px 0 30px;
  text-align: center;
}
p {
  font-size: 1.2em;
  line-height: 1.7;
}
.container img {
  margin-bottom: 20px;
  box-shadow: 0 0 8px #333;
}


/* --------------------------------------
  footer
-------------------------------------- */
.footer {
  padding: 20px 0;
  background-color: #8cb229;
  color: #fff;
  text-align: center;
}

メディアクエリでPC用のCSSを記述

モジュールごとにメデイアクエリを追記する

@charset "UTF-8";

/* --------------------------------------
  reset
-------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}


/* --------------------------------------
  body
-------------------------------------- */
body {
  color: #333;
  font-size: 16px;
  font-family: 
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-height: 1.0;
}


/* --------------------------------------
  header
-------------------------------------- */
.header {
  padding: 20px 0;
  text-align: center;
}
  .header h1 {
    margin-bottom: 30px;
  }
  .header p {
    margin-bottom: 30px;
    color: #76430a;
    font-size: 1.2em;
    font-weight: bold;;
  }


/* --------------------------------------
  nav
-------------------------------------- */
.gnav {
  margin-bottom: 0;
  background-color: #7D4934;
}
  .gnav ul {
    display: flex;
    justify-content: center;
  }
  .gnav a {
    display: block;
    padding : 16px;
    color: #fff;
  }
  .gnav a:hover, a.current {
    background-color: #000;
  }

@media screen and (min-width: 768px) {
  .gnav ul {
    gap: 100px;
  }
}


/* --------------------------------------
  layout(common)
-------------------------------------- */
.container {
  width: min(90%, 960px);
  margin: 0 auto 30px;
}

@media screen and (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
  }
}

/* --------------------------------------
  main
-------------------------------------- */
h2, h3 {
  margin: 40px 0 30px;
  text-align: center;
}
p {
  font-size: 1.2em;
  line-height: 1.7;
}
.container img {
  margin-bottom: 20px;
  box-shadow: 0 0 8px #333;
}


/* --------------------------------------
  footer
-------------------------------------- */
.footer {
  padding: 20px 0;
  background-color: #8cb229;
  color: #fff;
  text-align: center;
}