見出し画像

【無料】初心者のためのコーディング練習STEP3【デザインカンプ付き】

ユウマ

こんにちは、ユウマ(@yuuuma_11)です。

本noteは「初心者のためのコーディング練習STEP2」の続きとなります。
※もしまだSTEP2の方を終えていない方は、まずSTEP2から始めてみて下さいね！

▼ 初心者のためのコーディング練習STEP2


◆前回のおさらい & 今回コーディングする箇所

前回のSTEP2では、ABOUT 〜 WORKSセクションまでのコーディングを一気に行いました。

いよいよ最後の3STEP目では、残りの「CONTACT 〜 フッター」までのコーディングを終わらせていきます。


デザインでいうところの、以下の部分です。

画像1

ボリュームは少ないですが、フォーム部分に関しては比較的実践的なデザインで制作しているので、初心者の方からすると少々難しいかと思います。

これまでと同様しっかりコードを掲載していきますので、コードとデザインを照らし合わせて、どこがどう作用しているのかを見極めていきましょう。

それでは最後のコーディング作業、頑張って進めていきましょう！


◆1. CONTACTセクションコーディング

ここでコーディングするCONTACTセクションとは、以下画像の部分です。

画像2


1-1. HTMLコーディング

index.htmlに、CONTACTセクションをコーディングしていきましょう。

▼ index.html

<section id="contact" class="contact">
  <div class="full-container">
    <h2 class="heading">CONTACT<br><span>お問い合わせ</span></h2>
    <form class="form">
      <table class="form-table">
        <tr class="form-table__tr">
          <th class="form-table__th"><span class="required">必須</span>お名前</th>
          <td class="form-table__td">
            <input class="form-table__input" type="text" name="name" placeholder="お名前">
          </td>
        </tr>
        <tr class="form-table__tr">
          <th class="form-table__th"><span class="required">必須</span>メールアドレス</th>
          <td class="form-table__td">
            <input class="form-table__input" type="email" name="email" placeholder="メールアドレス">
          </td>
        </tr>
        <tr class="form-table__tr">
          <th class="form-table__th"><span class="any">任意</span>お問い合わせ件名</th>
          <td class="form-table__td">
            <input class="form-table__input" type="text" name="tel" placeholder="お問い合わせ件名">
          </td>
        </tr>
        <tr class="form-table__tr">
          <th class="form-table__th"><span class="required">必須</span>お問い合わせ内容</th>
          <td class="form-table__td">
            <textarea class="form-table__input" name="" id="" cols="30" rows="10" placeholder="お問い合わせ内容"></textarea>
          </td>
        </tr>
      </table>
      <input type="submit" class="form-submit" value="送信する">
    </form>
  </div>
</section>

上記コードでは、フォーム内に「table」タグを利用していますが、ここは「div」で制作しても特に問題ありません。やりやすい方法でコーディングしてみて下さい。


1-2. CSSコーディング

styl.cssに、CONTACTセクションのスタイルを適用していきましょう。

▼ style.css

/* CONTACTセクション
====================================================*/
.contact > .full-container {
 padding: 80px 0 160px;
 background: #5e7a8f;
}
.contact .heading {
 color: #fff;
}
.form {
 margin: 0 auto;
 padding: 56px 80px;
 width: 980px;
 height: auto;
 border-radius: 10px;
 background: #fff;
}
.form-table {
 width: 100%;
}
.form-table__tr {
 display: flex;
 align-items: center;
 padding: 32px 0;
 border-top: 1px solid #ededed;
}
.form-table__tr:last-of-type {
 padding-bottom: 0;
}
.form-table__th {
 max-width: 250px;
 width: 100%;
 font-weight: normal;
}
.form-table__th > .required, .form-table__th > .any {
 margin-right: 8px;
 padding: 4px 8px;
 border-radius: 4px;
 color: #fff;
 font-size: 12px;
}
.form-table__th > .required {
 background: #db5b5b;
}
.form-table__th > .any {
 background: #5bb4db;
}
.form-table__td {
 max-width: calc(100% - 250px);
 width: 100%;
 font-weight: normal;
}
.form-table__input {
 padding: 12px 16px;
 width: 100%;
 border: 1px solid #767676;
 font-size: 14px;
 resize: none;
}
.form-submit {
 margin-top: 64px;
 padding: 24px 0;
 width: 100%;
 border-radius: 10px;
 background: #000;
 color: #fff;
 text-align: center;
}

CSS側の記述量が多く、それぞれの要素の横幅感もイマイチ分かりにくいと思うので、一旦横幅のpx数を記述した画像を貼り付けます。

画像3

フォーム本体は横幅980pxにしており、フォームの項目名は横幅250px。

そして「input」タグ部分は、フォーム本体の横幅（100% = 980px）から、フォームの項目名の横幅（250px）を差し引いた横幅にしています。


◆2. フッターコーディング

ここまで来ればもう終わりと言っても過言ではありません。

最後にコーディングしていくフッターは、以下画像の部分です。

画像4

ここまでの内容を終わらせてきた方なら、一瞬でコーディングできると思いますので、最後はサクッと終わらせていきましょう。


2-1. HTMLコーディング

index.htmlに、フッターをコーディングしていきましょう。

▼ index.html

<footer class="footer">
  <p>© Copyright XXXX 2021 All Right Reserved</p>
</footer>


2-2. CSSコーディング

styl.cssに、フッターのスタイルを適用していきましょう。

▼ style.css

/* フッター
====================================================*/
.footer {
 height: 60px;
 background: #000;
 text-align: center;
}
.footer > p {
 color: #fff;
 font-size: 12px;
 line-height: 60px;
}

HTML・CSSともにボリューム感は最も少なく、一瞬でコーディングできますね！


◆これまでのおさらい & 完成コード確認

STEP1〜STEP3で、1つのサイトが完成しました。

最後に、完成したコードの答え合わせといきましょう！

▼ index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beginner Coding</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/destyle.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header id="top" class="header">
  <div class="container">
    <a href="/"><img src="images/logo.svg" alt="LOGO"></a>
    <ul class="header-nav">
      <li class="header-nav__item"><a href="#top">TOP</a></li>
      <li class="header-nav__item"><a href="#about">ABOUT</a></li>
      <li class="header-nav__item"><a href="#service">SERVICE</a></li>
      <li class="header-nav__item"><a href="#works">WORKS</a></li>
      <li class="header-nav__item"><a href="#contact">CONTACT</a></li>
    </ul>
  </div>
</header>

<div class="mv"></div>

<main>
  <section id="about" class="about">
    <div class="full-container">
      <h2 class="heading">ABOUT<br><span>私について</span></h2>
      <div class="about-content">
        <img src="images/about-img.png" alt="プロフィール画像" class="about-content__img">
        <div class="about-content__text-box">
          <h3>ここに見出しが入ります</h3>
          <p>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。</p>
          <p>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。</p>
          <p>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。</p>
        </div>
      </div>
    </div>
  </section>

  <section id="service" class="service">
    <div class="container">
      <h2 class="heading">SERVICE<br><span>サービス内容</span></h2>
      <div class="service-cards">
        <div class="service-card">
          <div class="service-card__img"><span class="service-card__title">TITLE</span></div>
          <div class="service-card__text-box">
            <p>ここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入ります。</p>
          </div>
        </div>
        <div class="service-card">
          <div class="service-card__img"><span class="service-card__title">TITLE</span></div>
          <div class="service-card__text-box">
            <p>ここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入ります。</p>
          </div>
        </div>
        <div class="service-card">
          <div class="service-card__img"><span class="service-card__title">TITLE</span></div>
          <div class="service-card__text-box">
            <p>ここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入りますここに本文が入ります。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="works" class="works">
    <div class="full-container">
      <h2 class="heading">WORKS<br><span>制作実績</span></h2>
      <div class="works-content">
        <img src="./images/work-img01.png" alt="制作実績" class="work-img">
        <img src="./images/work-img02.png" alt="制作実績" class="work-img">
        <img src="./images/work-img03.png" alt="制作実績" class="work-img">
        <img src="./images/work-img04.png" alt="制作実績" class="work-img">
        <img src="./images/work-img05.png" alt="制作実績" class="work-img">
        <img src="./images/work-img06.png" alt="制作実績" class="work-img">
      </div>
    </div>
  </section>
  
  <section id="contact" class="contact">
    <div class="full-container">
      <h2 class="heading">CONTACT<br><span>お問い合わせ</span></h2>
      <form class="form">
        <table class="form-table">
          <tr class="form-table__tr">
            <th class="form-table__th"><span class="required">必須</span>お名前</th>
            <td class="form-table__td">
              <input class="form-table__input" type="text" name="name" placeholder="お名前">
            </td>
          </tr>
          <tr class="form-table__tr">
            <th class="form-table__th"><span class="required">必須</span>メールアドレス</th>
            <td class="form-table__td">
              <input class="form-table__input" type="email" name="email" placeholder="メールアドレス">
            </td>
          </tr>
          <tr class="form-table__tr">
            <th class="form-table__th"><span class="any">任意</span>お問い合わせ件名</th>
            <td class="form-table__td">
              <input class="form-table__input" type="text" name="tel" placeholder="お問い合わせ件名">
            </td>
          </tr>
          <tr class="form-table__tr">
            <th class="form-table__th"><span class="required">必須</span>お問い合わせ内容</th>
            <td class="form-table__td">
              <textarea class="form-table__input" name="" id="" cols="30" rows="10" placeholder="お問い合わせ内容"></textarea>
            </td>
          </tr>
        </table>
        <input type="submit" class="form-submit" value="送信する">
      </form>
    </div>
  </section>
</main>

<footer class="footer">
  <p>© Copyright XXXX 2021 All Right Reserved</p>
</footer>

</body>
</html>

▼ style.css

@charset "UTF-8";

/* 共通
====================================================*/
* {
 font-family: 'Noto Sans JP', sans-serif;
}
body {
 background: #fafafa;
}
p {
 line-height: 1.6;
}
.full-container {
 padding: 80px 0;
 width: 100%;
 height: 100%;
}
.container {
 margin: 0 auto;
 padding: 80px 0;
 width: 1080px;
 height: 100%;
}
.heading {
 margin-bottom: 64px;
 text-align: center;
 font-weight: bold;
 font-size: 40px;
}
.heading > span {
 position: relative;
 top: -16px;
 font-weight: normal;
 font-size: 14px;
}

/* ヘッダー
====================================================*/
.header {
 height: 80px;
 background: #fff;
}
.header > .container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0;
}
.header-nav {
 display: flex;
}
.header-nav__item {
 margin-right: 56px;
 font-weight: bold;
}
.header-nav__item:last-of-type {
 margin-right: 0;
}

/* メインビジュアル
====================================================*/
.mv {
 width: 100%;
 height: calc(100vh - 80px);
 background: url(../images/main-view.png);
 background-attachment: fixed;
 background-position: center;
 background-size: cover;
}

/* ABOUTセクション
====================================================*/
.about > .full-container {
 padding: 80px 0 calc(64px + 80px);
}
.about-content {
 display: flex;
 width: 100%;
 height: 385px;
}
.about-content__img {
 width: 50%;
 height: 100%;
}
.about-content__text-box {
 position: relative;
 top: 64px;
 padding: 40px;
 width: 50%;
 height: 100%;
 background: #5e7a8f;
}
.about-content__text-box > h3, .about-content__text-box > p {
 color: #fff;
}
.about-content__text-box > h3 {
 font-weight: bold;
 font-size: 24px;
}
.about-content__text-box > p {
 margin-top: 32px;
 font-size: 14px;
}

/* SERVICEセクション
====================================================*/
.service-cards {
 display: flex;
 justify-content: space-between;
}
.service-card {
 padding: 0 16px;
 width: calc(100% / 3);
 border-left: 1px dotted #707070;
}
.service-card:last-of-type {
 border-right: 1px dotted #707070;
}
.service-card__img {
 position: relative;
 width: 100%;
 height: 183px;
 background: url(../images/service-img.png);
 background-position: center;
 background-size: cover;
 box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
}
.service-card__title {
 position: absolute;
 top: 8px;
 right: -4px;
 padding: 4px 32px;
 background: #000;
 box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
 color: #fff;
}
.service-card__text-box {
 margin-top: 24px;
 text-align: justify;
}
.service-card__text-box > p {
 font-size: 14px;
}

/* WORKSセクション
====================================================*/
.works > .full-container {
 padding: 80px 30px 160px;
}
.works-content {
 display: grid;
 width: 100%;
 grid-template-rows: 277px 277px;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-gap: 24px 15px;
}
.work-img {
 width: 100%;
 height: 100%;
 box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
 object-fit: cover;
}
.work-img:nth-of-type(1) {
 grid-row: 1 / 2;
 grid-column: 1 / 3;
}
.work-img:nth-of-type(2) {
 grid-row: 1 / 2;
 grid-column: 3 / 4;
}
.work-img:nth-of-type(3) {
 grid-row: 1 / 2;
 grid-column: 4 / 5;
}
.work-img:nth-of-type(4) {
 grid-row: 2 / 3;
 grid-column: 1 / 2;
}
.work-img:nth-of-type(5) {
 grid-row: 2 / 3;
 grid-column: 2 / 3;
}
.work-img:nth-of-type(6) {
 grid-row: 2 / 3;
 grid-column: 3 / 5;
}

/* CONTACTセクション
====================================================*/
.contact > .full-container {
 padding: 80px 0 160px;
 background: #5e7a8f;
}
.contact .heading {
 color: #fff;
}
.form {
 margin: 0 auto;
 padding: 56px 80px;
 width: 980px;
 height: auto;
 border-radius: 10px;
 background: #fff;
}
.form-table {
 width: 100%;
}
.form-table__tr {
 display: flex;
 align-items: center;
 padding: 32px 0;
 border-top: 1px solid #ededed;
}
.form-table__tr:last-of-type {
 padding-bottom: 0;
}
.form-table__th {
 max-width: 250px;
 width: 100%;
 font-weight: normal;
}
.form-table__th > .required, .form-table__th > .any {
 margin-right: 8px;
 padding: 4px 8px;
 border-radius: 4px;
 color: #fff;
 font-size: 12px;
}
.form-table__th > .required {
 background: #db5b5b;
}
.form-table__th > .any {
 background: #5bb4db;
}
.form-table__td {
 max-width: calc(100% - 250px);
 width: 100%;
 font-weight: normal;
}
.form-table__input {
 padding: 12px 16px;
 width: 100%;
 border: 1px solid #767676;
 font-size: 14px;
 resize: none;
}
.form-submit {
 margin-top: 64px;
 padding: 24px 0;
 width: 100%;
 border-radius: 10px;
 background: #000;
 color: #fff;
 text-align: center;
}

/* フッター
====================================================*/
.footer {
 height: 60px;
 background: #000;
 text-align: center;
}
.footer > p {
 color: #fff;
 font-size: 12px;
 line-height: 60px;
}


◆最後に

お疲れ様でした！ここまでの内容で、STEP1 〜 STEP3までの全工程を終えることができました！

難易度的にはいかがでしたでしょうか？

今回のデザインは、当初私がプログラミングを始めたばかりの頃を必死に思い返しながら、「このくらいならいけるかな...？」という絶妙なレベル感を探りつつ制作させていただきました。

私自身、学習や実務を重ねてきて初学者の方の気持ちが正直分からなくなってしまっている部分もあるので、「いやいや、ここ難しすぎぃ...！！」といった部分があればTwitterのDMなどからご意見をいただけると助かります。


また、ぜひTwitterシェアボタンより感想や完了報告をいただけると、とても励みになります！そしてその際「@yuuuma_11」とメンションを付けていただけると、こちらからも気づきやすくなるのでコメント等させていただきます。


なお今回のシリーズでは、Twitterシェアにて完了報告や感想ツイートを行っていただけた方には、ささやかながらサポート特典をご用意しております。

✅ 限定特典について
本noteのTwitterシェア後、ご希望の方には公式LINEにて無料個別サポートを行わせていただきます。ご希望の方はTwitterのDMにて「note限定特典サポート希望」と一言ご連絡下さい。
※ 私1人で対応できなくなった時点で受付終了とさせていただきますので、ご希望の方はお早めにご連絡下さいませ。

僕がプログラミングを始めたばかりの頃は「もっと気軽に相談できる人がいればなぁ...」なんて悩んでいた時期もあったので、今回無料でサポートさせていただくという特典を用意させていただきました。

※私１人で全ての人を対応することになるので、必然的にキャパオーバーになった時点で新規の受付は終了とさせていただきます。予めご了承下さいませ。


今後に関してはは、今回制作したデザインの「レスポンシブコーディング編」や、更にレベルを上げた「中〜上級コーディング練習」などの教材も制作していくつもりです。

新作情報キャッチのために、ぜひnoteアカウントやTwitterアカウントのフォローをしていただければ幸いです。


また、ちょっとした宣伝にはなりますが、個人ブログでもプログラミング関連の情報を色々更新したりしてるので、ぜひ興味のある方はご覧いただけると喜びます。


それでは改めて、コーディング練習お疲れ様でした...！



この記事が気に入ったらサポートをしてみませんか？