Web白描

レスポンシブWebデザイン演習 - Codestep Recipe Diary

★レスポンシブWebデザイン

演習 - Codestep Recipe Diary

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

HTML記述例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【コーディング練習】Recipe Diary</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">

  <div class="key-visual">
    <img src="img/mainvisual.jpg" alt="">
  </div><!-- /.key-visual -->

  <h1>Recipe Diary</h1>
  <p>日々の料理レシピをまとめています。<br>
  和食や洋食、中華、お菓子までいろいろな料理レシピをアップしていますので、<br>
  みなさんの献立にお役立てくださいね！</p>
</header>

<main class="main-content">
  <ul>
    <li><img src="img/recipe1.jpg" alt=""></li>
    <li><img src="img/recipe2.jpg" alt=""></li>
    <li><img src="img/recipe3.jpg" alt=""></li>
  </ul>
  <p class="more"><a href="#">レシピ一覧を見る</a></p>
</main>

<footer class="footer">
  <ul>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Facebook</a></li>
  </ul>
  <p><small>引用元：<a href="https://code-step.com/demo/html/recipe/" target="_blank">CodeStep © 2021 Recipe Diary</a></small></p>
</footer>
</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 {
  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 {
  text-align: center;
}
.key-visual {
  margin-bottom: 80px;
}
  .key-visual > img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center top;
  }
  .header h1 {
    margin-bottom: 30px;
  }
  .header p {
    margin-bottom: 80px;
    padding: 0 20px;
    line-height: 1.7;
  }


/* ------------------------------------
  main
------------------------------------ */
.main-content {
  text-align: center;
}
  .main-content > ul {
    margin-bottom: 60px;
  }
.main-content img {
  height: 500px;
  object-fit: cover;
  object-position: center center;
}
.more a {
  display: inline-block;
  margin-bottom: 100px;
  padding: 20px 60px;
  border: 1px solid #333;
  font-size: 15px;
}
@media screen and (min-width: 768px) {
  .main-content > ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ------------------------------------
  footer
------------------------------------ */
.footer {
  padding-bottom: 30px;
  text-align: center;
}
  .footer > ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 12px;
  }
  .footer a {
    display: block;
    text-decoration: underline;
  }