【脱初心者】30Daysトライアル 2nd 最終課題の答え合わせ

副業で月５万円の収入をめざしているシシマルです。

東京フリーランスで行われている30Daysトライアルに取り組んでいて、自分で書いたコードの答え合わせができるサイトがあればいいなと思い自分で作ってみました。

あくまで脱初心者を目指している私が書いたコードなので間違っているところや、未完成のところが多々あります💦

自分への備忘録も兼ねているので間違っている箇所があれば教えてください。修正します。

30daysトライアル最終課題
納期4日の4日目　作業時間6時間
とりあえずHTMLとCSSを書き終える
あとはperfect pixelでの調整とjQueryで動きをつけるんです。
作業で来る時間がなくて実際は4日以上かかってる😅 https://t.co/yPg1iZhMXE pic.twitter.com/VpI1uqDLl5
— 心@プログラミング勉強中 (@GALAPGOSs) November 20, 2019

この記事はこんな人におすすめです。
・30Daysトライアルに取り組んでみて自分の書いたコードがあっているか答え合わせをしたい人。
・30Daysトライアルに取り組んでいて、調べてもわからない箇所がある人

headerのコーディング
mv（メインビジュアル）のコーディング
Newsのコーディング
Serviceのコーディング
Resultsのコーディング
Priceのコーディング
Commentsのコーディング
FAQsのコーディング
Accessのコーディング
Contactのコーディング
footerのコーディング

headerのコーディング

シンプルなheaderなので誰でも簡単に作れると思います。SP時のドロアーはjQueryを使わずにCSSだけで作っています。

【自作・簡単】ドロアーをjQueryを使わないでCSSだけで簡単に自作する方法

<header id="nav">
     <div class="inner">
         <h1>
             <img src="img/logo.png" alt="HANIWAMAN">
         </h1>
         <input type="checkbox" id="nav_input" class="nav_unshown">
         <label for="nav_input" id="nav_open">
             <div class="nav_humburger">
                 <img class="nav_img_closed" src="img/hamburger.svg" alt="">
                 <img class="nav_img_opened" src="img/batsu.svg" alt="">
             </div>
         </label>
         <label for="nav_input" class="nav_unshown" id="nav_close"></label>
         <div id="nav_content">
             <nav class="menu">
                 <ul>
                     <li><a href="#news">News</a></li>
                     <li><a href="#service">Service</a></li>
                     <li><a href="#results">Results</a></li>
                     <li><a href="#price">Price</a></li>
                     <li><a href="#comments">Comments</a></li>
                     <li><a href="#qa">FAQs</a></li>
                     <li><a href="#contact">Contact</a></li>
                 </ul>
             </nav>
         </div>
     </div>
 </header>

#nav {
    background: #F3F3F3;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
  
@media (max-width: 767px) {
    #nav .inner {
        display: flex;
        justify-content: space-between;
        padding: 21.5px 16px;
    }
}

nav {
    text-align: center;
}
  
ul {
    display: inline-block;
    font-size: 1.6rem;
    padding: 28px 0 30px;
}
  
@media (max-width: 767px) {
    #nav ul {
        padding-top: 191px;
    }
}
  
li {
    float: left;
    margin-right: 40px;
}
  
@media (max-width: 767px) {
    li {
        float: none;
        font-size: 1.8rem;
        line-height: 1.22;
        margin-bottom: 20px;
    }
}
  
#nav a:hover {
    border-bottom: 1px solid #3e3e3e;
    transition: all .3s ease-in-out;
}

/* tabより大きいときはh1とハンバーガーメニューを非表示にする */
h1, .nav_humburger {
    display: none;
}
  
@media (max-width: 767px) {
    #nav h1, .nav_humburger {
        display: block;
    }
}

.nav_humburger {
    cursor: pointer;
}
  
.menu {
    text-align: center;
}
  
.nav_unshown {
    display: none;
}
  
#nav_close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}
  
@media (max-width: 767px) {
    #nav_content {
        overflow: auto;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9999;
        width: 300px;
        height: 100%;
        background: #ffffff;
        transition: .3s ease-in-out;
        transform: translateX(100%);
    }
}
  
#nav_input:checked ~ #nav_content {
    position: fixed;
    transform: translateX(calc(100% - 300px));
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}
  
#nav_input:checked ~ #nav_open {
    margin-right: 300px;
    z-index: 9999;
}
  
#nav_input:checked ~ #nav_open .nav_img_opened {
    display: block;
}
  
#nav_input:checked ~ #nav_open .nav_img_closed {
    display: none;
}
  
#nav_input:checked ~ #nav_close {
    display: block;
    opacity: 0.7;
}
  
.nav_img_opened {
    display: none;
}

mv（メインビジュアル）のコーディング

mvもとくに難しくはないと思います。あえていうならbackgroundの書き方とmargin-leftを%指定することくらいだと思います。

<section id="mv">
     <div class="inner">
         <div class="mv_content">
             <h2>詩が生れて、画が出来る。 <br>とかくに人の世は住みにくい。</h2>
             <p>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p>
             <div>
                 <a href="#" class="mv_button">お問い合わせしてみる</a>
             </div>
         </div>
     </div>
 </section>

#mv {
    background: url(../img/mv.png) center center/cover no-repeat;
}
  
#mv .inner {
    width: 1148px;
    margin: 0 auto;
    padding-top: 215px;
    padding-bottom: 174px;
}
  
@media (max-width: 1080px) {
    #mv .inner {
        width: auto;
        padding-left: 16px;
        padding-right: 16px;
    }
}
  
.mv_content {
    margin-left: 54.3%;
}
  
@media (max-width: 767px) {
    .mv_content {
        margin: 0;
        text-align: center;
    }
}
  
#mv h2 {
    font-size: 3.0rem;
    margin-bottom: 30px;
}
  
  @media (max-width: 767px) {
    #mv h2 {
        font-size: 2.4rem;
        text-align: left;
        display: inline-block;
    }
}
  
#mv p {
    font-size: 1.8rem;
    margin-bottom: 47px;
}
  
@media (max-width: 767px) {
    #mv p {
        font-size: 1.6rem;
        text-align: left;
        display: inline-block;
    }
}
  
#mv a {
    font-size: 1.8rem;
    background-color: #ffaa3b;
    color: #ffffff;
    border-radius: 10px;
    padding: 14px 48px;
}
  
#mv a:hover {
    background: #d47800;
    transition: all 0.3s ease;
}

Newsのコーディング

newsのコーディングは「要素の横並び」「垂直方向の並び」「スマホ時の並び方」を綺麗に保つ必要があります。そのためhtmlの階層がかなり深くなっています。

.news_item(内容物　time,.news_label,.news_text,img)
一番上の階層の.news_itemはアローボタンを右寄せに配置するためにあります

▶️.news_item_left(内容物　time,.news_label,.news_text)
２番目の階層の.news_item_leftはアローボタン以外の要素を左寄せに配置するためにあります

⏩.news_item_left_top(内容物　time,.news_label)
３番目の階層の.news_item_leftはスマホ時に表示を２段にするためにあります。

<section id="news">
     <div class="inner">
         <div class="news_content">
             <h2 class="news_title">News</h2>
             <div class="news_item">
                 <div class="news_item_left">
                     <div class="news_item_left_top">
                         <time>2019-02-01</time>
                         <p class="news_label">テキスト</p>
                     </div>
                     <p class="news_text">ニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュース</p>
                 </div>
                 <img src="img/news-arrow.svg" alt="">
             </div>
             <div class="news_item">
                 <div class="news_item_left">
                     <div class="news_item_left_top">
                         <time>2019-02-01</time>
                         <p class="news_label">テキスト</p>
                     </div>
                     <p class="news_text">ニュースニュースニュースニュースニュースニュースニュース</p>
                 </div>
                 <img src="img/news-arrow.svg" alt="">
             </div>
             <div class="news_item">
                 <div class="news_item_left">
                     <div class="news_item_left_top">
                         <time>2019-02-01</time>
                         <p class="news_label">テキスト</p>
                     </div>
                     <p class="news_text">ニュースニュースニュースニュースニュースニュースニュース</p>
                 </div>
                 <img src="img/news-arrow.svg" alt="">
             </div>
             <div class="news_button">
                 <a href="#" class="news_button">MORE</a>
             </div>
         </div>
     </div>
 </section>

タイトルやボタンなど各セクションで共通して使えるパーツはSassのミックスイン機能を使ってまとめておくとコードの記述が楽になります。

#news {
    background: #f3f3f3;
}
  
#news .inner {
    width: 1180px;
    margin: 0 auto;
    padding: 130px 0;
}
  
@media (max-width: 1080px) {
    #news .inner {
        width: auto;
        padding: 0 16px 20px;
    }
}
  
.news_content {
    padding: 56px 50px 40px;
    background: #ffffff;
    box-shadow: 0 5px 12px #3e3e3e;
}
  
@media (max-width: 767px) {
    .news_content {
        padding: 40px 0;
        transform: translateY(-40px);
    }
}
  
.news_title {
    font-size: 3.6rem;
    text-align: center;
    margin-bottom: 52px;
}
  
@media (max-width: 767px) {
    .news_title {
        font-size: 3.0rem;
    }
}
  
@media (max-width: 767px) {
    .news_title {
        margin-bottom: 40px;
    }
}
  
.news_item {
    display: flex;
    justify-content: space-between;
    padding: 38px 9.6px 40px 6px;
    border-top: 1px solid #3e3e3e;
}
  
.news_item:nth-child(4) {
    margin-bottom: 40px;
    border-bottom: 1px solid #3e3e3e;
}
  
.news_item:hover {
    background: #afc1ff;
    transition: all .3s ease;
}
  
@media (max-width: 767px) {
    .news_item {
      padding: 13px 9.9px 16px 16px;
    }
}
  
.news_item_left {
    display: flex;
    align-items: center;
}
  
@media (max-width: 767px) {
    .news_item_left {
        flex-direction: column;
        align-items: stretch;
    }
}
  
.news_item_left_top {
    display: flex;
}
  
@media (max-width: 767px) {
    .news_item_left_top {
        align-items: center;
        margin-bottom: 10px;
    }
}
  
time {
    font-size: 1.8rem;
    margin-right: 60px;
    white-space: nowrap;
}
  
@media (max-width: 767px) {
    time {
        font-size: 1.4rem;
        margin-right: 20px;
    }
}
  
.news_label {
    font-size: 1.4rem;
    margin-right: 60px;
    white-space: nowrap;
    border: 2px solid #4973ff;
    border-radius: 50px;
    padding: 1px 34px;
}
  
@media (max-width: 767px) {
    .news_label {
        font-size: 1.2rem;
        padding: 1px 20px;
    }
}
  
.news_text {
    font-size: 1.8rem;
    margin-right: 9px;
}
  
@media (max-width: 767px) {
    .news_text {
        font-size: 1.4rem;
        margin-right: 22px;
    }
}
  
.news_button {
    text-align: center;
}
  
#news a {
    display: inline-block;
    font-size: 2.0rem;
    padding: 15px 86px;
    border: 1px solid #3e3e3e;
    letter-spacing: 4px;
}
  
#news a:hover {
    background: #3e3e3e;
    color: #ffffff;
    transition: all .3s ease;
}
  
@media (max-width: 767px) {
    #news a {
        white-space: nowrap;
        font-size: 1.8rem;
        padding: 16px 121.5px;
    }
}

Serviceのコーディング

背景が途中から色が変わっているところが工夫が必要なところですね💦　

PCサイズの時はheightを400pxに指定しています。SPサイズの時はliner-gradientを使って上半分を黒、下半分を白に指定しています。

sevice_itemの画像がそれぞれによって高さが違うので文字のラインを揃えるために微調整する必要があります。

<section id="service">
     <div class="inner">
         <h2 class="service_title">Service</h2>
         <div class="service_container">
             <div class="service_item">
                 <img src="/img/service1.svg" alt="" class="service_img1">
                 <h3 class="service_item_title">WEB <br>DESIGN</h3>
                 <p class="service_item_text">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p>
             </div>
             <div class="service_item">
                 <img src="/img/service2.svg" alt="" class="service_img2">
                 <h3 class="service_item_title">WEB <br>CODING</h3>
                 <p class="service_item_text">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p>
             </div>
             <div class="service_item">
                 <img src="/img/service3.svg" alt="" class="service_img2">
                 <h3 class="service_item_title">CMS <br>CUSTOMIZE</h3>
                 <p class="service_item_text">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p>
             </div>
         </div>
     </div>
 </section>

#service {
    background: #3e3e3e;
    height: 400px;
}
  
@media (max-width: 767px) {
    #service {
        height: auto;
        background: linear-gradient(180deg, #3e3e3e 0%, #3e3e3e 50%, #ffffff 50%, #ffffff 100%);
    }
}
  
#service .inner {
    width: 960px;
    margin: 0 auto;
    padding-top: 74px;
}
  
@media (max-width: 767px) {
    #service .inner {
      width: auto;
      padding: 40px 16px 60px;
    }
}
  
.service_title {
    font-size: 3.6rem;
    text-align: center;
    color: #ffffff;
    margin-bottom: 73px;
}
  
@media (max-width: 767px) {
    .service_title {
      font-size: 3.0rem;
    }
}

.service_container {
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    padding: 54px 48px 56px;
    box-shadow: 0px 5px 12px #3e3e3e;
}
  
@media (max-width: 767px) {
    .service_container {
      flex-direction: column;
    }
}
  
.service_item {
    text-align: center;
    margin-right: 85.5px;
}
  
.service_item:last-of-type {
    margin-right: 0;
}
  
  @media (max-width: 767px) {
    .service_item {
      margin-right: 0;
      margin-bottom: 65px;
    }
    .service_item:last-of-type {
      margin-bottom: 0;
    }
}
  
#service img {
    margin-bottom: 27px;
}
  
.service_img1 {
    margin-bottom: 21px;
}
  
.service_img2 {
    margin-top: 6px;
}
  
#service h3 {
    font-size: 2.0rem;
    line-height: 30px;
    margin-bottom: 15px;
    letter-spacing: 4px;
}
  
@media (max-width: 767px) {
    #service h3 {
      font-size: 1.8rem;
      margin-bottom: 24px;
    }
}
  
#service p {
    font-size: 1.4rem;
    text-align: left;
    line-height: 1.7;
}
  
@media (max-width: 767px) {
    #service p {
      text-align: center;
    }
}

Resultsのコーディング

ここのセクションではswiper.jsというJavaScriptライブラリを使用します。画面に表示されるスライドの枚数やスライド間の間隔はJavaScriptに数値を入力します。

ページネーションのデザインはデフォルトのものから変更する必要があるためswiper.cssで定義されているクラスをstyle.cssで上書きします。

<section id="results">
     <div class="inner">
         <h2 class="results_title">Results</h2>
         <div class="swiper-container">
             <div class="swiper-wrapper">
                 <div class="swiper-slide">
                     <div class="results_img">
                         <img src="img/slide1.png" alt="">
                     </div>
                     <div class="results_text">
                         <h3 class="results_text_title">とかくに人の世は住みにくい。</h3>
                         <p class="results_text_p">どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
                     </div>
                 </div>
                 <div class="results_item swiper-slide">
                     <div class="results_img">
                         <img src="img/slide1.png" alt="">
                     </div>
                     <div class="results_text">
                         <h3 class="results_text_title">とかくに人の世は住みにくい。</h3>
                         <p class="results_text_p">どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
                     </div>
                 </div>
                 <div class="results_item swiper-slide">
                     <div class="results_img">
                         <img src="img/slide1.png" alt="">
                     </div>
                     <div class="results_text">
                         <h3 class="results_text_title">とかくに人の世は住みにくい。</h3>
                         <p class="results_text_p">どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
                     </div>
                 </div>
                 <div class="results_item swiper-slide">
                     <div class="results_img">
                         <img src="img/slide1.png" alt="">
                     </div>
                     <div class="results_text">
                         <h3 class="results_text_title">とかくに人の世は住みにくい。</h3>
                         <p class="results_text_p">どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
                     </div>
                 </div>
                 <div class="results_item swiper-slide">
                     <div class="results_img">
                         <img src="img/slide1.png" alt="">
                     </div>
                     <div class="results_text">
                         <h3 class="results_text_title">とかくに人の世は住みにくい。</h3>
                         <p class="results_text_p">どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
                     </div>
                 </div>
                 <div class="results_item swiper-slide">
                     <div class="results_img">
                         <img src="img/slide1.png" alt="">
                     </div>
                     <div class="results_text">
                         <h3 class="results_text_title">とかくに人の世は住みにくい。</h3>
                         <p class="results_text_p">どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
                     </div>
                 </div>
             </div><!-- swiper-wrapper -->
         </div><!-- swiper-container -->
         <div class="swiper-pagination"></div>
     <div class="results_button">
         <a href="#">VIEW ALL</a>     
     </div> 
   </div>
 </section>

#results {
    margin-top: 255px;
}
  
@media (max-width: 767px) {
    #results {
      margin: 0;
    }
}
  
#results .inner {
    margin-left: 7%;
    padding-top: 72px;
    padding-left: 108px;
    padding-bottom: 95px;
    background: #3e3e3e;
}
  
@media (max-width: 767px) {
    #results .inner {
      margin-left: 0;
      padding: 40px 0 40px 16px;
    }
}
  
.results_title {
    font-size: 3.6rem;
    text-align: center;
    color: #ffffff;
    text-align: left;
    margin-bottom: 73px;
}
  
@media (max-width: 767px) {
    .results_title {
      font-size: 3.0rem;
    }
}
  
@media (max-width: 767px) {
    .results_title {
      text-align: center;
      margin-bottom: 40px;
    }
}
  
.swiper-container {
    margin-bottom: 52px;
}
  
@media (max-width: 767px) {
.swiper-container {
      margin-bottom: 24px;
    }
}
  
.results_text {
    padding: 20px;
    background: #ffffff;
}
  
@media (max-width: 767px) {
    .results_text {
      padding: 12px;
    }
}
  
.results_text_title {
    margin-bottom: 12px;
    font-size: 2.0rem;
}
  
@media (max-width: 767px) {
    .results_text_title {
      font-size: 1.5rem;
      margin-bottom: 11px;
    }
}
  
.results_text_p {
    font-size: 1.6rem;
}
  
@media (max-width: 767px) {
    .results_text_p {
      font-size: 1.2rem;
    }
}
  
.results_button {
    margin-top: 133px;
    color: #ffffff;
    font-size: 2.0rem;
}
  
@media (max-width: 767px) {
    .results_button {
      margin-top: 84px;
      font-size: 1.8rem;
      text-align: center;
    }
}
  
.results_button a {
    border: 1px solid #ffffff;
    padding: 20px 86px 18px;
    letter-spacing: 4px;
}
  
.results_button a:hover {
    background: #ffffff;
    color: #3e3e3e;
    transition: all .3s ease;
}
  
@media (max-width: 767px) {
    .results_button a {
      padding: 16px 113px;
    }
}
  
.swiper-pagination-bullet {
    margin-right: 20px;
    background: #ffffff;
    opacity: 1;
    width: 12px;
    height: 12px;
}
  
.swiper-pagination-bullet-active {
    position: relative;
}
  
.swiper-pagination-bullet-active::before {
    position: absolute;
    top: -4px;
    left: -4px;
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #ffffff;
    border-radius: 100%;
}
  
@media (max-width: 767px) {
    .swiper-pagination {
      text-align: center;
      left: 0;
      right: 0;
      margin: auto;
    }
}

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1.5,
  spaceBetween: 24.05,
  initialSlide: 1,
  loop:true,
  breakpoints:{
    767:{
      slidesPerView:2.6,
      spaceBetween:40,
      initialSlide:1,
      loop:true
    }
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
});

Priceのコーディング

このセクションはtableタグを使って作っていきます。左側のセルはセル一つにクラスを一つ当ててスタイルを指定しているのでやや強引なコーディングになってるような気がします💦

できればnth-childなどを使えば行数が増えたりしても柔軟に対応しやすいと思います。

<section id="price">
     <div class="inner">
         <h2 class="price_title">Price</h2>
         <table>
             <tr>
                 <td class="price_table_left price_table_left1">row 1</td>
                 <td class="price_table_right">Price ¥10,000</td>
             </tr>
             <tr>
                 <td class="price_table_left price_table_left2">row 2</td>
                 <td class="price_table_right">Price ¥10,000</td>
             </tr>
             <tr>
                 <td class="price_table_left">row 3</td>
                 <td class="price_table_right">Price ¥10,000</td>
             </tr>
         </table>
         <p>※ 上記料金はサンプルです。</p>
     </div>
 </section>

#price {
  background: #f3f3f3;
}

#price .inner {
  padding-top: 74px;
  padding-bottom: 279px;
  width: 960px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  #price .inner {
    padding: 40px 16px 120px;
    width: auto;
  }
}

#price .price_title {
  font-size: 3.6rem;
  text-align: center;
  margin-bottom: 73px;
}

@media (max-width: 767px) {
  #price .price_title {
    font-size: 3rem;
    margin-bottom: 40px;
  }
}

#price table, #price tr, #price td {
  font-size: 2.0rem;
  border: 1px solid #3e3e3e;
}

#price table {
  margin-bottom: 23px;
  background: #ffffff;
}

@media (max-width: 767px) {
  #price table {
    margin-bottom: 14px;
  }
}

#price td {
  line-height: 58px;
}

#price .price_table_left {
  width: 30%;
  text-align: center;
  background: #3e3e3e;
  color: #ffffff;
}

#price .price_table_right {
  padding-left: 40px;
}

@media (max-width: 767px) {
  #price .price_table_right {
    padding-left: 30px;
  }
}

#price .price_table_left2, #price .price_table_left1 {
  border-bottom: 1px solid #ffffff;
}

#price p {
  font-size: 1.2rem;
}

Commentsのコーディング

背景が2色になっていたり、内容物が上下にずれていたりと少し複雑な作りになっているので、コーディングする前に完成形をしっかりイメージしてから書いていかないと、書いているうちにちぐはぐになってくると思います。imgはdivで囲んであげたほうが綺麗にレスポンシブするような気がしています。

<section id="comments">
     <div class="inner">
         <div class="comments_wrapper">
             <h2 class="comments_title">Comments</h2>
             <div class="comments_content">
                 <div class="comments_item">
                     <div class="comments_img">
                         <img src="/img/comments1.png" alt="">
                     </div>
                     <p>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p>
                 </div>
                 <div class="comments_item">
                     <div class="comments_img">
                         <img src="/img/comments2.png" alt="">
                     </div>
                     <p>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p>
                 </div>
             </div>
         </div>
         <div class="comments_main_img">
             <img src="img/comments3.png" alt="">
         </div>
     </div>
 </section>

#comments {
  background: linear-gradient(90deg, #3e3e3e 0%, #3e3e3e 71.7%, #ffffff 71.7%, #ffffff 100%);
}

@media (max-width: 767px) {
  #comments {
    background: #3e3e3e;
  }
}

#comments .inner {
　display: flex;
  max-width: 1213px;
  margin: 0 auto;
  padding: 0 16px;
}

#comments .comments_wrapper {
  background: #ffffff;
  padding: 74px 40px 111px;
  box-shadow: 0px 0px 10px #3e3e3e;
  transform: translateY(-150px);
}

@media (max-width: 767px) {
  #comments .comments_wrapper {
    padding: 40px 20px;
    transform: translateY(-60px);
    margin: 0 auto;
  }
}

#comments .comments_title {
  font-size: 3.6rem;
  text-align: center;
  text-align: left;
  margin-bottom: 73px;
}

@media (max-width: 767px) {
  #comments .comments_title {
    font-size: 3rem;
    margin-bottom: 40px;
  }
}

#comments .comments_item {
  display: flex;
}

#comments .comments_item:first-child {
  margin-bottom: 80px;
}

@media (max-width: 767px) {
  #comments .comments_item:first-child {
    margin-bottom: 40px;
  }
}

#comments .comments_img {
  margin-right: 50px;
}

@media (max-width: 767px) {
  #comments .comments_img {
    margin-right: 24px;
  }
}

#comments p {
  font-size: 1.6rem;
  max-width: 414px;
}

@media (max-width: 767px) {
  #comments p {
    font-size: 1.4rem;
  }
}

#comments .comments_main_img {
  transform: translateY(-24px);
}

@media (max-width: 767px) {
  #comments .comments_main_img {
    display: none;
  }
}

FAQsのコーディング

jQueryでアコーディオンを実装します。アコーディオンはテンプレートのコードをboostnoteに保存しておけば使い回しができて爆速になります。

<section id="qa">
     <div class="inner">
         <h2 class="qa_title">Q&A</h2>
         <!-- 1 -->
         <div class="qa_item">
             <div class="qa_q">
                 <div class="qa_q_right">
                     <p>Q</p>
                     <p>質問質問質問？</p>
                 </div>
                 <img class="plus" src="img/minus.svg" alt="">
             </div>
             <div class="qa_a">
                 <p>回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答</p>
             </div>
         </div>
         <!-- 2 -->
         <div class="qa_item">
             <div class="qa_q">
                 <div class="qa_q_right">
                     <p>Q</p>
                     <p>質問質問質問？ <br>また、質問は質問質問？</p>
                 </div>
                 <img class="plus" src="img/minus.svg" alt="">
             </div>
             <div class="qa_a">
                 <p>回答回答回答回答回答回答回答回答回答回答回答回答</p>
             </div>
         </div>
         <!-- 3 -->
         <div class="qa_item">
             <div class="qa_q">
                 <div class="qa_q_right">
                     <p>Q</p>
                     <p>質問質問質問？</p>
                 </div>
                 <img class="plus" src="img/plus.svg" alt="">
             </div>
             <div class="qa_a qa_a_none">
                 <p>回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答</p>
             </div>
         </div>
         <!-- 4 -->
         <div class="qa_item">
             <div class="qa_q">
                 <div class="qa_q_right">
                     <p>Q</p>
                     <p>質問質問質問？</p>
                 </div>
                 <img class="plus" src="img/plus.svg" alt="">
             </div>
             <div class="qa_a qa_a_none">
                 <p>回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答</p>
             </div>
         </div>
         <!-- 5 -->
         <div class="qa_item">
             <div class="qa_q">
                 <div class="qa_q_right">
                     <p>Q</p>
                     <p>質問質問質問？</p>
                 </div>
                 <img class="plus" src="img/plus.svg" alt="">
             </div>
             <div class="qa_a qa_a_none">
                 <p>回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答</p>
             </div>
         </div>
         <!-- 6 -->
         <div class="qa_item">
             <div class="qa_q">
                 <div class="qa_q_right">
                     <p>Q</p>
                     <p>質問質問質問？</p>
                 </div>
                 <img class="plus" src="img/plus.svg" alt="">
             </div>
             <div class="qa_a qa_a_none">
                 <p>回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答</p>
             </div>
         </div>
     </div><!-- inner -->
 </section>

#qa {
  background: url(../img/sunyu-kim-1053375-unsplash.png) center center/cover no-repeat;
}

#qa .inner {
  max-width: 1147px;
  margin: 0 auto;
  padding-top: 75px;
  padding-bottom: 87px;
}

@media (max-width: 767px) {
  #qa .inner {
    padding: 40px 16px;
  }
}

#qa .qa_title {
  font-size: 3.6rem;
  text-align: center;
  width: 616px;
  margin-left: auto;
  text-align: left;
  margin-bottom: 73px;
}

@media (max-width: 767px) {
  #qa .qa_title {
    width: auto;
    font-size: 3.0rem;
    text-align: center;
    margin-bottom: 40px;
  }
}

#qa .qa_item {
  background: #ffffff;
  width: 616px;
  border-radius: 7px;
  padding: 19px 17px 16px;
  margin-left: auto;
  margin-bottom: 40px;
  font-size: 1.6rem;
}

@media (max-width: 767px) {
  #qa .qa_item {
    width: auto;
  }
}

#qa .qa_item:last-child {
  margin-bottom: 0;
}

#qa .qa_a_none {
  display: none;
}

#qa .qa_q {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#qa .qa_q p:first-child {
  display: inline-block;
  text-align: center;
  border-radius: 13px;
  background: #4973ff;
  color: #ffffff;
  margin-right: 13px;
  width: 26px;
  height: 26px;
}

#qa .qa_q_right {
  display: flex;
  align-items: center;
}

#qa .qa_a {
  background: #e3eaff;
  padding: 18px 14px;
  border-radius: 7px;
  margin-top: 20px;
  line-height: 24px;
}

#qa .qa_img {
  vertical-align: middle;
}

$(function(){
//アコーディオン
$('.qa_item').click(function(){
  var $answer = $(this).find('.qa_a');
  if($answer.hasClass('open')){
    $answer.removeClass('open');
    $answer.slideUp();
    $(this).find('.plus').attr('src','/img/plus.svg');
  }else{
    $answer.addClass('open');
    $answer.slideDown();
    $(this).find('.plus').attr('src','/img/minus.svg');
  }
});
  
});

Accessのコーディング

GoogleMapの埋め込みをタテヨコ比を保ったままレスポンシブさせる必要があります。Mapが片側によっている時にpadding-topを何％にすればいいのかわからず苦戦しました。

ボタンの位置がPCの時とSPの時で異なるのでボタンはPC用とSP用に2つ作り片方を非表示にしています。

<section id="access">
     <div class="inner">
         <div class="access_content">
             <h2 class="access_title">Access</h2>
             <div class="access_text">
                 <p>〒106-6126 <br>東京都港区六本木 6丁目 10-1 <br>六本木ヒルズ森タワー</p>
             </div>
             <div>
                 <a href="#" class="access_button">Google Maps</a>
             </div>
         </div>
     <div class="access_map">         <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3279.7683900866277!2d137.72392801523256!3d34.71102128043183!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1573634548602!5m2!1sja!2sjp"             width="720" height="515" frameborder="0" style="border:0;" allowfullscreen=""></iframe>     </div>     <div class="access_button_sp_wrapper">         <a href="#" class="access_button_sp">Google Maps</a>     </div> </div>
 </section>

#access {
  background: linear-gradient(90deg, #3e3e3e 0%, #3e3e3e 71.7%, #ffffff 71.7%, #ffffff 100%);
  max-height: 569px;
}

@media (max-width: 767px) {
  #access {
    background: #3e3e3e;
    max-height: initial;
    max-height: auto;
  }
}

#access .inner {
  max-width: 1181px;
  margin: 0 auto;
  padding-top: 130px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 767px) {
  #access .inner {
    padding: 40px 16px;
    display: block;
  }
}

#access .access_title {
  font-size: 3.6rem;
  text-align: center;
  margin-bottom: 40px;
  line-height: 44px;
  text-align: left;
}

@media (max-width: 767px) {
  #access .access_title {
    font-size: 3.0rem;
  }
}

#access .access_text {
  font-size: 1.6rem;
  margin-bottom: 38px;
}

@media (max-width: 767px) {
  #access .access_text {
    font-size: 1.2rem;
    line-height: 21.3px;
    margin-bottom: 19px;
  }
}

#access .access_button {
  display: inline-block;
  font-size: 2.0rem;
  border: 1px solid #ffffff;
  padding: 15px 86px;
  letter-spacing: 2px;
}

@media (max-width: 767px) {
  #access .access_button {
    display: none;
  }
}

#access .access_button_sp_wrapper {
  text-align: center;
}

#access .access_button_sp {
  display: none;
}

@media (max-width: 767px) {
  #access .access_button_sp {
    letter-spacing: normal;
    display: inline-block;
    font-size: 1.8rem;
    border: 1px solid #ffffff;
    padding: 16px 102px;
    letter-spacing: 1.8px;
    white-space: nowrap;
  }
  #access .access_button_sp:hover {
    background: #ffffff;
    color: #3e3e3e;
    transition: all .3s ease;
  }
}

#access .access_content {
  width: 39.1%;
}

#access .access_map {
  position: relative;
  width: 720px;
  padding-top: 43.6%;
  /* = height ÷ width × 100 */
}

@media (max-width: 767px) {
  #access .access_map {
    width: 100%;
    padding-top: 70.2%;
    margin-bottom: 40px;
  }
}

#access .access_map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Contactのコーディング

フォームはハニワマンさんの記事を参考にreset.cssで初期値をリセットしておきます。その上で、コーディングしていきます。

HPcode フォームのCSSを初期化してオリジナルなデザインを再現しよう！

タイトル部分の背景画像は規定の画像では下に隙間ができてしまってうまくコーディングができませんでした。画像を別の物に変えると隙間ができなくなったので画像を編集しないとうまくコーディングができないのかなと思っています。画像が間違っているのでは？？💦💦💦

<section id="contact">
     <div class="inner">
         <div class="contact_wrapper">
             <div class="contact_title_wrapper">
                 <h2 class="contact_title">Contact Us</h2>
                 <p class="contact_title_p">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>
             </div>
             <div class="contact_content">
                 <form action="">
                     <div class="contact_content_item">
                         <p class="contact_kind">お問い合わせ種別</p>
                         <select name="" id="" class="select-test contact_kind_select">
                             <option disabled selected style="display:none;">選択してください</option>
                             <option>A</option>
                             <option>B</option>
                             <option>C</option>
                         </select>
                     </div>
                     <div class="contact_content_item">
                         <p class="contact_name">氏名</p>
                         <input type="text" class="text-test" placeholder="氏名">
                     </div>
                     <div class="contact_content_item">
                         <p class="contact_kana">フリガナ</p>
                         <input type="text" class="text-test" placeholder="フリガナ">
                     </div>
                     <div class="contact_content_item">
                         <p class="contact_mail">メールアドレス</p>
                         <input type="email" class="text-test" placeholder="sample@gmail.com">
                     </div>
                     <div class="contact_content_item contact_content_item_sex">
                         <p class="contact_sex">性別</p>
                         <label class="radio_men"><input class="radio-test" type="radio" name="radio-name"><span class="radio_men_check">男性</span></label>
                         <label><input class="radio-test" type="radio" name="radio-name"><span>女性</span></label>
                     </div>
                     <div>
                         <p class="contact_message">メッセージ</p>
                         <textarea class="textarea-text"></textarea>
                     </div>
                     <label class="label_check"><input class="check-test" type="checkbox" name="check-name"><span>個人情報保護方針に同意する</span></label>
                     <div class="contact_button">
                         <input class="submit-test" type="submit" value="送信する">
                     </div>
                 </form>
             </div>
         </div>
     </div>
 </section>

#contact {
  margin-top: 206px;
  background: url(../img/alex-blajan-159378-unsplash.png) center center/cover no-repeat;
}

@media (max-width: 767px) {
  #contact {
    margin-top: 0;
  }
}

#contact .inner {
  width: 960px;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 80.5px;
}

@media (max-width: 1080px) {
  #contact .inner {
    width: auto;
    padding: 40px 16px;
  }
}

.contact_wrapper {
  border-radius: 12px;
}

.contact_title_wrapper {
  padding-top: 63px;
  padding-bottom: 61.5px;
  text-align: center;
  color: white;
  font-size: 1.6rem;
  background: url(../img/mv.png) center/cover no-repeat;
  border-radius: 12px 12px 0 0;
}

@media (max-width: 767px) {
  .contact_title_wrapper {
    padding: 32px 16px 36px;
  }
}

.contact_title {
  font-size: 3.6rem;
  line-height: 1.2;
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .contact_title {
    font-size: 3rem;
    margin-bottom: 10px;
  }
}

.contact_title_p {
  line-height: 1.32;
}

@media (max-width: 767px) {
  .contact_title_p {
    display: inline-block;
    text-align: left;
    font-size: 1.4rem;
  }
}

.contact_content {
  background-color: #ffffff;
  font-size: 2.2rem;
  line-height: 1.32;
  padding: 58px 90px 39px;
  border-radius: 0 0 12px 12px;
}

@media (max-width: 767px) {
  .contact_content {
    font-size: 1.6rem;
    padding: 40px 16px;
  }
}

.contact_content_item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-bottom: 41px;
}

@media (max-width: 767px) {
  .contact_content_item {
    flex-direction: column;
    align-items: stretch;
  }
}

.contact_kind {
  margin-right: 99px;
}

@media (max-width: 767px) {
  .contact_kind {
    margin-bottom: 10px;
  }
}

.contact_kind_select {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 20px;
  font-size: 1.8rem;
  line-height: 1.27;
  width: 261px;
  height: 32px;
}

@media (max-width: 767px) {
  .contact_kind_select {
    width: auto;
  }
}

.contact_name {
  position: relative;
  margin-right: 231px;
}

@media (max-width: 767px) {
  .contact_name {
    margin-bottom: 10px;
  }
}

.contact_name::after {
  position: absolute;
  content: '必須';
  top: 50%;
  transform: translateY(-12px);
  left: 140px;
  color: #ffffff;
  background: #ff4646;
  font-size: 1.6rem;
  line-height: 24px;
  width: 55px;
  height: 24px;
  border-radius: 5px;
  text-align: center;
}

@media (max-width: 767px) {
  .contact_name::after {
    left: 52px;
  }
}

.contact_kana {
  position: relative;
  margin-right: 187px;
}

@media (max-width: 767px) {
  .contact_kana {
    margin-bottom: 10px;
  }
}

.contact_kana::after {
  position: absolute;
  content: '必須';
  top: 50%;
  transform: translateY(-12px);
  left: 141px;
  color: #ffffff;
  background: #ff4646;
  font-size: 1.6rem;
  line-height: 1.41;
  width: 55px;
  height: 24px;
  border-radius: 5px;
  text-align: center;
}

@media (max-width: 767px) {
  .contact_kana::after {
    left: 84px;
  }
}

.contact_mail {
  margin-right: 121px;
}

@media (max-width: 767px) {
  .contact_mail {
    margin-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .contact_content_item_sex {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.contact_sex {
  margin-right: 231px;
}

@media (max-width: 767px) {
  .contact_sex {
    margin-right: 0;
    width: 100%;
    margin-bottom: 10px;
  }
}

.radio_men {
  margin-right: 60px;
}

.contact_message {
  margin-bottom: 10px;
}

.textarea-text {
  margin-bottom: 18px;
}

@media (max-width: 767px) {
  .textarea-text {
    height: 160px;
  }
}

.contact_check {
  margin-bottom: 30px;
}

.label_check {
  font-size: 1.8rem;
  line-height: 1.27;
}

.submit-test {
  font-size: 1.8rem;
  background-color: #ffaa3b;
  color: #ffffff;
  border-radius: 10px;
  margin-top: 30px;
  padding: 12px 50px;
}

.submit-test:hover {
  background: #d47800;
  transition: all 0.3s ease;
}

@media (max-width: 767px) {
  .submit-test {
    padding: 13.5px 24px;
  }
}

.contact_button {
  text-align: left;
}

.text-test:hover,
.select-test:hover,
.textarea-text:hover,
.check-test:hover {
  border: #4973ff 1px solid;
  transition: all .3s ease;
  box-shadow: 0 0 4px #4973ff;
}

.text-test:focus,
.select-test:focus,
.textarea-text:focus,
.check-test:focus {
  border: #4973ff 1px solid;
  box-shadow: 0 0 4px #4973ff;
}

.radio-test + span:hover::before,
.check-test + span:hover::before {
  border: #4973ff 1px solid;
  transition: all .3s ease;
  box-shadow: 0 0 4px #4973ff;
}

footerのコーディング

footerは基本並べるだけです。

TwitterマークとFacebookのマークはfontAwesomeを使います。

右側のサイトロゴ「HANIWAMAN Corp.」のフォント「Berlin Sans FB」がよくわからずGoogleフォントでもありませんでした。

<section id="footer">
     <div class="inner">
         <div class="footer_left">
             <div class="footer_sns">
                 <i class="fab fa-twitter fa-6x"></i>
                 <i class="fab fa-facebook-square fa-6x"></i>
             </div>
             <div class="footer_link">
                 <a href="#" class="footer_link_sitemap">サイトマップ</a>
                 <a href="#">個人情報保護方針</a>
                 <a href="#" class="footer_link_privacy">プライバシーポリシー</a>
             </div>
         </div>
         <div class="footer_right">
             <a href="#">HANIWAMAN Corp.</a>
             <p>© Haniwaman Landing page Sample.</p>
         </div>
     </div>
 </section>

#footer {
  background: #3e3e3e;
  color: #f3f3f3;
}

#footer .inner {
  width: 1180px;
  margin: 0 auto;
  padding-top: 120px;
  padding-bottom: 120px;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 1080px) {
  #footer .inner {
    width: auto;
  }
}

@media (max-width: 767px) {
  #footer .inner {
    flex-direction: column;
    padding-bottom: 92px;
  }
}

.footer_left {
  text-align: center;
}

.footer_sns {
  margin-bottom: 40px;
  text-align: left;
}

@media (max-width: 767px) {
  .footer_sns {
    text-align: center;
  }
}

.fa-twitter {
  margin-right: 20px;
}

@media (max-width: 767px) {
  .fa-twitter {
    margin-right: 132px;
  }
}

.footer_link {
  display: flex;
  flex-direction: column;
  font-size: 1.8rem;
  line-height: 1.27;
  text-align: left;
}

@media (max-width: 767px) {
  .footer_link {
    text-align: center;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 1.4rem;
    margin-bottom: 55px;
  }
}

.footer_link a {
  margin-bottom: 20px;
}

.footer_link .footer_link_sitemap {
  margin-right: 68px;
}

@media (max-width: 767px) {
  .footer_link .footer_link_privacy {
    width: 100%;
  }
}

.footer_right {
  text-align: right;
}

@media (max-width: 767px) {
  .footer_right {
    text-align: center;
  }
}

.footer_right a {
  display: block;
  font-size: 4.4rem;
  line-height: 1.32;
  letter-spacing: 0;
  margin-top: 43px;
  margin-bottom: 18px;
}

@media (max-width: 767px) {
  .footer_right a {
    font-size: 3.44rem;
    margin-bottom: 8px;
  }
}

.footer_right p {
  font-size: 1.2rem;
}

.floating {
  z-index: 1;
  position: fixed;
  bottom: 38px;
  right: 93px;
}

@media (max-width: 767px) {
  .floating {
    bottom: 16px;
    right: 16px;
  }
}