サイト名称変更のお知らせ

【HTML/CSS コーディング解説】入門:レシピサイト2(後編)

※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

目次

  1. 1. ディレクトリを用意しよう
  2. 2. コーディングをしよう
    1. ①:全体のコーディング
    2. ②:画像+テキストエリアのコーディング
    3. ③:ボタンエリアのコーディング
    4. ④:フッターのコーディング

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

まずは、コーディングするための準備として、作業用のディレクトリとファイルを用意します。

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

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

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

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

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

ダウンロードはこちら

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

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

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

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

  1. 全体のコーディング
    1. HTMLをコーディング
    2. CSSをコーディング
  2. 各パーツのコーディング(画像+テキストエリア、ボタンエリア、フッター)
    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) {

  }
      
    

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

②:画像+テキストエリアのコーディング

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

レシピサイトのPC表示イメージです。

HTML

      index.html
      
  <div class="flex">
    <div class="image">
      <img src="img/recipe.jpg" alt="">
    </div>

    <div class="recipe">
      <h1 class="page-title">ひよこ豆とアボガドのタコス</h1>
      <p>たっぷりのひよこ豆とレンズ豆にアボガドとトマトを添えて、少しライムを絞ったらおいしいタコスのできあがりです。</p>

      <h2 class="content-title">材料(2人分)</h2>
      <dl class="ingredient-list">
        <dt>テキストテキスト</dt>
        <dd>1個</dd>
        <dt>テキストテキスト</dt>
        <dd>1個</dd>
        <dt>テキストテキスト</dt>
        <dd>1個</dd>
        <dt>テキストテキスト</dt>
        <dd>1個</dd>
        <dt>テキストテキスト</dt>
        <dd>1個</dd>
      </dl>

      <h2 class="content-title">作り方</h2>
      <ol class="step-list">
        <li>テキストテキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
        <li>テキストテキストテキストテキスト</li>
      </ol>
    </div>
  </div>
      
    
全体(.flex)
外枠をdivタグで囲み、画像とテキストエリアを横並びに配置します。
画像エリア(.image)
画像をdivタグで囲み、横幅を設定します。
テキストエリア(.recipe)
エリア全体をdivタグで囲みます。材料はタイトルをh2タグ、内容をdl、dt、ddタグで記述します。作り方は、タイトルをh2タグ、作り方の手順をol、liタグで記述します。

CSS

      style.css
      
  /*-------------------------------------------
  Recipe
  -------------------------------------------*/
  .flex {
    display: flex;
    margin-bottom: 60px;
  }
  .flex .image {
    width: 50%;
  }
  .flex .image img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    vertical-align: bottom;
  }
  .flex .recipe {
    width: 50%;
    padding: 40px 5% 0 5%;
  }
  .flex .recipe .page-title {
    font-size: 1.75rem;
    margin-bottom: 20px;
  }
  .flex .recipe .content-title {
    border-bottom: solid 1px #ccc;
    font-size: 1.25rem;
    padding-bottom: 5px;
    margin: 40px 0 15px 0;
  }
  .flex .recipe .ingredient-list {
    display: flex;
    flex-wrap: wrap;
  }
  .flex .recipe .ingredient-list dt {
    width: 85%;
    border-bottom: dotted 1px #ccc;
    padding: 6px 0;
  }
  .flex .recipe .ingredient-list dd {
    width: 15%;
    border-bottom: dotted 1px #ccc;
    padding: 6px 0;
    text-align: right;
  }
  .flex .recipe .step-list li {
    border-bottom: dotted 1px #ccc;
    padding: 6px 0;
    margin-left: 20px;
  }

  /*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 834px) {
    /*-------------------------------------------
    Recipe
    -------------------------------------------*/
    .flex {
      flex-direction: column;
    }
    .flex .image {
      width: 100%;
    }
    .flex .image img {
      height: auto;
    }
    .flex .recipe {
      width: 100%;
    }
  }
      
    
.flex
「display: flex;」で画像とテキストエリアを横並びに配置します。スマホは、「flex-direction: column;」で縦並びにします。
.flex .image
「width: 50%;」で横半分が画像になるように設定します。スマホの場合は、「width: 100%;」で画面幅いっぱいに広がるようにします。
.flex .image img
画像の高さは700pxで固定し、「object-fit: cover;」で高さを固定したまま画面幅にあわせて画像が拡大縮小するようにします。スマホの場合は、「height: auto;」を設定して高さの固定を解除します。
.flex .recipe
「width: 50%;」で横半分がテキストエリアになるように設定します。「padding: 40px 5% 0 5%;」で上と横に余白を設定します。(※横の余白を%で設定することで、画面幅を狭めた際に余白部分も連動して狭まるようにしています。5%という数値はデザインと同じくらいの余白になるよう調整しながら決めます。)
スマホの場合は、「width: 100%;」で画面幅いっぱいに広がるようにします。
.flex .recipe .ingredient-list
 dlタグに「display: flex;」を設定して、dt、ddタグを横並びに配置します。「flex-wrap: wrap;」を設定することでdt、ddタグの横幅が100%になった際に折り返されるようにします。
.flex .recipe .ingredient-list dt
.flex .recipe .ingredient-list dd
 border-bottom に「dotted」を指定して点線を設定します。

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

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

③:ボタンエリアのコーディング

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

HTML

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

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

CSS

      style.css
      
  /*-------------------------------------------
  Button
  -------------------------------------------*/
  .btn {
    text-align: center;
    margin-bottom: 80px;
  }
  .btn a {
    display: inline-block;
    border: solid 1px #2b2a27;
    font-size: 0.875rem;
    padding: 18px 60px;
    text-decoration: none;
  }
      
    
.btn
全体のdivタグに「text-align: center;」を設定して中央寄せにします。
.btn a
「display: inline-block;」でaタグに幅と高さを持たせます。paddingでテキスト上下に余白を入れボタンのサイズを調整します。「text-decoration: none;」でテキストに下線が出ないようにします。

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

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

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

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;
  }
      
    
#footer .sns
「display: flex;」で横並びにし、「justify-content: center;」で中央に配置します。

以上で、コーディングは全て終了です。

お疲れ様でした!

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習

関連記事