【HTML/CSS コーディング解説】入門：レシピサイト（後編）

1. ディレクトリを用意しよう

今回作るサイトのディレクトリ構成は下記の通りです。

  
recipe
 ├─img
 │  ├─favicon.ico
 │  ├─mainvisual.jpg
 │  ├─recipe1.jpg
 │  ├─recipe2.jpg
 │  └─recipe3.jpg
 │
 ├─css
 │  └─style.css
 │
 └─index.html

recipeという名前のフォルダの中に、index.html、cssフォルダ、imgフォルダを作ります。

画像については、下記から練習用の画像をダウンロードできます。

ダウンロードはこちら

準備ができたら、コーディングに入っていきましょう！

2. コーディングをしよう

それでは、さっそくコーディングに入っていきしょう。

コーディングは下記の手順ですすめていきます。

全体のコーディング
1. HTMLをコーディング
2. CSSをコーディング
各パーツのコーディング（メインビジュアル、テキストエリア、画像エリア、ボタンエリア、フッター）
1. HTMLをコーディング
2. CSSをコーディング（レスポンシブも調整）

①：全体のコーディング

まずは全体のコーディングです。
全体の枠組みとhead部分のコーディングを行なっていきます。

HTML

      index.html
      
  <!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>Recipe Diary</title>
      <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" href="img/favicon.ico">
      <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
      <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
      <main>
      </main>

      <footer id="footer">
      </footer>
    </body>
  </html>

metaタグ: title、descriptionは基本必須で設定します。
リセットCSS: 本サイトでは、「ress.min.css」を使用しています。
リセットCSSは色々なものがあるので、自分が使いやすいものを選んだり、案件によって使い分けたりしてください。
body内: mainとfooterの枠だけコーディングしておきます。

CSS

      style.css
      
  @charset "UTF-8";

  html {
    font-size: 100%;
  }
  body {
    color: #2b2a27;
    font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif;
  }
  img {
    max-width: 100%;
  }
  ul {
    list-style: none;
  }
  a {
    color: #2b2a27;
  }

  /*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 834px) {

  }

全体のコーディングができたら、次は各パーツのコーディングにはいっていきましょう！

②：メインビジュアルのコーディング

メインビジュアルのコーディングをしていきます。

HTML

      index.html
      
  <div id="mainvisual">
    <img src="img/mainvisual.jpg" alt="">
  </div>

メインビジュアルは、画像をdivタグで囲むだけです。

続いてCSSをコーディングしていきましょう。

CSS

      style.css
      
  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  #mainvisual img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center top;
    margin-bottom: 80px;
  }

#mainvisual img

「width: 100%;」と「height: 100vh;」で全画面表示にします。「object-fit: cover;」で高さのトリミングを行い「object-position: center top;」で横は中央、縦をトップに配置します。

※object-fitプロパティの使い方については、「object-fitプロパティの使い方について」で詳しく解説しています。

メインビジュアルは以上になります。

続いて、テキストエリアです。

③：テキストエリアのコーディング

テキストエリアのコーディングをしていきます。

HTML

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

divタグ: 全体をdivタグで囲みます。後ほど、CSSで中央寄せやmargin、paddingの設定を行います。
タイトル: サイト全体のタイトルになるので、h1タグで囲みます。

CSS

      style.css
      
  /*-------------------------------------------
  Text
  -------------------------------------------*/
  .text {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 80px;
  }
  .text .site-title {
    margin-bottom: 20px;
  }

.text: 「text-align: center;」でテキストを中央寄せにします。「padding: 0 20px;」で画面幅を狭めた際に両サイドに余白ができるように設定します。

テキストエリアのコーディングは以上になります。

次は、画像エリアです。

④：画像エリアのコーディング

画像エリアのコーディングをしていきます。

HTML

      index.html
      
  <ul class="flex">
    <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>

画像の横並びは、ul、liタグで記述していきます。

CSS

      style.css
      
  //*-------------------------------------------
  Image
  -------------------------------------------*/
  .flex {
    display: flex;
    margin-bottom: 60px;
  }
  .flex li {
    width: calc(100%/3);
  }
  .flex li img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    vertical-align: bottom;
  }

  /*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 834px) {
    /*-------------------------------------------
    Image
    -------------------------------------------*/
    .flex {
      flex-direction: column;
    }
    .flex li {
      width: 100%;
    }
  }

.flex: 「display: flex;」で画像を横並びに配置します。スマホの場合は、「flex-direction: column;」で縦並びにします。
.flex li: 「calc(100%/3);」で、widthの値が3等分になるよう計算します。スマホの場合は、「width: 100%;」で画像を全幅にします。（※「calc」は、割り切れない数で均等に配置したい場合などに便利です。）
.flex li img: 「width」「height」「object-fit: cover;」で、高さを固定したまま画面幅に合わせて画像を伸縮させることができます。　imgタグに「vertical-align: bottom;」を設定して画像の下にできる隙間を消します。

画像エリアのコーディングは以上になります。

次は、ボタンエリアです。

⑤：ボタンエリアのコーディング

ボタンエリアのコーディングをしていきます。

HTML

      index.html
      
  <div class="text">
    <a class="btn" href="#">レシピ一覧を見る</a>
  </div>

全体をdivタグで囲み、中のボタンを中央寄せにします。
ボタンはaタグで記述してリンクにします。

CSS

      style.css
      
  .text .btn {
    display: inline-block;
    border: solid 1px #2b2a27;
    font-size: 0.875rem;
    padding: 18px 60px;
    text-decoration: none;
  }

.text .btn: 「display: inline-block;」でaタグに幅と高さを持たせます。paddingでテキスト上下に余白を入れボタンのサイズを調整します。

以上でボタンエリアのコーディングは終了です。

次は、いよいよ最後のフッターのコーディングになります。

フッターのコーディングをしていきます。

HTML

      index.html
      
  <footer id="footer">
    <ul class="sns">
      <li><a href="#">Instagram</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Facebook</a></li>
    </ul>
    <p>&copy; 2021 Recipe Diary</p>
  </footer>

全体: footerタグで囲みます。
SNSリンク: SNSのリンク集という一つの意味をもったリスト群になるので、ul、liタグで記述します。

CSS

      style.css
      
  /*-------------------------------------------
  Footer
  -------------------------------------------*/
  #footer {
    font-size: 0.75rem;
    padding: 20px;
    text-align: center;
  }
  #footer .sns {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  #footer .sns li {
    margin: 0 10px;
  }