Web白描

positionを使ったレイアウト

★HTML+CSS実践

positionを使ったレイアウト

※画像：photoAC

簡単！肉じゃがの作り方
煮崩れしにくい肉じゃがレシピです。

完成した肉じゃがの写真

材料
牛肉
じゃがいも
玉ねぎ
にんじん
糸こんにゃく
調味料
水

手順
具材を食べやすい大きさにカットします。
カットした具材を鍋に入れて炒めます。
調味料と水を鍋に入れ、煮込みます。
じゃがいもに味がしみたら完成です。
ポイント：じゃがいもは煮物向きなメークインを使います

材料セットご購入はこちら

レシピのお問い合わせはこちら

HTML記述例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【コーディング練習】positionを使ったレイアウト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">

<!-- .header -->
<header class="header">
  <h1>簡単！肉じゃがの作り方</h1>
  <p>煮崩れしにくい肉じゃがレシピです。</p>
</header>
<!-- /.header -->

<!-- .main-content -->
<main class="main-content">

  <p class="key-visual"><img src="img/01.jpg" alt="完成した肉じゃがの写真"></p>

  <div class="wrapper">

    <section class="block">
    <h2>材料</h2>
    <ul>
      <li>牛肉</li>
      <li>じゃがいも</li>
      <li>玉ねぎ</li>
      <li>にんじん</li>
      <li>糸こんにゃく</li>
      <li>調味料</li>
      <li>水</li>
    </ul>
    </section>

    <section class="block">
    <h2>手順</h2>
    <ol>
      <li>具材を食べやすい大きさにカットします。</li>
      <li>カットした具材を鍋に入れて炒めます。</li>
      <li>調味料と水を鍋に入れ、煮込みます。</li>
      <li>じゃがいもに味がしみたら完成です。</li>
    </ol>
    <p class="point"><strong>ポイント：じゃがいもは煮物向きなメークインを使います</strong></p>
    </section>

  </div><!-- /.wrapper -->

  <p class="btn"><a href="#">材料セットご購入はこちら</a></p>

</main>
<!-- /.main-content -->

<!-- .footer -->
<footer class="footer">
  <p><small>レシピのお問い合わせは<a href="#">こちら</a></small></p>
</footer>
<!-- /.footer -->

</div><!-- /.container -->
</body>
</html>

CSS記述例

@charset "UTF-8";

/* -------------------------------------
  reset
------------------------------------- */
* {
  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 {
  background-color: #f8d8bf;
  color: #333;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 1.0;
}


/* -------------------------------------
  layout
------------------------------------- */
.container {
  margin: 20px;
  padding: 20px;
  background-color: #fff;
}
.wrapper {
  margin-bottom: 40px;
}
@media screen and (min-width: 640px) {
  .container {
    position: relative;
    width: 94%;
    max-width: 800px;
    margin: 20px auto;
  }
  .wrapper {
    display: grid;
    grid-template-columns: 31% 66%;
    gap: 3%;
    padding: 0 30px;
    margin-bottom: 20px;
  }
}


/* -------------------------------------
  header
------------------------------------- */
.header {
  padding: 16px 20px;
  background-color: #ff8833;
  color: #fff;
  text-align: center;
}
  .header > h1 {
    margin-bottom: 10px;
    font-size: 24px;
    letter-spacing: .04em;
  }
@media screen and (min-width: 640px) {
  .header {
    position: absolute;
    top: 40px;
    left: 0;
  }
  .header > h1 {
    font-size: 28px;
  }
}


/* -------------------------------------
  main
------------------------------------- */
.key-visual {
  margin-bottom: 30px;
}
.block {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #999;
}
  .block h2 {
    margin-bottom: 10px;
    color: #ff8833;
  }
  .block ul, .block ol {
    margin-bottom: 10px;
    padding-left: 1.6em;
    font-size: 15px;
  }
  .block ul > li {
    list-style: disc;
  }
  .block ol > li {
    list-style: decimal;
  }
  .block li {
    line-height: 2.0;
  }
.point{
  padding-left: 5em;
  text-indent: -5em;
  color: #ff8833;
  line-height: 1.5;
}


/* -------------------------------------
  Call To Action
------------------------------------- */
.btn {
  margin-bottom: 30px;
  text-align: center;
}
  .btn > a {
    display: inline-block;
    padding: 20px 40px;
    background-color: #ff8833;
    border-radius: 30px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }


/* -------------------------------------
  footer
------------------------------------- */
.footer {
  text-align: center;
}
  .footer a {
    color: #0037ff;
    text-decoration: underline;
  }