【コーディング実践演習1】Webページ「みんなのパスタレシピ」をコーディングしよう

前の章に戻る次の章に進む

【コーディング実践演習1】Webページ「みんなのパスタレシピ」をコーディングしよう

本演習は、HTML/CSS入門編 9章までの学習を終えた時点で取り組んでいただくものです。

以下のダウンロードリンクから問題データをダウンロードしてファイルを開き、指示に従ってページを作成してください。

問題データダウンロードリンク

pasta_for_everyone.zip

問題データについて
「pasta_for_everyone」フォルダの中には、「start」と「fin」フォルダが入っています。

start：作業前のデータが入っています。
fin：完成データが入っています。

演習を行う際には、「start」フォルダ内のファイルを使用してください。
自分で書いたコードがうまく表示されないときは、「fin」フォルダ内の完成データとの違いを探してみると良いでしょう。

作業の準備

1. 「start」フォルダ内のpasta_for_everyone-start.htmlとcssフォルダ内のreset.cssとstyle.cssをエディターで開きます。
2. ブラウザでプレビューします。

start/pasta_for_everyone-start.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>みんなのパスタレシピ</title>
  </head>

  <body>
    <h1>みんなのパスタレシピ</h1>

    <p>
      このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br>
      ぜひ自分でつくって食べてみてね！
    </p>

    <h2>ペペロンチーノ</h2>
    <img src="images/peperoncino.jpg" alt="">

    <h3>材料</h3>

    <ul>
      <li>にんにく・・・・・1片</li>
      <li>鷹の爪・・・・・1つ</li>
      <li>イタリアンパセリ・・・・・適量</li>
      <li>オリーブオイル・・・・・適量</li>
      <li>パスタ麺・・・・・80g</li>
    </ul>

    <h3>作り方</h3>
    <ol>
      <li>フライパンにオリーブオイルを大さじ2入れる。</li>
      <li>にんにくと鷹の爪を入れて弱火で加熱する。</li>
      <li>同時にパスタを茹ではじめる。</li>
      <li>
        にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。
      </li>
      <li>少し早めに上げたパスタをフライパンに入れる。</li>
      <li>ソースを絡めたら完成。</li>
    </ol>

    <h2>カルボナーラ</h2>
    <img src="images/carbonara.jpg" alt="">

    <h3>材料</h3>

    <ul>
      <li>卵・・・・・1個</li>
      <li>パンチェッタ・・・・・40g</li>
      <li>パルミジャーノ・レッジャーノ・・・・・20g</li>
      <li>生クリーム・・・・・40cc</li>
      <li>黒胡椒・・・・・少々</li>
      <li>オリーブオイル・・・・・適量</li>
      <li>パスタ麺・・・・・80g</li>
    </ul>

    <h3>作り方</h3>
    <ol>
      <li>パスタを茹ではじめる。</li>
      <li>
        生クリームと卵とパルミジャーノ・レッジャーノをボールの中で混ぜてソースを作っておく。
      </li>
      <li>フライパンにパンチェッタとオリーブオイルを入れて中火で炒める。</li>
      <li>
        弱火にしてから茹で上がったパスタをフライパンに入れ、2.のソースも入れる。
      </li>
      <li>パスタとソースを混ぜて和える。</li>
      <li>皿に盛りつけてから黒胡椒をかけて完成。</li>
    </ol>

    <p>Copyright &copy; pasta for everyone All Rights Reserved.</p>
  </body>
</html>

start/pasta_for_everyone-start.html

start/css/reset.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
}

start/css/reset.css

start/css/style.css

@charset "UTF-8";

start/css/style.css

ブラウザプレビュー（作業前）

ブラウザプレビュー（完成）

【STEP1】CSSファイルを関連付けよう

【STEP1】の作業内容
CSSコーディングをスタートするにあたり、CSSフォルダ内に置かれた2種類のCSSファイルを関連付けします。
以下の2ファイルをlinkタグを使ってpasta_for_everyone-start.htmlと関連付けしてください。

ファイル名	用途
reset.css	デフォルトスタイルのリセット
style.css	Webページのスタイリング

【STEP1】のポイント!

reset.cssとstyle.cssをそれぞれ関連付けするとき、linkタグを記述する順番が大事です。

ブラウザプレビュー

※余白やリストのマーカーが消去されたことを確認しましょう。

コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。

【STEP1】の解答

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>みんなのパスタレシピ</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>
・・・以下省略・・・

【STEP1】の解答

【画面収録】CSSファイルを関連付けする

HTML/CSS 演習課題-1

【STEP1】の解説

CSSファイルの関連付けにはlinkタグを使い、href属性で外部CSSファイルの相対パスを指定します。
linkタグはheadタグ内に記述します
reset.cssは他のCSSファイルよりも先に読み込ませる必要があるため、style.cssよりも上で読み込ませます。

【STEP2】背景色を指定しよう

【STEP2】の作業内容
body要素、h1要素、h2要素に背景色を指定してください。
指定するカラーコードは以下のとおりです。

要素名	指定する背景色
body	#ffefcd（薄いベージュ）
h1	#ce2b37（赤）
h2	#009246（緑）

【STEP2】のポイント!

背景色を指定するプロパティは？
要素セレクタを使いましょう！

ブラウザプレビュー

コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。

【STEP2】の解答

start/css/style.css

body {
  background-color: #ffefcd;
}

h1 {
  background-color: #ce2b37;
}

h2 {
  background-color: #009246;
}

【STEP2】の解答

【画面収録】背景色を指定する

HTML/CSS 演習課題-2

【STEP2】の解説

background-colorプロパティを使い、カラーコードを指定します。

【STEP3】divタグでコンテンツをグループ化しよう

【STEP3】の作業内容
コンテンツ全体をdivタグで囲み、class名をつけてください。
そのdiv要素に対してclassセレクタを使い、以下のスタイリングを適用してください。
divタグにつけるclass名はwrapperとしてください

プロパティ	値
幅	1100px
背景色	#ffffff（白）
マージン	中央配置（上下の余白は0）
パディング	上：20px　下：30px　左：50px　右：50px

【STEP3】のポイント!

使用するプロパティ名を覚えましょう！
classセレクタを使いCSSを記述しましょう。
マージンによる中央配置の指定方法は重要です！
マージンとパディングはショートハンドで記述しましょう。

ブラウザプレビュー

コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。

【STEP3】の解答

start/pasta_for_everyone-start.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>みんなのパスタレシピ</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div class="wrapper">
      <h1>みんなのパスタレシピ</h1>

      <p>
        このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br>
        ぜひ自分でつくって食べてみてね！
      </p>

      <h2>ペペロンチーノ</h2>
      <img src="images/peperoncino.jpg" alt="">

      <h3>材料</h3>

      <ul>
        <li>にんにく・・・・・1片</li>
        <li>鷹の爪・・・・・1つ</li>
        <li>イタリアンパセリ・・・・・適量</li>
        <li>オリーブオイル・・・・・適量</li>
        <li>パスタ麺・・・・・80g</li>
      </ul>

      <h3>作り方</h3>
      <ol>
        <li>フライパンにオリーブオイルを大さじ2入れる。</li>
        <li>にんにくと鷹の爪を入れて弱火で加熱する。</li>
        <li>同時にパスタを茹ではじめる。</li>
        <li>
          にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。
        </li>
        <li>少し早めに上げたパスタをフライパンに入れる。</li>
        <li>ソースを絡めたら完成。</li>
      </ol>

      <h2>カルボナーラ</h2>
      <img src="images/carbonara.jpg" alt="">

      <h3>材料</h3>

      <ul>
        <li>卵・・・・・1個</li>
        <li>パンチェッタ・・・・・40g</li>
        <li>パルミジャーノ・レッジャーノ・・・・・20g</li>
        <li>生クリーム・・・・・40cc</li>
        <li>黒胡椒・・・・・少々</li>
        <li>オリーブオイル・・・・・適量</li>
        <li>パスタ麺・・・・・80g</li>
      </ul>

      <h3>作り方</h3>
      <ol>
        <li>パスタを茹ではじめる。</li>
        <li>
          生クリームと卵とパルミジャーノ・レッジャーノをボールの中で混ぜてソースを作っておく。
        </li>
        <li>フライパンにパンチェッタとオリーブオイルを入れて中火で炒める。</li>
        <li>
          弱火にしてから茹で上がったパスタをフライパンに入れ、2.のソースも入れる。
        </li>
        <li>パスタとソースを混ぜて和える。</li>
        <li>皿に盛りつけてから黒胡椒をかけて完成。</li>
      </ol>

      <p>Copyright &copy; pasta for everyone All Rights Reserved.</p>
    </div>
  </body>
</html>

【STEP3】の解答 HTML

start/css/style.css

.wrapper {
  width: 1100px;
  margin: 0 auto;
  padding: 20px 50px 30px;
  background-color: #ffffff;
}

【STEP3】の解答 CSS

【画面収録】divタグでコンテンツをグループ化する

HTML/CSS 演習課題-3

【STEP3】の解説

class名の先頭に「.（ドット）」をつけたものがclassセレクタです。
widthを指定したボックスの右マージンと左マージンの値をautoと指定すると、そのボックスは親要素に対して中央配置になります。
マージンとパディングのショートハンドの記述方法は以下の通りです。
margin : 上下左右 ;
padding : 上左右下 ;

※「HTML/CSS入門編 6章よく使うセレクタを学ぼう」参照
※「HTML/CSS入門編 8章ボックスモデルを学ぼう」参照

【STEP4】見出しのデザインをしよう

【STEP4】の作業内容
h1、h2、h3要素に対して以下のスタイリングを指定してください。

要素名	スタイリング指定
h1	文字サイズ：36px 文字色：白水平方向の行揃え：中央パディング：上下5px　左右0
h2	文字サイズ：26px 文字色：白字下げ：0.5em パディング：上下5px　左右0
h3	文字サイズ：20px 文字色：#111111（濃いグレー）左ボーダー：太さ8px　実線　色#111111（濃いグレー）下ボーダー：太さ1px　点線　色#111111（濃いグレー）字下げ：0.5em マージン：上30px　下15px　左右0

【STEP4】のポイント!

使用するプロパティ名を覚えましょう！
ボーダーのショートハンドの記述方法を確認しましょう！

ブラウザプレビュー

コードの入力が終わりましたら、以下の解答を確認して答え合わせをしましょう。

【STEP4】の解答

start/css/style.css

h1 {
  background-color: #ce2b37;
  font-size: 36px;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
}

h2 {
  background-color: #009246;
  font-size: 26px;
  text-indent: 0.5em;
  color: #ffffff;
  padding: 5px 0;
}

h3 {
  color: #111111;
  font-size: 20px;
  text-indent: 0.5em;
  border-left: 8px solid #111111;
  border-bottom: 1px dotted #111111;
  margin: 30px 0 15px;
}

【STEP4】の解答 CSS

【画面収録】見出しをデザインする

HTML/CSS 演習課題-4

【STEP4】の解説

borderのショートハンドは以下のとおりです。

border : 太さ　種類　色指定 ;

上下左右の個別指定のプロパティは、border-top、border-bottom、border-left、border-rightです。

※「HTML/CSS入門編 8章ボックスモデルを学ぼう」参照

【STEP5】p要素をスタイリングしよう

【STEP5】の作業内容
p要素は以下の2箇所にあります。
それぞれに異なるスタイル設定をしますので、別々のclass名をつけてCSSを書き分けます。
以下に指定したclass名をつけて、それぞれのp要素に以下のスタイリング指定をしてください。

p要素	class名	スタイリング指定
このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！ぜひ自分でつくって食べてみてね！	maintext	文字色：#111111（濃いグレー）文字サイズ：18px 行間：175%（または1.75）マージン：上下20px　左右0
Copyright © pasta for everyone All Rights Reserved.	copyright	文字サイズ：16px 文字色：#343434（濃いグレー）水平方向の行揃え：中央上マージン：60px

【STEP5】のポイント!

使用するプロパティ名を覚えましょう！
同じ種類のタグに異なるCSSを設定する方法を確認しましょう！

ブラウザプレビュー（class名：maintext）

ブラウザプレビュー（class名：copyright）

【STEP5】の解答

start/pasta_for_everyone-start.html

・・・中略・・・
<p class="maintext">
  このページでは、みんなが大好きなパスタ、ペペロンチーノとカルボナーラのレシピをご紹介します！<br>
  ぜひ自分でつくって食べてみてね！
</p>
・・・中略・・・
<p class="copyright">
  Copyright &copy; pasta for everyone All Rights Reserved.
</p>
・・・中略・・・

【STEP5】の解答 HTML

start/css/style.css

.maintext {
  color: #111111;
  font-size: 18px;
  line-height: 1.75;
  margin: 20px 0;
}

.copyright {
  font-size: 16px;
  color: #343434;
  text-align: center;
  margin-top: 60px;
}

【STEP5】の解答 CSS

【画面収録】p要素をスタイリングする

HTML/CSS 演習課題-5

【STEP5】の解説

class名の先頭に「.（ドット）」をつけたものがclassセレクタです。

※「HTML/CSS入門編 6章よく使うセレクタを学ぼう」参照

【STEP6】リストをスタイリングしよう

【STEP6】の作業内容
ul要素とol要素に以下のスタイリング指定をしてください。
コードの重複を避けるため、グループセレクタも使用してください。
※「HTML/CSS入門編 6章よく使うセレクタを学ぼう」参照

要素名	スタイリング指定
ul	リストのマーカーの種類：黒丸文字色：#111111 左マージン：30px 下マージン: 50px 行間：1.75
ol	リストのマーカーの種類：数字文字色：#111111 左マージン：30px 下マージン: 50px 行間：1.75

※リストのマーカーはreset.css中に記述されているlist-style:none;で消去されているため、以下の表を参考にしてlist-style-typeプロパティ（リストのマーカーの種類）で適切な値を設定して表示させてください。

list-style-typeプロパティの値

値	説明
disc	●（黒丸、デフォルト）
circle	○（白抜きの丸）
square	■（黒四角）
decimal	1, 2, 3,...（数字）
decimal-leading-zero	01, 02, 03,...（ゼロ付き数字）
lower-roman	i, ii, iii,...（小文字のローマ数字）
upper-roman	I, II, III,...（大文字のローマ数字）
lower-alpha	a, b, c,...（小文字のアルファベット）
upper-alpha	A, B, C,...（大文字のアルファベット）
none	マーカーなし

【STEP6】のポイント!

グループセレクタの使い方を覚えましょう！
list-style-typeプロパティを覚えましょう！

ブラウザプレビュー

【STEP6】の解答

start/pasta_for_everyone-start.html

・・・中略・・・
<ul>
  <li>にんにく・・・・・1片</li>
  <li>鷹の爪・・・・・1つ</li>
  <li>イタリアンパセリ・・・・・適量</li>
  <li>オリーブオイル・・・・・適量</li>
  <li>パスタ麺・・・・・80g</li>
</ul>

・・・中略・・・
<ol>
  <li>フライパンにオリーブオイルを大さじ2入れる。</li>
  <li>にんにくと鷹の爪を入れて弱火で加熱する。</li>
  <li>同時にパスタを茹ではじめる。</li>
  <li>にんにくの香りが立ってからイタリアンパセリを入れて茹で汁を加える。</li>
  <li>少し早めに上げたパスタをフライパンに入れる。</li>
  <li>ソースを絡めたら完成。</li>
</ol>

・・・中略・・・

【STEP6】の解答 HTML

start/css/style.css

ul,
ol {
  color: #111111;
  margin: 0 0 50px 30px;
  line-height: 1.75;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

【STEP6】の解答 CSS

【画面収録】リストをスタイリングする

HTML/CSS 演習課題-6

【STEP6】の解説

グループセレクタは複数のセレクタを「,（カンマ）」で区切りながら指定します。
コードの重複を減らすことができるメリットがあります。
ul要素とol要素のlist-style-typeの値はそれぞれ異なりますので、個別に要素セレクタで設定します。

※「HTML/CSS入門編 6章よく使うセレクタを学ぼう」参照

これで「HTML/CSS入門編コーディング実践演習1」の解説を終わります。
次の章に進みましょう。

前の章に戻る次の章に進む