20日目(1/4)

HTMLで骨組みを作る

■プレビュー

HTMLで骨組みを作る

P248

■ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>パーソナルトレーニング「Hibino JUNGLE GYM」OPENキャンペーン</title>
</head>
<body>
  <header>
  </header>

  <main>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>
  </main>

  <footer>
    <small>&copy;2019 Hibino JUNGLE GYM.</small>
  </footer>
</body>
</html>

20日目(2/4)

文章を流し込む

■プレビュー

文章を流し込む

P250

■ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>パーソナルトレーニング「Hibino JUNGLE GYM」OPENキャンペーン</title>
</head>
<body>
  <header>
    <h1>カラダが変革するトレーニング環境!</h1>
    <p><a href="#cta">今すぐ申し込む</a></p>

    <p>パーソナルトレーニングジム「Hibino JUNGLE GYM」では、<br>
    あなたにあった<strong>オーダーメイドトレーニングメソッド</strong>により、<br>
    効果的なボディメイキングが可能です!</p>
  </header>

  <main>

  <div>
  <p>
  <strong>完全プライベート空間</strong><br><br>
  完全予約制の個室ですので、人目を気にせず集中してトレーニングができます。<br><br>
  自分に合った効果的なボディメイキングに興味のある方におすすめです。
  </p>
  </div>

  <div>
  <p>
  <strong>お客様の声</strong><br><br>
  とにかくお腹が出ちゃって・・・カウンセリングでBMIを計算してもらったら28とかで、これはマズイと思いましたね。<br><br>
  最初はお腹を凹ませたかっただけなんですが、そのうち楽しくなって体がひと回り大きくなりました。<br><br>
  そのおかげで、まわりからも、若くなったとかカッコイイって言われています!うれしいですね。<br>
  (40代 会社員・男性)<br><br>
  <small>※結果には個人差があり、全ての方が同様の結果になるとは限りません。</small>
  </p>
  </div>

  <div>
  <h2>あなたのBMIはいくつ?</h2>

  <p>今すぐ計算してみましょう。<br>
 『BMI=体重(kg)÷身長(m)×身長(m)』</p>

  <p>BMIが25以上だと、ちょっと肥満気味かもしれません。BMIが18未満の場合は痩せすぎている可能性があります。</p>
  </div>

  <div>
  <h2>サービスと料金</h2>
  <p>
    <strong>■ボディメイキングコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月16回 200,000円(税別)<br>
    内 容:週2回(1回60分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■アドバンスドコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月24回 380,000円(税別)<br>
    内 容:週3回(1回90分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■60日間返金保証</strong><br>
    当ジムでは、トレーナーの指示通り実践して頂いたにも関わらずプログラムに満足されなかった場合、全額返金させて頂きます。<br>
    60日間というプログラムが終わるまでの期間が保証対象となりますので、あなたにリスクはなにもありません。安い金額ではありませんので一歩を踏み出せない方にも、安心して体験いただけます。<br><br>
  あなたが体を鍛えたいとお考えでしたら、一人ひとりに最適なトレーニングを行う Hibino JUNGLE GYM にお越しください。プロのトレーナーがフルオーダーメイドのメニューを作成しトレーニングを行うため、ご自身のトレーニング方法に悩むことはありません。安全安心して取り組んでいただけます。<br><br>
  また、お仕事前や帰り、お友達とのお出掛け前や帰り等にも気兼ねなくご利用いただくため、トレーニングウェアやミネラルウォーター、シューズ、タオル等の<strong>無料レンタル</strong>を行っています。<br><br>
  ぜひ Hibino JUNGLE GYM までお問い合わせください。
  </p>
  </div>

  <div>
    <p id="cta">
      <a target="_blank" href="https://www.google.co.jp">
      >お申し込みはこちら</a>
    </p>
  </div>
  </main>

  <footer>
    <small>&copy;2019 Hibino JUNGLE GYM.</small>
  </footer>
</body>
</html>

20日目(3/4)

画像やイラストをはめ込む

■プレビュー

画像やイラストをはめ込む

P252

■ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>パーソナルトレーニング「Hibino JUNGLE GYM」OPENキャンペーン</title>
</head>
<body>
  <header>
    <h1>カラダが変革するトレーニング環境!</h1>
    <figure>
      <img src="img/6-01-top.png" alt="パーソナルトレーニングOPEN">
      <figcaption>デキル男は鍛えてる!</figcaption>
    </figure>
    <p><a href="#cta">今すぐ申し込む</a></p>

    <p>パーソナルトレーニングジム「Hibino JUNGLE GYM」では、<br>
    あなたにあった<strong>オーダーメイドトレーニングメソッド</strong>により、<br>
    効果的なボディメイキングが可能です!</p>
  </header>

  <main>

  <div>
  <figure class="left">
    <img src="img/6-02-ps.png" alt="プライベート空間でも最強のマシンを導入">
    <figcaption>プライベート空間でも最強のマシンを導入</figcaption>
  </figure>
  <p>
  <strong>完全プライベート空間</strong><br><br>
  完全予約制の個室ですので、人目を気にせず集中してトレーニングができます。<br><br>
  自分に合った効果的なボディメイキングに興味のある方におすすめです。
  </p>
  </div>

  <p></p>

  <div>
  <figure class="right">
    <img src="img/6-03-cv.png" alt="お客様の声">
  </figure>
  <p>
  <strong>お客様の声</strong><br><br>
  とにかくお腹が出ちゃって・・・カウンセリングでBMIを計算してもらったら28とかで、これはマズイと思いましたね。<br><br>
  最初はお腹を凹ませたかっただけなんですが、そのうち楽しくなって体がひと回り大きくなりました。<br><br>
  そのおかげで、まわりからも、若くなったとかカッコイイって言われています!うれしいですね。<br>
  (40代 会社員・男性)<br><br>
  <small>※結果には個人差があり、全ての方が同様の結果になるとは限りません。</small>
  </p>
  </div>

  <div>
  <h2>あなたのBMIはいくつ?</h2>

  <p>今すぐ計算してみましょう。<br>
 『BMI=体重(kg)÷身長(m)×身長(m)』</p>

  <p>BMIが25以上だと、ちょっと肥満気味かもしれません。BMIが18未満の場合は痩せすぎている可能性があります。</p>
  </div>

  <div>
  <h2>サービスと料金</h2>
  <figure class="centering">
    <img src="img/6-04-sv.png" alt="サービスと料金">
  </figure>
  <p>
    <strong>■ボディメイキングコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月16回 200,000円(税別)<br>
    内 容:週2回(1回60分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■アドバンスドコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月24回 380,000円(税別)<br>
    内 容:週3回(1回90分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■60日間返金保証</strong><br>
    当ジムでは、トレーナーの指示通り実践して頂いたにも関わらずプログラムに満足されなかった場合、全額返金させて頂きます。<br>
    60日間というプログラムが終わるまでの期間が保証対象となりますので、あなたにリスクはなにもありません。安い金額ではありませんので一歩を踏み出せない方にも、安心して体験いただけます。<br><br>
  あなたが体を鍛えたいとお考えでしたら、一人ひとりに最適なトレーニングを行う Hibino JUNGLE GYM にお越しください。プロのトレーナーがフルオーダーメイドのメニューを作成しトレーニングを行うため、ご自身のトレーニング方法に悩むことはありません。安全安心して取り組んでいただけます。<br><br>
  また、お仕事前や帰り、お友達とのお出掛け前や帰り等にも気兼ねなくご利用いただくため、トレーニングウェアやミネラルウォーター、シューズ、タオル等の<strong>無料レンタル</strong>を行っています。<br><br>
  ぜひ Hibino JUNGLE GYM までお問い合わせください。
  </p>
  </div>

  <div>
    <p id="cta">
      <a target="_blank" href="https://www.google.co.jp">
      >お申し込みはこちら</a>
    </p>
  </div>
  </main>

  <footer>
    <small>&copy;2019 Hibino JUNGLE GYM.</small>
  </footer>
</body>
</html>

20日目(4/4)

CSSでデザインを調整する

■プレビュー

CSSでデザインを調整する

P254

■ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>パーソナルトレーニング「Hibino JUNGLE GYM」OPENキャンペーン</title>
  <style>
    body {
      font-family: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
      max-width: 1000px;
    }

    img {
      max-width: 100%;
    }

    h1 {
      color: black; font-weight: bold; font-size: 36px;
      background-color; white;
    }

    h2 {
      color: black; font-weight: bold; font-size: 24px;
      background-color; white;
    }

    figcaption {
      font-size: 12px;
    }

    .red-reverse {
      color: white; background-color: red;
    }

    .yellow-futo {
      background:linear-gradient(transparent 65%, yellow 65%);
    }

    .cv-contents {
      max-width: 900px;
      border: 1px dashed gray; /* 1px幅の点線をグレー色で囲む */
      border-radius: 10px; /* 角を丸くする */
      line-height: 36px;
      
      text-align: left;
    }

    .cv-contents figure.left {
      float: left;
    }

    .cv-contents figure.right {
      float: right;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    a:hover {
      background-color: darkblue;
      color: white;
    }

    a:active {
      background-color: skyblue;
      color: white;
    }

    a {
      background-color: blue; color: white; font-size: 20px;
      text-align: center; border-radius: 5px;
      text-decoration: none; max-width: 300px;
      display:block;
      animation: prunprun 2.2s ease-in infinite;
      -webkit-animation: prunprun 2.2s ease-in infinite;
      -moz-animation: prunprun 2.2s ease-in infinite;
      -o-animation: prunprun 2.2s ease-in infinite;
      -ms-animation: prunprun 2.2s ease-in infinite;
    }

@keyframes prunprun {
48%, 62% {transform: scale(1.0, 1.0);}
50% {transform: scale(1.1, 0.9);}
56% {transform: scale(0.9, 1.1) translate(0, -5px);}
59% {transform: scale(1.0, 1.0) translate(0, -3px);}
}

@-webkit-keyframes prunprun{
48%, 62% {-webkit-transform: scale(1.0, 1.0);}
50% {-webkit-transform: scale(1.1, 0.9);}
56% {-webkit-transform: scale(0.9, 1.1) translate(0, -5px);}
59% {-webkit-transform: scale(1.0, 1.0) translate(0, -3px);}
}

  </style>

</head>
<body>
  <header>
    <h1>カラダが変革するトレーニング環境!</h1>
    <figure>
      <img src="img/6-01-top.png" alt="パーソナルトレーニングOPEN">
      <figcaption>デキル男は鍛えてる!</figcaption>
    </figure>
    <p><a href="#cta">今すぐ申し込む</a></p>

    <p>パーソナルトレーニングジム「Hibino JUNGLE GYM」では、<br>
    あなたにあった<strong><span class="yellow-futo">オーダーメイドトレーニングメソッド</span></strong>により、<br>
    効果的なボディメイキングが可能です!</p>
  </header>

  <main>

  <div class="cv-contents">
  <figure class="left">
    <img src="img/6-02-ps.png" alt="プライベート空間でも最強のマシンを導入">
    <figcaption>プライベート空間でも最強のマシンを導入</figcaption>
  </figure>
  <p class="clearfix">
  <strong><span class="red-reverse">完全プライベート空間</span></strong><br><br>
  完全予約制の個室ですので、人目を気にせず集中してトレーニングができます。<br><br>
  自分に合った効果的なボディメイキングに興味のある方におすすめです。
  </p>
  </div>

  <p></p>

  <div class="cv-contents">
  <figure class="right">
    <img src="img/6-03-cv.png" alt="お客様の声">
  </figure>
  <p class="clearfix">
  <strong><span class="red-reverse">お客様の声</span></strong><br><br>
  とにかくお腹が出ちゃって・・・カウンセリングでBMIを計算してもらったら28とかで、これはマズイと思いましたね。<br><br>
  最初はお腹を凹ませたかっただけなんですが、そのうち楽しくなって体がひと回り大きくなりました。<br><br>
  そのおかげで、まわりからも、若くなったとかカッコイイって言われています!うれしいですね。<br>
  (40代 会社員・男性)<br><br>
  <small>※結果には個人差があり、全ての方が同様の結果になるとは限りません。</small>
  </p>
  </div>

  <div>
  <h2>あなたのBMIはいくつ?</h2>

  <p>今すぐ計算してみましょう。<br>
 『BMI=体重(kg)÷身長(m)×身長(m)』</p>

  <p>BMIが25以上だと、ちょっと肥満気味かもしれません。BMIが18未満の場合は痩せすぎている可能性があります。</p>

  </div>

  <div>
  <h2>サービスと料金</h2>
  <figure>
    <img src="img/6-04-sv.png" alt="サービスと料金">
  </figure>
  <p>
    <strong>■ボディメイキングコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月16回 200,000円(税別)<br>
    内 容:週2回(1回60分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■アドバンスドコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月24回 380,000円(税別)<br>
    内 容:週3回(1回90分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■60日間返金保証</strong><br>
    当ジムでは、トレーナーの指示通り実践して頂いたにも関わらずプログラムに満足されなかった場合、全額返金させて頂きます。<br>
    60日間というプログラムが終わるまでの期間が保証対象となりますので、あなたにリスクはなにもありません。安い金額ではありませんので一歩を踏み出せない方にも、安心して体験いただけます。<br><br>
  あなたが体を鍛えたいとお考えでしたら、一人ひとりに最適なトレーニングを行う Hibino JUNGLE GYM にお越しください。プロのトレーナーがフルオーダーメイドのメニューを作成しトレーニングを行うため、ご自身のトレーニング方法に悩むことはありません。安全安心して取り組んでいただけます。<br><br>
  また、お仕事前や帰り、お友達とのお出掛け前や帰り等にも気兼ねなくご利用いただくため、トレーニングウェアやミネラルウォーター、シューズ、タオル等の<strong><span class="yellow-futo">無料レンタル</span></strong>を行っています。<br><br>
  ぜひ Hibino JUNGLE GYM までお問い合わせください。</p>
  </div>

  <div>
    <p id="cta">
      <a target="_blank" href="https://www.google.co.jp">
      >お申し込みはこちら</a>
    </p>
  </div>
  </main>

  <footer>
    <small>&copy;2019 Hibino JUNGLE GYM.</small>
  </footer>
</body>
</html>

21日目(1/5)

JavaScriptでBMIを計算する

■プレビュー

JavaScriptでBMIを計算する

P256

■ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>パーソナルトレーニング「Hibino JUNGLE GYM」OPENキャンペーン</title>
  <style>
    body {
      font-family: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
      max-width: 1000px;
    }

    img {
      max-width: 100%;
    }

    h1 {
      color: black; font-weight: bold; font-size: 36px;
      background-color; white;
    }

    h2 {
      color: black; font-weight: bold; font-size: 24px;
      background-color; white;
    }

    figcaption {
      font-size: 12px;
    }

    .red-reverse {
      color: white; background-color: red;
    }

    .yellow-futo {
      background:linear-gradient(transparent 65%, yellow 65%);
    }

    .cv-contents {
      max-width: 900px;
      border: 1px dashed gray; /* 1px幅の点線をグレー色で囲む */
      border-radius: 10px; /* 角を丸くする */
      line-height: 36px;
      
      text-align: left;
    }

    .cv-contents figure.left {
      float: left;
    }

    .cv-contents figure.right {
      float: right;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    a:hover {
      background-color: darkblue;
      color: white;
    }

    a:active {
      background-color: skyblue;
      color: white;
    }

    a {
      background-color: blue; color: white; font-size: 20px;
      text-align: center; border-radius: 5px;
      text-decoration: none; max-width: 300px;
      display:block;
      animation: prunprun 2.2s ease-in infinite;
      -webkit-animation: prunprun 2.2s ease-in infinite;
      -moz-animation: prunprun 2.2s ease-in infinite;
      -o-animation: prunprun 2.2s ease-in infinite;
      -ms-animation: prunprun 2.2s ease-in infinite;
    }

@keyframes prunprun {
48%, 62% {transform: scale(1.0, 1.0);}
50% {transform: scale(1.1, 0.9);}
56% {transform: scale(0.9, 1.1) translate(0, -5px);}
59% {transform: scale(1.0, 1.0) translate(0, -3px);}
}

@-webkit-keyframes prunprun{
48%, 62% {-webkit-transform: scale(1.0, 1.0);}
50% {-webkit-transform: scale(1.1, 0.9);}
56% {-webkit-transform: scale(0.9, 1.1) translate(0, -5px);}
59% {-webkit-transform: scale(1.0, 1.0) translate(0, -3px);}
}

  </style>

  <script>
    function fncBMI() {
      var bmi; //BMI
      var w; //体重
      var h; //身長
      
      w = eval(document.bmi.bmiWeight.value);
      h = eval(document.bmi.bmiHeight.value) / 100; //メートルに変換
      
      bmi = w / (h * h);

      document.bmi.bmiAns.value = bmi;
    }
  </script>
</head>
<body>
  <header>
    <h1>カラダが変革するトレーニング環境!</h1>
    <figure>
      <img src="img/6-01-top.png" alt="パーソナルトレーニングOPEN">
      <figcaption>デキル男は鍛えてる!</figcaption>
    </figure>
    <p><a href="#cta">今すぐ申し込む</a></p>

    <p>パーソナルトレーニングジム「Hibino JUNGLE GYM」では、<br>
    あなたにあった<strong><span class="yellow-futo">オーダーメイドトレーニングメソッド</span></strong>により、<br>
    効果的なボディメイキングが可能です!</p>
  </header>

  <main>

  <div class="cv-contents">
  <figure class="left">
    <img src="img/6-02-ps.png" alt="プライベート空間でも最強のマシンを導入">
    <figcaption>プライベート空間でも最強のマシンを導入</figcaption>
  </figure>
  <p class="clearfix">
  <strong><span class="red-reverse">完全プライベート空間</span></strong><br><br>
  完全予約制の個室ですので、人目を気にせず集中してトレーニングができます。<br><br>
  自分に合った効果的なボディメイキングに興味のある方におすすめです。
  </p>
  </div>

  <p></p>

  <div class="cv-contents">
  <figure class="right">
    <img src="img/6-03-cv.png" alt="お客様の声">
  </figure>
  <p class="clearfix">
  <strong><span class="red-reverse">お客様の声</span></strong><br><br>
  とにかくお腹が出ちゃって・・・カウンセリングでBMIを計算してもらったら28とかで、これはマズイと思いましたね。<br><br>
  最初はお腹を凹ませたかっただけなんですが、そのうち楽しくなって体がひと回り大きくなりました。<br><br>
  そのおかげで、まわりからも、若くなったとかカッコイイって言われています!うれしいですね。<br>
  (40代 会社員・男性)<br><br>
  <small>※結果には個人差があり、全ての方が同様の結果になるとは限りません。</small>
  </p>
  </div>

  <div>
  <h2>あなたのBMIはいくつ?</h2>

  <form name="bmi">
    <p>今すぐ計算してみましょう。<br>
   『BMI=体重(kg)÷身長(m)×身長(m)』</p>

    体重:<input type="text" name="bmiWeight">kg<br>
    身長:<input type="text" name="bmiHeight">cm
    <input type="button" value="BMIを計算" onclick="fncBMI()"><br>
    結果:<input type="text" name="bmiAns">

    <p>BMIが25以上だと、ちょっと肥満気味かもしれません。BMIが18未満の場合は痩せすぎている可能性があります。</p>
  </form>

  </div>

  <div>
  <h2>サービスと料金</h2>
  <figure>
    <img src="img/6-04-sv.png" alt="サービスと料金">
  </figure>
  <p>
    <strong>■ボディメイキングコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月16回 200,000円(税別)<br>
    内 容:週2回(1回60分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■アドバンスドコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月24回 380,000円(税別)<br>
    内 容:週3回(1回90分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■60日間返金保証</strong><br>
    当ジムでは、トレーナーの指示通り実践して頂いたにも関わらずプログラムに満足されなかった場合、全額返金させて頂きます。<br>
    60日間というプログラムが終わるまでの期間が保証対象となりますので、あなたにリスクはなにもありません。安い金額ではありませんので一歩を踏み出せない方にも、安心して体験いただけます。<br><br>
  あなたが体を鍛えたいとお考えでしたら、一人ひとりに最適なトレーニングを行う Hibino JUNGLE GYM にお越しください。プロのトレーナーがフルオーダーメイドのメニューを作成しトレーニングを行うため、ご自身のトレーニング方法に悩むことはありません。安全安心して取り組んでいただけます。<br><br>
  また、お仕事前や帰り、お友達とのお出掛け前や帰り等にも気兼ねなくご利用いただくため、トレーニングウェアやミネラルウォーター、シューズ、タオル等の<strong><span class="yellow-futo">無料レンタル</span></strong>を行っています。<br><br>
  ぜひ Hibino JUNGLE GYM までお問い合わせください。</p>
  </div>

  <div>
    <p id="cta">
      <a target="_blank" href="https://www.google.co.jp">
      >お申し込みはこちら</a>
    </p>
  </div>
  </main>

  <footer>
    <small>&copy;2019 Hibino JUNGLE GYM.</small>
  </footer>
</body>
</html>

21日目(2/5)

Googleアナリティクスで解析する

■プレビュー

Googleアナリティクスで解析する

P258(プレビューに変化ありません)

■ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X');
</script>
  <meta charset="UTF-8">
  <title>パーソナルトレーニング「Hibino JUNGLE GYM」OPENキャンペーン</title>
  <style>
    body {
      font-family: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
      max-width: 1000px;
    }

    img {
      max-width: 100%;
    }

    h1 {
      color: black; font-weight: bold; font-size: 36px;
      background-color; white;
    }

    h2 {
      color: black; font-weight: bold; font-size: 24px;
      background-color; white;
    }

    figcaption {
      font-size: 12px;
    }

    .red-reverse {
      color: white; background-color: red;
    }

    .yellow-futo {
      background:linear-gradient(transparent 65%, yellow 65%);
    }

    .cv-contents {
      max-width: 900px;
      border: 1px dashed gray; /* 1px幅の点線をグレー色で囲む */
      border-radius: 10px; /* 角を丸くする */
      line-height: 36px;
      
      text-align: left;
    }

    .cv-contents figure.left {
      float: left;
    }

    .cv-contents figure.right {
      float: right;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    a:hover {
      background-color: darkblue;
      color: white;
    }

    a:active {
      background-color: skyblue;
      color: white;
    }

    a {
      background-color: blue; color: white; font-size: 20px;
      text-align: center; border-radius: 5px;
      text-decoration: none; max-width: 300px;
      display:block;
      animation: prunprun 2.2s ease-in infinite;
      -webkit-animation: prunprun 2.2s ease-in infinite;
      -moz-animation: prunprun 2.2s ease-in infinite;
      -o-animation: prunprun 2.2s ease-in infinite;
      -ms-animation: prunprun 2.2s ease-in infinite;
    }

@keyframes prunprun {
48%, 62% {transform: scale(1.0, 1.0);}
50% {transform: scale(1.1, 0.9);}
56% {transform: scale(0.9, 1.1) translate(0, -5px);}
59% {transform: scale(1.0, 1.0) translate(0, -3px);}
}

@-webkit-keyframes prunprun{
48%, 62% {-webkit-transform: scale(1.0, 1.0);}
50% {-webkit-transform: scale(1.1, 0.9);}
56% {-webkit-transform: scale(0.9, 1.1) translate(0, -5px);}
59% {-webkit-transform: scale(1.0, 1.0) translate(0, -3px);}
}

  </style>

  <script>
    function fncBMI() {
      var bmi; //BMI
      var w; //体重
      var h; //身長
      
      w = eval(document.bmi.bmiWeight.value);
      h = eval(document.bmi.bmiHeight.value) / 100; //メートルに変換
      
      bmi = w / (h * h);

      document.bmi.bmiAns.value = bmi;
    }
  </script>
</head>
<body>
  <header>
    <h1>カラダが変革するトレーニング環境!</h1>
    <figure>
      <img src="img/6-01-top.png" alt="パーソナルトレーニングOPEN">
      <figcaption>デキル男は鍛えてる!</figcaption>
    </figure>
    <p><a href="#cta">今すぐ申し込む</a></p>

    <p>パーソナルトレーニングジム「Hibino JUNGLE GYM」では、<br>
    あなたにあった<strong><span class="yellow-futo">オーダーメイドトレーニングメソッド</span></strong>により、<br>
    効果的なボディメイキングが可能です!</p>
  </header>

  <main>

  <div class="cv-contents">
  <figure class="left">
    <img src="img/6-02-ps.png" alt="プライベート空間でも最強のマシンを導入">
    <figcaption>プライベート空間でも最強のマシンを導入</figcaption>
  </figure>
  <p class="clearfix">
  <strong><span class="red-reverse">完全プライベート空間</span></strong><br><br>
  完全予約制の個室ですので、人目を気にせず集中してトレーニングができます。<br><br>
  自分に合った効果的なボディメイキングに興味のある方におすすめです。
  </p>
  </div>

  <p></p>

  <div class="cv-contents">
  <figure class="right">
    <img src="img/6-03-cv.png" alt="お客様の声">
  </figure>
  <p class="clearfix">
  <strong><span class="red-reverse">お客様の声</span></strong><br><br>
  とにかくお腹が出ちゃって・・・カウンセリングでBMIを計算してもらったら28とかで、これはマズイと思いましたね。<br><br>
  最初はお腹を凹ませたかっただけなんですが、そのうち楽しくなって体がひと回り大きくなりました。<br><br>
  そのおかげで、まわりからも、若くなったとかカッコイイって言われています!うれしいですね。<br>
  (40代 会社員・男性)<br><br>
  <small>※結果には個人差があり、全ての方が同様の結果になるとは限りません。</small>
  </p>
  </div>

  <div>
  <h2>あなたのBMIはいくつ?</h2>

  <form name="bmi">
    <p>今すぐ計算してみましょう。<br>
   『BMI=体重(kg)÷身長(m)×身長(m)』</p>

    体重:<input type="text" name="bmiWeight">kg<br>
    身長:<input type="text" name="bmiHeight">cm
    <input type="button" value="BMIを計算" onclick="fncBMI()"><br>
    結果:<input type="text" name="bmiAns">

    <p>BMIが25以上だと、ちょっと肥満気味かもしれません。BMIが18未満の場合は痩せすぎている可能性があります。</p>
  </form>

  </div>

  <div>
  <h2>サービスと料金</h2>
  <figure>
    <img src="img/6-04-sv.png" alt="サービスと料金">
  </figure>
  <p>
    <strong>■ボディメイキングコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月16回 200,000円(税別)<br>
    内 容:週2回(1回60分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■アドバンスドコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月24回 380,000円(税別)<br>
    内 容:週3回(1回90分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■60日間返金保証</strong><br>
    当ジムでは、トレーナーの指示通り実践して頂いたにも関わらずプログラムに満足されなかった場合、全額返金させて頂きます。<br>
    60日間というプログラムが終わるまでの期間が保証対象となりますので、あなたにリスクはなにもありません。安い金額ではありませんので一歩を踏み出せない方にも、安心して体験いただけます。<br><br>
  あなたが体を鍛えたいとお考えでしたら、一人ひとりに最適なトレーニングを行う Hibino JUNGLE GYM にお越しください。プロのトレーナーがフルオーダーメイドのメニューを作成しトレーニングを行うため、ご自身のトレーニング方法に悩むことはありません。安全安心して取り組んでいただけます。<br><br>
  また、お仕事前や帰り、お友達とのお出掛け前や帰り等にも気兼ねなくご利用いただくため、トレーニングウェアやミネラルウォーター、シューズ、タオル等の<strong><span class="yellow-futo">無料レンタル</span></strong>を行っています。<br><br>
  ぜひ Hibino JUNGLE GYM までお問い合わせください。</p>
  </div>

  <div>
    <p id="cta">
      <a target="_blank" href="https://www.google.co.jp">
      >お申し込みはこちら</a>
    </p>
  </div>
  </main>

  <footer>
    <small>&copy;2019 Hibino JUNGLE GYM.</small>
  </footer>
</body>
</html>

21日目(4/5)

スマホに対応する

■プレビュー

スマホ対応する

P262(スマホ表示)

■ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X');
</script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>パーソナルトレーニング「Hibino JUNGLE GYM」OPENキャンペーン</title>
  <style>
    body {
      font-family: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
      max-width: 1000px;
    }

    img {
      max-width: 100%;
    }

    h1 {
      color: black; font-weight: bold; font-size: 36px;
      background-color; white;
    }

    h2 {
      color: black; font-weight: bold; font-size: 24px;
      background-color; white;
    }

    figcaption {
      font-size: 12px;
    }

    .red-reverse {
      color: white; background-color: red;
    }

    .yellow-futo {
      background:linear-gradient(transparent 65%, yellow 65%);
    }

    .cv-contents {
      max-width: 900px;
      border: 1px dashed gray; /* 1px幅の点線をグレー色で囲む */
      border-radius: 10px; /* 角を丸くする */
      line-height: 36px;
      
      text-align: left;
    }

    .cv-contents figure.left {
      float: left;
    }

    .cv-contents figure.right {
      float: right;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    a:hover {
      background-color: darkblue;
      color: white;
    }

    a:active {
      background-color: skyblue;
      color: white;
    }

    a {
      background-color: blue; color: white; font-size: 20px;
      text-align: center; border-radius: 5px;
      text-decoration: none; max-width: 300px;
      display:block;
      animation: prunprun 2.2s ease-in infinite;
      -webkit-animation: prunprun 2.2s ease-in infinite;
      -moz-animation: prunprun 2.2s ease-in infinite;
      -o-animation: prunprun 2.2s ease-in infinite;
      -ms-animation: prunprun 2.2s ease-in infinite;
    }

@keyframes prunprun {
48%, 62% {transform: scale(1.0, 1.0);}
50% {transform: scale(1.1, 0.9);}
56% {transform: scale(0.9, 1.1) translate(0, -5px);}
59% {transform: scale(1.0, 1.0) translate(0, -3px);}
}

@-webkit-keyframes prunprun{
48%, 62% {-webkit-transform: scale(1.0, 1.0);}
50% {-webkit-transform: scale(1.1, 0.9);}
56% {-webkit-transform: scale(0.9, 1.1) translate(0, -5px);}
59% {-webkit-transform: scale(1.0, 1.0) translate(0, -3px);}
}

@media screen and (max-width:600px) {

  body {
    font-size: 1.6vw;
  }

  h1 {
    font-size: 3.6vw;
  }

  h2 {
    font-size: 2.4vw;
  }

  figcaption {
    font-size: 1.2vw;
  }

  .cv-contents figure.left {
    float: none;
  }

  .cv-contents figure.right {
    float: none;
  }

  a {
    font-size: 5.0vw;
  }

}

  </style>

  <script>
    function fncBMI() {
      var bmi; //BMI
      var w; //体重
      var h; //身長
      
      w = eval(document.bmi.bmiWeight.value);
      h = eval(document.bmi.bmiHeight.value) / 100; //メートルに変換
      
      bmi = w / (h * h);

      document.bmi.bmiAns.value = bmi;
    }
  </script>
</head>
<body>
  <header>
    <h1>カラダが変革するトレーニング環境!</h1>
    <figure>
      <img src="img/6-01-top.png" alt="パーソナルトレーニングOPEN">
      <figcaption>デキル男は鍛えてる!</figcaption>
    </figure>
    <p><a href="#cta">今すぐ申し込む</a></p>

    <p>パーソナルトレーニングジム「Hibino JUNGLE GYM」では、<br>
    あなたにあった<strong><span class="yellow-futo">オーダーメイドトレーニングメソッド</span></strong>により、<br>
    効果的なボディメイキングが可能です!</p>
  </header>

  <main>

  <div class="cv-contents">
  <figure class="left">
    <img src="img/6-02-ps.png" alt="プライベート空間でも最強のマシンを導入">
    <figcaption>プライベート空間でも最強のマシンを導入</figcaption>
  </figure>
  <p class="clearfix">
  <strong><span class="red-reverse">完全プライベート空間</span></strong><br><br>
  完全予約制の個室ですので、人目を気にせず集中してトレーニングができます。<br><br>
  自分に合った効果的なボディメイキングに興味のある方におすすめです。
  </p>
  </div>

  <p></p>

  <div class="cv-contents">
  <figure class="right">
    <img src="img/6-03-cv.png" alt="お客様の声">
  </figure>
  <p class="clearfix">
  <strong><span class="red-reverse">お客様の声</span></strong><br><br>
  とにかくお腹が出ちゃって・・・カウンセリングでBMIを計算してもらったら28とかで、これはマズイと思いましたね。<br><br>
  最初はお腹を凹ませたかっただけなんですが、そのうち楽しくなって体がひと回り大きくなりました。<br><br>
  そのおかげで、まわりからも、若くなったとかカッコイイって言われています!うれしいですね。<br>
  (40代 会社員・男性)<br><br>
  <small>※結果には個人差があり、全ての方が同様の結果になるとは限りません。</small>
  </p>
  </div>

  <div>
  <h2>あなたのBMIはいくつ?</h2>

  <form name="bmi">
    <p>今すぐ計算してみましょう。<br>
   『BMI=体重(kg)÷身長(m)×身長(m)』</p>

    体重:<input type="text" name="bmiWeight">kg<br>
    身長:<input type="text" name="bmiHeight">cm
    <input type="button" value="BMIを計算" onclick="fncBMI()"><br>
    結果:<input type="text" name="bmiAns">

    <p>BMIが25以上だと、ちょっと肥満気味かもしれません。BMIが18未満の場合は痩せすぎている可能性があります。</p>
  </form>

  </div>

  <div>
  <h2>サービスと料金</h2>
  <figure>
    <img src="img/6-04-sv.png" alt="サービスと料金">
  </figure>
  <p>
    <strong>■ボディメイキングコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月16回 200,000円(税別)<br>
    内 容:週2回(1回60分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■アドバンスドコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月24回 380,000円(税別)<br>
    内 容:週3回(1回90分のトレーニング)<br><br>
  </p>
  <p>
    <strong>■60日間返金保証</strong><br>
    当ジムでは、トレーナーの指示通り実践して頂いたにも関わらずプログラムに満足されなかった場合、全額返金させて頂きます。<br>
    60日間というプログラムが終わるまでの期間が保証対象となりますので、あなたにリスクはなにもありません。安い金額ではありませんので一歩を踏み出せない方にも、安心して体験いただけます。<br><br>
  あなたが体を鍛えたいとお考えでしたら、一人ひとりに最適なトレーニングを行う Hibino JUNGLE GYM にお越しください。プロのトレーナーがフルオーダーメイドのメニューを作成しトレーニングを行うため、ご自身のトレーニング方法に悩むことはありません。安全安心して取り組んでいただけます。<br><br>
  また、お仕事前や帰り、お友達とのお出掛け前や帰り等にも気兼ねなくご利用いただくため、トレーニングウェアやミネラルウォーター、シューズ、タオル等の<strong><span class="yellow-futo">無料レンタル</span></strong>を行っています。<br><br>
  ぜひ Hibino JUNGLE GYM までお問い合わせください。</p>
  </div>

  <div>
    <p id="cta">
      <a target="_blank" href="https://www.google.co.jp">
      >お申し込みはこちら</a>
    </p>
  </div>
  </main>

  <footer>
    <small>&copy;2019 Hibino JUNGLE GYM.</small>
  </footer>
</body>
</html>

21日目(5/5)

中央揃えと表示の確認

■プレビュー

中央揃えと表示の確認

P264

■ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X');
</script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>パーソナルトレーニング「Hibino JUNGLE GYM」OPENキャンペーン</title>
  <style>
    body {
      font-family: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
      max-width: 1000px;
    }

    img {
      max-width: 100%;
    }

    header {
      text-align: center; /* 中央揃え */
    }

    footer {
      text-align: center; /* 中央揃え */
    }

    h1 {
      color: black; font-weight: bold; font-size: 36px;
      background-color; white;
    }

    h2 {
      color: black; font-weight: bold; font-size: 24px;
      background-color; white;
      text-align: center; /* 中央揃え */
    }

    figcaption {
      font-size: 12px;
    }

    form {
      max-width: 900px;
      margin: 0 auto; /* 中央揃え */
    }

    .centering {
      text-align: center; /* 中央揃え */
    }

    .red-reverse {
      color: white; background-color: red;
    }

    .yellow-futo {
      background:linear-gradient(transparent 65%, yellow 65%);
    }

    .cv-contents {
      margin: 0 auto; /* 中央揃え */
      max-width: 900px;
      border: 1px dashed gray; /* 1px幅の点線をグレー色で囲む */
      border-radius: 10px; /* 角を丸くする */
      line-height: 36px;
      
      text-align: left;
    }

    .cv-contents figure.left {
      float: left;
    }

    .cv-contents figure.right {
      float: right;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    p.service {
      max-width: 900px;
      margin: 0 auto; /* 中央揃え */
    }

    a:hover {
      background-color: darkblue;
      color: white;
    }

    a:active {
      background-color: skyblue;
      color: white;
    }

    a {
      margin: 0 auto; /* 中央揃え */
      background-color: blue; color: white; font-size: 20px;
      text-align: center; border-radius: 5px;
      text-decoration: none; max-width: 300px;
      display:block;
      animation: prunprun 2.2s ease-in infinite;
      -webkit-animation: prunprun 2.2s ease-in infinite;
      -moz-animation: prunprun 2.2s ease-in infinite;
      -o-animation: prunprun 2.2s ease-in infinite;
      -ms-animation: prunprun 2.2s ease-in infinite;
    }

@keyframes prunprun {
48%, 62% {transform: scale(1.0, 1.0);}
50% {transform: scale(1.1, 0.9);}
56% {transform: scale(0.9, 1.1) translate(0, -5px);}
59% {transform: scale(1.0, 1.0) translate(0, -3px);}
}

@-webkit-keyframes prunprun{
48%, 62% {-webkit-transform: scale(1.0, 1.0);}
50% {-webkit-transform: scale(1.1, 0.9);}
56% {-webkit-transform: scale(0.9, 1.1) translate(0, -5px);}
59% {-webkit-transform: scale(1.0, 1.0) translate(0, -3px);}
}

@media screen and (max-width:600px) {

  body {
    font-size: 1.6vw;
  }

  h1 {
    font-size: 3.6vw;
  }

  h2 {
    font-size: 2.4vw;
  }

  figcaption {
    font-size: 1.2vw;
  }

  .cv-contents figure.left {
    float: none;
  }

  .cv-contents figure.right {
    float: none;
  }

  a {
    font-size: 5.0vw;
  }

}

  </style>

  <script>
    function fncBMI() {
      var bmi; //BMI
      var w; //体重
      var h; //身長
      
      w = eval(document.bmi.bmiWeight.value);
      h = eval(document.bmi.bmiHeight.value) / 100; //メートルに変換
      
      bmi = w / (h * h);

      document.bmi.bmiAns.value = bmi;
    }
  </script>
</head>
<body>
  <header>
    <h1>カラダが変革するトレーニング環境!</h1>
    <figure>
      <img src="img/6-01-top.png" alt="パーソナルトレーニングOPEN">
      <figcaption>デキル男は鍛えてる!</figcaption>
    </figure>
    <p><a href="#cta">今すぐ申し込む</a></p>

    <p>パーソナルトレーニングジム「Hibino JUNGLE GYM」では、<br>
    あなたにあった<strong><span class="yellow-futo">オーダーメイドトレーニングメソッド</span></strong>により、<br>
    効果的なボディメイキングが可能です!</p>
  </header>

  <main>

  <div class="cv-contents">
  <figure class="left">
    <img src="img/6-02-ps.png" alt="プライベート空間でも最強のマシンを導入">
    <figcaption>プライベート空間でも最強のマシンを導入</figcaption>
  </figure>
  <p class="clearfix">
  <strong><span class="red-reverse">完全プライベート空間</span></strong><br><br>
  完全予約制の個室ですので、人目を気にせず集中してトレーニングができます。<br><br>
  自分に合った効果的なボディメイキングに興味のある方におすすめです。
  </p>
  </div>

  <p></p>

  <div class="cv-contents">
  <figure class="right">
    <img src="img/6-03-cv.png" alt="お客様の声">
  </figure>
  <p class="clearfix">
  <strong><span class="red-reverse">お客様の声</span></strong><br><br>
  とにかくお腹が出ちゃって・・・カウンセリングでBMIを計算してもらったら28とかで、これはマズイと思いましたね。<br><br>
  最初はお腹を凹ませたかっただけなんですが、そのうち楽しくなって体がひと回り大きくなりました。<br><br>
  そのおかげで、まわりからも、若くなったとかカッコイイって言われています!うれしいですね。<br>
  (40代 会社員・男性)<br><br>
  <small>※結果には個人差があり、全ての方が同様の結果になるとは限りません。</small>
  </p>
  </div>

  <div>
  <h2>あなたのBMIはいくつ?</h2>

  <form name="bmi">
    <p>今すぐ計算してみましょう。<br>
   『BMI=体重(kg)÷身長(m)×身長(m)』</p>

    体重:<input type="text" name="bmiWeight">kg<br>
    身長:<input type="text" name="bmiHeight">cm
    <input type="button" value="BMIを計算" onclick="fncBMI()"><br>
    結果:<input type="text" name="bmiAns">

    <p>BMIが25以上だと、ちょっと肥満気味かもしれません。BMIが18未満の場合は痩せすぎている可能性があります。</p>
  </form>

  </div>

  <div>
  <h2>サービスと料金</h2>
  <figure class="centering">
    <img src="img/6-04-sv.png" alt="サービスと料金">
  </figure>
  <p class="service">
    <strong>■ボディメイキングコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月16回 200,000円(税別)<br>
    内 容:週2回(1回60分のトレーニング)<br><br>
  </p>
  <p class="service">
    <strong>■アドバンスドコース</strong><br>
    入会金:無料<br>
    料 金:2ヶ月24回 380,000円(税別)<br>
    内 容:週3回(1回90分のトレーニング)<br><br>
  </p>
  <p class="service">
    <strong>■60日間返金保証</strong><br>
    当ジムでは、トレーナーの指示通り実践して頂いたにも関わらずプログラムに満足されなかった場合、全額返金させて頂きます。<br>
    60日間というプログラムが終わるまでの期間が保証対象となりますので、あなたにリスクはなにもありません。安い金額ではありませんので一歩を踏み出せない方にも、安心して体験いただけます。<br><br>
  あなたが体を鍛えたいとお考えでしたら、一人ひとりに最適なトレーニングを行う Hibino JUNGLE GYM にお越しください。プロのトレーナーがフルオーダーメイドのメニューを作成しトレーニングを行うため、ご自身のトレーニング方法に悩むことはありません。安全安心して取り組んでいただけます。<br><br>
  また、お仕事前や帰り、お友達とのお出掛け前や帰り等にも気兼ねなくご利用いただくため、トレーニングウェアやミネラルウォーター、シューズ、タオル等の<strong><span class="yellow-futo">無料レンタル</span></strong>を行っています。<br><br>
  ぜひ Hibino JUNGLE GYM までお問い合わせください。</p>
  </div>

  <div>
    <p id="cta">
      <a target="_blank" href="https://www.google.co.jp">
      >お申し込みはこちら</a>
    </p>
  </div>
  </main>

  <footer>
    <small>&copy;2019 Hibino JUNGLE GYM.</small>
  </footer>
</body>
</html>