【無料公開】模写徹底練習note - ④ サクセスストーリー編

スキプラ＠元エンジニア

2020年5月29日 23:27

こんにちは。スキプラ(@riman_skillplus)です。

さて、今回はレッスン一覧の紹介部分をやっていきましょう！

出来上がりはこんな感じです。

スクリーンショット 2020-05-29 21.13.14

スクリーンショット 2020-05-29 21.13.09

このカードのデザインは、【受講生の声】みたいなやつで良く見ますよね。

実はslickというjQueryプラグインを使うと簡単にできちゃいます。

「今回の講座をマスターできれば【体験者の声】とか【購入者の声】みたいなものをカルーセル形式で作れますけど？」

と、ドヤつくことができるようになります。

今回はslickというプラグインを使っていますが、この使い方はこちらのgithubで丁寧に解説しているので参考にしてみてください。

では早速やっていきましょう。

Step1: まずは箱を作る

いつもどおり、箱を作っていきましょう。

スクリーンショット 2020-05-29 21.22.21

上のdivが、「初心者から創れる人を生み出す」の部分。これは簡単ですね。

問題は、次のサクセスストーリーの部分です。

見出しと説明文は問題ないですが、くるくるスライドする部分が気になりますね。

でも実際はそんな難しくはないので安心してください。

Step2: HTMLを組む

  <div>
   <h1>初心者から、創れる人を生み出す</h1>
   <p>LEARN TO CODE, LEARN TO BE CREATIVE.</p>
   <p>「初心者」</span>でもわかりやすく、挫折せずに学べること。<br />
   そして、本物のスキルが身につき<span>「創れる」</span>ようになること。</p>
   <p>プログラミングで夢を叶えたい人が、本当に夢を叶えられるように、<br /> 私たちはこんな思いをProgateに込めています。 </p>
   <p>プログラミングの世界へ踏み出すあなたを、私たちがサポートします。</p>
 </div>

 <div>
   <h1>サクセスストーリー</h1>
   <p>プログラミングの世界への第一歩を踏み出し、夢を実現した方々のサクセスストーリーを紹介します。</p>
   <ul>
     <li>
       <div>
         <img src="./img/story_1.jpg" alt="">
         <p>武田金矢</p>
         <p>Japan</p>
         <p>こんなことになるなんて</p>
         <p>ストーリーを読む</p>
       </div>
     </li>
     <li>
       <div>
         <img src="./img/story_2.jpg" alt="">
         <p>山本くにお</p>
         <p>Japan</p>
         <p>こんなことになるなんて</p>
         <p>ストーリーを読む</p>
       </div>
     </li>
     <li>
       <div>
         <img src="./img/story_3.jpg" alt="">
         <p>Jonny K</p>
         <p>Korea</p>
         <p>こんなことになるなんて</p>
         <p>ストーリーを読む</p>
       </div>
     </li>
     <li>
       <div>
         <img src="./img/story_4.jpg" alt="">
         <p>Nick</p>
         <p>Singapore</p>
         <p>こんなことになるなんて</p>
         <p>ストーリーを読む</p>
       </div>
     </li>
     <li>
       <div>
         <img src="./img/story_5.jpg" alt="">
         <p>Andree</p>
         <p>France</p>
         <p>こんなことになるなんて</p>
         <p>ストーリーを読む</p>
       </div>
     </li>
     <li>
       <div>
         <img src="./img/story_6.jpg" alt="">
         <p>Cleto</p>
         <p>Spain</p>
         <p>こんなことになるなんて</p>
         <p>ストーリーを読む</p>
       </div>
     </li>
     <li>
       <div>
         <img src="./img/story_1.jpg" alt="">
         <p>Marcus</p>
         <p>America</p>
         <p>こんなことになるなんて</p>
         <p>ストーリーを読む</p>
       </div>
     </li>
     <li>
       <div>
         <img src="./img/story_2.jpg" alt="">
         <p>Janiya</p>
         <p>Canada</p>
         <p>こんなことになるなんて</p>
         <p>ストーリーを読む</p>
       </div>
     </li>
   </ul>
 </div>

これは箱に合わせて作っていってるだけなので簡単ですね！

ちなみに、カルーセルのカード部分は、ul>liの中にdivで囲っています。

これは、slickでカード間にマージンを取りたい時、li要素に直接marginを指定するとうまく動かなくなるためです。

こちらの記事を参考にしました。

Step3: CSSを当て込んでいく

<div class="beginner">
   <h1 class="headline text-green text-center">初心者から、創れる人を生み出す</h1>
   <p class="normal-text text-center">LEARN TO CODE, LEARN TO BE CREATIVE.</p>
   <p class="normal-text text-center"><span class="text-green">「初心者」</span>でもわかりやすく、挫折せずに学べること。<br />
   そして、本物のスキルが身につき<span class="text-green">「創れる」</span>ようになること。</p>
   <p class="normal-text text-center">プログラミングで夢を叶えたい人が、本当に夢を叶えられるように、<br /> 私たちはこんな思いをProgateに込めています。 </p>
   <p class="normal-text text-center">プログラミングの世界へ踏み出すあなたを、私たちがサポートします。</p>
 </div>

 <div class="all-stories">
   <h1 class="headline text-black text-center">サクセスストーリー</h1>
   <p class="normal-text text-center">プログラミングの世界への第一歩を踏み出し、夢を実現した方々のサクセスストーリーを紹介します。</p>
   <ul class="stories">
     <li class="story">
       <div>
         <img src="./img/story_1.jpg" alt="">
         <p class="normal-text">武田金矢</p>
         <p class="normal-text">Japan</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_2.jpg" alt="">
         <p class="normal-text">山本くにお</p>
         <p class="normal-text">Japan</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_3.jpg" alt="">
         <p class="normal-text">Jonny K</p>
         <p class="normal-text">Korea</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_4.jpg" alt="">
         <p class="normal-text">Nick</p>
         <p class="normal-text">Singapore</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_5.jpg" alt="">
         <p class="normal-text">Andree</p>
         <p class="normal-text">France</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_6.jpg" alt="">
         <p class="normal-text">Cleto</p>
         <p class="normal-text">Spain</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_1.jpg" alt="">
         <p class="normal-text">Marcus</p>
         <p class="normal-text">America</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_2.jpg" alt="">
         <p class="normal-text">Janiya</p>
         <p class="normal-text">Canada</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
   </ul>
 </div>

各クラスでやりたいことを解説しておきます。

▼ 各々のクラスでやりたいこと
・ beginner : これはpaddingを上下に指定するだけ
・ all-stories : カルーセルの一番外側。背景色を指定し、paddingを付けたい。
・ story : カードの中身です。文字色の指定や、上下左右のmarginを指定したい。
・ btn-square : 四角いボタンにしたい (これまで使っていた丸角のボタンとは異なる)
・ btn-green-border : 緑の罫線で囲われたボタンにしたい

いったん、この状況で見てみます。

スクリーンショット 2020-05-29 21.38.58

h1とかpタグは、もう全体でこの見出しデザイン。見出しの下はこの装飾。ってのが決まっているので、前回までに作ったクラス ("headline", "text-black", "text-center", "normal-text")を当てるだけでデザインが出来上がってるので楽ちんですね。

スクリーンショット 2020-05-29 21.35.31

問題はサクセスストーリー。いつもどおり、画像の大きさ指定してないので画像が超拡大されてます。笑

ではいつもどおり、解決したい課題を羅列していきます。

▼ 解決したい課題
① パディングを付けたい
② 背景色を付けたい
③ カードの中を整理したい
④ カードの中のボタンを作りたい
⑤ カードをカルーセルにしたい

① パディングを付けたい

「初心者でも〜」の部分は、上下にpaddingが必要なので付けます。

(上下に100pxのpaddingを取るだけ)

/* 初心者から創れる人を生み出す */
.beginner {
 padding: 100px 0;
}

楽勝ですね！

スクリーンショット 2020-05-29 21.34.26

② 背景色を付けたい

サクセスストーリーの部分は背景色がいつもの薄い緑にして、paddingを取ります。

/* サクセスストーリー */
.all-stories {
 background: #F4FAFA;
 padding: 100px 0;
}

スクリーンショット 2020-05-29 21.40.17

あとはカードの中身を整理していけば良さそうですね。

③ カードの中身を整理したい

まずは、Step1として、画像を50%の大きさで表示して、丸抜きしてみましょう。

.story img {
 max-width: 50%;
 border-radius: 50%;
 display: block;
 margin: 10px auto;
}

スクリーンショット 2020-05-29 21.43.47

Step2として、とりあえず文字を中央寄せにして、背景を白に(さらにbox-sahdowを使うことで)して、カードっぽさを出します。

.story div {
 text-align: center;
 background: #fff;
 box-shadow: 0 1px 3px rgba(106,137,152,0.2);
 margin: 10px 20px;
}

スクリーンショット 2020-05-29 21.46.15

良いですね。後は「ストーリーを読む」さえボタンにできれば。

④ カードの中のボタンを作りたい

.btn-square {
 padding: 10px 20px;
 display: inline-block;
}

.btn-green-border {
 border: 1px solid #59CDC8;
 color: #59CDC8;
}

.btn-squareで、簡単なボタンを作ります。

ボタンは基本的に、上下を小さく、左右に広めにpaddingを作ると完成します。

次に、.btn-green-borderで、緑色の罫線で囲って、文字色も罫線と同じ色にしてみます。

どうなるでしょうか。

スクリーンショット 2020-05-29 21.49.04

いとも簡単にできちゃいました。

⑤ カードをカルーセルにしたい

今回はjqueryのslickというプラグインを使って実装していきます。

このマニュアル通りに、jqueryとslickをimportします。

   <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
   <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">さいごにお願い

slickはbodyの最後に、この記述をするだけで動作します。

    <script>
     $(document).ready(function() {
       $('.stories').slick();
     });
   </script>

今、1枚ずつ表示されてて、大きすぎますよね。

6枚ずつ表示してみましょう。

    <script>
     $(document).ready(function() {
       $('.stories').slick({
         slidesToShow: 6,
       });
     });
   </script>

slick(

のあとに、{}で囲んでいる部分はオプションで、slickを使う時に、どんなオプション(追加設定)しますかーということを書く部分。

今回は、slideToShowという何枚表示する？というのを6枚にしてます。

スクリーンショット 2020-05-29 22.01.00

良いですね。

さらに上を目指しましょう。

・960px以上で6枚表示
・600px ~ 959pxは3枚表示
・480px ~ 599pxは2枚表示
・480px未満は1枚表示

今回は responsive いうプロパティを使います。

ここで、設定したbreakpointを基準に、表示する枚数と、スライドした時に何枚スライドするか(slidesToScroll)を設定しています。

※詳しくは以下のgitで紹介してます。

    <script>
     $(document).ready(function() {
       $('.stories').slick({
         dots: true,
         slidesToShow: 6,
         accessibility: true,
         responsive: [
           {
             breakpoint: 960,
             settings: {
               slidesToShow: 3,
               slidesToScroll: 3,
             }
           },
           {
             breakpoint: 600,
             settings: {
               slidesToShow: 2,
               slidesToScroll: 2
             }
           },
           {
             breakpoint: 480,
             settings: {
               slidesToShow: 1,
               slidesToScroll: 1
             }
           }
         ]
       });
     });
   </script>

これで、ブレイクポイントごとに変わってくれます。見てみましょう。

動画_2.mov

ちゃんと意図通りの動作ですね！slickを使ったカルーセルは結構面白いので色々試してみてください。

最後にお願い

ぜひぜひ、今後のモチベーションのためにもお願いします！！

もしこのnoteが参考になったら....

■ 最後にたった2つのお願い
① このnoteを「スキ」してください 🙇‍♂️
② このnoteの感想、何でも良いので @riman_skillplus 宛にください 🙇‍♂️

完成形のコード

今回の作業ログは、こちらのプルリクエストにもありますが、コードも貼っておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Progate模写</title>
 <meta name="viewport" content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
 <link rel="stylesheet" href="./css/style.css">
</head>
<body>

 <div class="header-wrapper">
   <div class="header">
     <div class="header-logo">
       <img src="./img/logo_progate.png"    alt="PC用ロゴ" class="pc-only">
       <img src="./img/logo_progate_sp.svg" alt="SP用ロゴ" class="sp-only">
     </div>
     <ul class="header-menu">
       <li><a class="text-black" href="">ログイン</a></li>
       <li><a href="" class="btn btn-orange">無料会員登録</a></li>
       <li class="hidden-sm company-plan"><a class="text-black" href="">法人プラン</a></li>
     </ul>
   </div>
 </div><!-- ヘッダー -->

 <div class="key-visual">
   <div class="key-visual-text">
     <p class="headline text-black">
     Progateだから楽しめる<br />
     初心者からできる<br class="hidden-sm"/>
     プログラミング学習
     </p>
     <p class="normal-text">
     プログラミングは素晴らしい力です。<br class="hidden-sm"/>
     やらないのはもったいない。<br />
     悩んでいるなら、Progateでやってみよう。<br class="hidden-sm"/>
     無料で始められる、初心者向け学習サイト。
     </p>
     <p class="btn btn-orange">無料会員登録</p>
   </div>
   <div class="key-visual-image">
     <img src="./img/progate_key-visual.png" alt="">
   </div>
 </div><!-- キービジュアル -->

 <div class="service-info">
   <div>
     <div class="service-info-image">
       <img src="./img/user_counts.svg" alt="">
     </div>
     <div class="service-info-text">
       <p class="normal-text">ユーザー数</p>
       <p class="text-size-lg text-green">1,200,000<span class="normal-text">人</span></p>
     </div>
   </div>
   <div>
     <div class="service-info-image">
       <img src="./img/lesson_counts.svg" alt="">
     </div>
     <div class="service-info-text">
       <p class="normal-text">レッスンの総視聴回数</p>
       <p class="text-size-lg text-green">2,080,000<span class="normal-text">回</span></p>
     </div>
   </div>
   <div>
     <div class="service-info-image">
       <img src="./img/world_counts.svg" alt="">
     </div>
     <div class="service-info-text">
       <p class="normal-text">提供国数</p>
       <p class="text-size-lg text-green">100+<span class="normal-text">カ国</span></p>
     </div>
   </div>
 </div><!-- サービス情報 -->

 <div class="service-detail">
   <h1 class="headlin text-center">オンラインプログラミング学習サービス<br />『Progate』 </h1>
   <p class="normal-text text-center">Progateではオンラインでプログラミングが学べるサービスです。<br />学び方で、結果は変わります。初心者でも学びやすい学習環境をご用意。</p>
   <div>
     <div class="service-detail-image">
       <img src="./img/lesson_feature_01.png" alt="">
     </div>
     <div class="service-detail-text">
       <h2>1.</h2>
       <p class="headline-border"></p>
       <p class="headline">イラスト中心のスライドで学ぶ</p>
       <p class="normal-text">紙の本よりも直感的で、動画よりも学びやすい、「スライド学習」を採用しました。自分のペースで学習できること、復習しやすいことが強みです。</p>
     </div>
   </div>
   <div>
     <div class="service-detail-image">
       <img src="./img/lesson_feature_02.png" alt="">
     </div>
     <div class="service-detail-text">
       <h2>2.</h2>
       <p class="headline-border"></p>
       <p class="headline">プログラムを書いて学ぶ</p>
       <p class="normal-text">実際にプロダクトを創りながら学ぶから、使えるスキルが身につきます。ブラウザ上で、コードを書いて結果も確認。準備いらずで、すぐにプログラミングが実践できます。</p>
     </div>
   </div>
 </div><!-- サービス詳細 -->

 <div class="lesson-feature">
   <h1 class="headline text-center">レッスンへのこだわり</h1>
   <p class="normal-text text-center">先生のいないオンライン学習だからこそ、レッスンの「質」に最大限のこだわりを持っています。 <br />以下のミッションと、それを達成するための2つの約束を定めています。 </p>
   <h2 class="headline-sm text-green text-center">「初心者でも、独学できるレッスンを」</h2>
   <div class="lesson-feature-wrapper">
     <div>
       <p class="headline-md text-center">実践的なレッスン</p>
       <p class="normal-text text-center">現実に活かせない学びは必要ありません。<br /> 実際にプロダクトを創りながら、自分一人でもそれが創れるようになるレッスンを提供します。</p>
     </div>
     <div>
       <p class="headline-md text-center">わかりやすいレッスン</p>
       <p class="normal-text text-center"> 勉強は理解できると楽しい。理解できないとつまらない。あらゆる「学び」が腹に落ちて、<br />もっと学びたくなるレッスンを提供します。</p>
     </div>
   </div>
 </div><!-- レッスンへのこだわり -->

 <div class="all-couces">
   <h1 class="headline text-black text-center">全15・79レッスン</h1>
   <p class="normal-text text-center">あなたにあったレッスンがきっと見つかる</p>
   <div class="cources">
     <div class="cource-detail">
       <h4 class="normal-text">HTML&CSS</h4>
       <img src="./img/cource_html.png" alt="">
       <p class="btn-shadow btn-shadow-green">コース詳細へ</p>
     </div>
     <div class="cource-detail">
       <h4 class="normal-text">JavaScript</h4>
       <img src="./img/cource_js.png" alt="">
       <p class="btn-shadow btn-shadow-blue">コース詳細へ</p>
     </div>
     <div class="cource-detail">
       <h4 class="normal-text">jQuery</h4>
       <img src="./img/cource_jquery.png" alt="">
       <p class="btn-shadow btn-shadow-yellow">コース詳細へ</p>
     </div>
     <div class="cource-detail">
       <h4 class="normal-text">Ruby</h4>
       <img src="./img/cource_ruby.png" alt="">
       <p class="btn-shadow btn-shadow-red">コース詳細へ</p>
     </div>
     <div class="cource-detail">
       <h4 class="normal-text">Ruby on Rails</h4>
       <img src="./img/cource_rails.png" alt="">
       <p class="btn-shadow btn-shadow-pink">コース詳細へ</p>
     </div>
     <div class="cource-detail">
       <h4 class="normal-text">PHP</h4>
       <img src="./img/cource_php.png" alt="">
       <p class="btn-shadow btn-shadow-purple">コース詳細へ</p>
     </div>
   </div>
 </div>

 <div class="beginner">
   <h1 class="headline text-green text-center">初心者から、創れる人を生み出す</h1>
   <p class="normal-text text-center">LEARN TO CODE, LEARN TO BE CREATIVE.</p>
   <p class="normal-text text-center"><span class="text-green">「初心者」</span>でもわかりやすく、挫折せずに学べること。<br />
   そして、本物のスキルが身につき<span class="text-green">「創れる」</span>ようになること。</p>
   <p class="normal-text text-center">プログラミングで夢を叶えたい人が、本当に夢を叶えられるように、<br /> 私たちはこんな思いをProgateに込めています。 </p>
   <p class="normal-text text-center">プログラミングの世界へ踏み出すあなたを、私たちがサポートします。</p>
 </div>

 <div class="all-stories">
   <h1 class="headline text-black text-center">サクセスストーリー</h1>
   <p class="normal-text text-center">プログラミングの世界への第一歩を踏み出し、夢を実現した方々のサクセスストーリーを紹介します。</p>
   <ul class="stories">
     <li class="story">
       <div>
         <img src="./img/story_1.jpg" alt="">
         <p class="normal-text">武田金矢</p>
         <p class="normal-text">Japan</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_2.jpg" alt="">
         <p class="normal-text">山本くにお</p>
         <p class="normal-text">Japan</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_3.jpg" alt="">
         <p class="normal-text">Jonny K</p>
         <p class="normal-text">Korea</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_4.jpg" alt="">
         <p class="normal-text">Nick</p>
         <p class="normal-text">Singapore</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_5.jpg" alt="">
         <p class="normal-text">Andree</p>
         <p class="normal-text">France</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_6.jpg" alt="">
         <p class="normal-text">Cleto</p>
         <p class="normal-text">Spain</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_1.jpg" alt="">
         <p class="normal-text">Marcus</p>
         <p class="normal-text">America</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
     <li class="story">
       <div>
         <img src="./img/story_2.jpg" alt="">
         <p class="normal-text">Janiya</p>
         <p class="normal-text">Canada</p>
         <p>こんなことになるなんて</p>
         <p class="btn-square btn-green-border">ストーリーを読む</p>
       </div>
     </li>
   </ul>
 </div>

 <script>
   $(document).ready(function() {
     $('.stories').slick({
       dots: true,
       slidesToShow: 6,
       accessibility: true,
       responsive: [
         {
           breakpoint: 960,
           settings: {
             slidesToShow: 3,
             slidesToScroll: 3,
           }
         },
         {
           breakpoint: 600,
           settings: {
             slidesToShow: 2,
             slidesToScroll: 2
           }
         },
         {
           breakpoint: 480,
           settings: {
             slidesToShow: 1,
             slidesToScroll: 1
           }
         }
       ]
     });
   });
 </script>

</body>
</html>

html {
 font-size: 62.5%; /* 1rem = 10px */
}

body {
 margin: 0;
 padding: 0;
 font-family: "AvenirNext", "Lato", "Hirago KakuGothic ProN", Meiryo, sans-serif;
 font-size: 1.8rem; /* デフォルトのフォントサイズを16pxに */
}

/* 全体共通系 */
a {
 text-decoration: none;
}

ul {
 list-style-type: none;
 padding: 0;
}

/* PC限定はPC時は表示 */
.pc-only {
 display: block;
}

/* スマホ限定はPC時は非表示 */
.sp-only {
 display: none;
}

/* テキスト共通系 */
.text-black {
 color: #183C60;
}

/* 少し薄い文字 */
.normal-text {
 color: #6B7C92;
}

.headline {
 font-size: 3.4rem;
}

/* PCでの表示では2.8rem */
.text-size-lg {
 font-size: 2.8rem;
}

/* 文字の中央寄せ */
.text-center {
 text-align:center;
}

/* 緑色のテキスト */
.text-green {
 color: #1BC8B7;
}


/* 装飾共通系(ボタン) */
.btn {
 padding: 1rem 2rem;
 border-radius: 2rem;
 display: inline-block;
 font-size: 0.75rem;
}

.btn-orange {
 background: #FDB757;
 color: #fff;
}

.btn-square {
 padding: 10px 20px;
 display: inline-block;
}

.btn-green-border {
 border: 1px solid #59CDC8;
 color: #59CDC8;
}

/* ヘッダー部分のスタイル */
.header-wrapper {
 padding-top: 10px;
 background: #F4FAFA;
}

.header {
 width: 90%;
 margin: 0 auto; /* 中央寄せ */

 display: flex;
 justify-content: space-between;
 align-items: center;
}

.header-logo {
 width: 200px;
}

.header-logo img {
 max-width: 100%;
}

.header-menu {
 display: flex;
 align-items: center;
}

.header-menu li {
 margin: 0 1rem;
}

/* 法人プランは左側のボーダー表示 */
.company-plan {
 border-left: 1px solid #D7DDDF;
 padding-left: 1rem;
}

/*.`キービジュアル部分 */
.key-visual {
 display: flex;
 background: #F4FAFA;
}

.key-visual-text, .key-visual-image {
 width: 50%;
}

.key-visual-text {
 padding: 0 50px;
}

.key-visual-image img {
 max-width: 100%;
}

/* サービスの利用状況説明部分 */
.service-info {
 /* 上下に100pxずつ余白をつける */
 padding: 100px 0;
 display: flex;
 justify-content: space-between;
}


.service-info > div {
 display: flex;
 /* 画像とテキストを縦方向に中央に寄せる */
 align-items: center;
 width: 33.3333%;
}

/* 画像とテキストは親要素に対して半分ずつ表示する */
.service-info-image, .service-info-text {
 width: 50%;
}

.service-info-image {
 text-align: center;
}

.service-info-image img {
 max-width: 50%;
}

/* 人、回、カ国の文字は小さく表示する */
.service-info-text span {
 font-size: 0.5em;
}

/** サービスの詳細 **/
.service-detail {
 /* 薄緑の背景色をつける */
 background: #F4FAFA;
}

/* サービスの詳細配下の画像とテキストは横並び表示 */
.service-detail > div {
 display: flex;
 align-items: center;
}

/* 偶数番目の要素だけ画像とテキストを順番反転 */
.service-detail > div:nth-child(even) {
 flex-direction: row-reverse;
}

/* 画像とテキストは50%ずつ */
.service-detail-image, .service-detail-text {
 width: 50%;
}

.service-detail-image img {
 max-width: 100%;
}

/* 見出しの下の下線 */
.headline-border {
 height: 5px; /* 線の太さ */
 width: 40px; /* 線の長さ */
 background: #1BC8B7; /* 線の色 */
 margin-top: -15px;   /* 少し上へ */
}

/* レッスンへのこだわり */
.lesson-feature {
 padding: 100px 0;
}

.lesson-feature-wrapper {
 display: flex;
}

.lesson-feature-wrapper > div {
 width: 50%;
}

/* 全てのコース */
.all-couces {
 background: #F4FAFA;
 padding: 100px 0;
}
.cources {
 display: flex;
 flex-wrap: wrap;
}

.cource-detail {
 width: calc(25% - 40px);
 text-align: center;
 background: #fff;
 box-shadow: 0 1px 3px rgba(106,137,152,0.2);
 margin: 10px 20px;
}

.cource-detail img {
 border-radius: 50%;

 /* 大型サイズのPCで見た時にデザインが崩れるのを防止 */
 display: block;
 margin: 0 auto;
}

.btn-shadow {
 display: inline-block;
 font-weight: bold;
 font-size: 1.4rem;
 padding: 10px 20px;
 border-radius: 10px;
 box-shadow: 0 0 15px 1px rgba(133,140,142,0.3);
 color: #fff;
}

.btn-shadow-green {
 background:#4ccfc9;
}

.btn-shadow-blue {
 background:#A1C3F5;
}

.btn-shadow-yellow {
 background: #E4DF54;
}

.btn-shadow-red {
 background: #FE7F8C;
}

.btn-shadow-pink {
 background: #FE8DB2;
}

.btn-shadow-purple {
 background: #C6BAE8;
}

/* 初心者から創れる人を生み出す */
.beginner {
 padding: 100px 0;
}

/* サクセスストーリー */
.all-stories {
 background: #F4FAFA;
 padding: 100px 0;
}
/* slickのarrowが無駄に20px取ってるので非表示 */
.slick-prev, .slick-next {
 display: none !important;
}

.story div {
 text-align: center;
 background: #fff;
 box-shadow: 0 1px 3px rgba(106,137,152,0.2);
 margin: 10px 20px;
}
/**/
.story img {
 max-width: 50%;
 border-radius: 50%;
 display: block;
 margin: 10px auto;
}


/* スマホ用の表示 */
@media screen and (max-width: 559px) {
 /* テキスト共通系 */
 body {
   font-size: 1.6rem; /* デフォルトのフォントサイズを16pxに */
 }
 .headline {
   font-size: 2.4rem;
 }

 /* スマホでの表示では2.4rem */
 .text-size-lg {
   font-size: 2.4rem;
 }

 /* スマホでは非表示 */
 .hidden-sm {
   display: none;
 }

 /* PC限定はスマホ時は非表示 */
 .pc-only {
   display: none;
 }

 /* スマホ限定はスマホ時は非表示 */
 .sp-only {
   display: block;
 }

 /* ヘッダー */
 .header-logo {
   width: 50px;
 }

 /* キービジュアル */
 .key-visual {
   flex-direction: column;
 }

 .key-visual-text {
   width: calc(100% - 6rem);
   padding: 0 3rem;
 }

 .key-visual-image {
   width: 100%;
 }

 .service-info {
   flex-direction: column;
 }

 .service-info > div {
   /* スマホの時は横幅いっぱいに表示 */
   width: 100%;
 }

 /* サービス詳細 */
 .service-detail > div {
   /* そのままだと、偶数番目がPC時のrow-reverseが参照されるので、上書き */
   flex-direction: column !important;
 }

 /* 画像とテキストは100%ずつの表示に切り替え */
 .service-detail-image, .service-detail-text {
   width: 100%
 }

 /* スマホの時はテキストを最初に表示して、画像を2番目に表示する */
 .service-detail-text {
   order: 1;
 }
 .service-detail-image {
   order : 2;
 }

 /* レッスンへのこだわり */
 .lesson-feature-wrapper {
   flex-direction: column;
 }

 .lesson-feature-wrapper > div {
   width: 100%;
 }

 /* スマホの時は2枚表示 */
 .cource-detail {
   width: calc(50% - 40px);
 }
}

/* タブレット用の表示 */
@media screen and (min-width: 560px) and (max-width: 960px) {
 /* テキスト共通系 */
 .headline {
   font-size: calc(2.4rem + ((1vw - 0.56rem) * 2.5));
 }

 /* ヘッダー */
 .header-logo {
   width: calc(13rem + ((1vw - 0.56rem) * 17.5));
 }

 /* タブレットでは2.0rem ~ 2.8rem */
 .text-size-lg {
   font-size: calc(2rem + ((1vw - 0.56rem) * 2));
 }

 /* タブレットの時は3枚表示 */
 .cource-detail {
   width: calc(33.3333% - 40px);
 }
}

githubの今回の作業ログプルリクエスト

公開してるサイト

実践編で利用するための基礎編はすべて無料公開してます。基礎編のモチベーション向上のためにサポートして頂けるとめちゃくちゃ喜びます！！だいたい作業工数は1記事あたり4-5時間程度かけて【分かりやすい】【知識が身につく！】を意識して作っておりますので、今後も頑張っていきます！