見出し画像

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

ユウマ

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

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

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


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

前回STEP1では、制作準備〜メインビューコーディングまでを行ってきました。

今回のSTEP2では、ABOUT 〜 WORKSセクションまでのコーディングを一気に進めていきます。

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

画像1

ボリューム的にはSTEP2が一番多く大変かと思いますが、ここを乗り越えれば残すはCONTACTとフッターのコーディングのみになるので、頑張っていきましょう！

それでは早速、続きを進めていきましょう！


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

ABOUTセクションのコーディングを行う前に、bodyタグ内の主要コンテンツを表すmainタグを挿入していきます。

▼ index.html

<!DOCTYPE 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>
 </main>
 <!-- 新しく追加した箇所 -->

</body>
</html>

これからコーディングしていく、ABOUT〜CONTACTセクションのコードに関しては、ここで挿入したmainタグの中に記述していきましょう。


mainタグを挿入し終えたら、ABOUTセクションのコーディングに入っていきます。

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

画像2


1-1. HTMLコーディング

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

▼ index.html

<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>


1-2. CSSコーディング

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

▼ style.css

/* 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;
}

ここでポイントですが、このABOUTセクションでは「position: relative;」を使うことで、画像部分とテキスト部分に64px分のズレを生じさせていています。

画像4

▼ ズレを生じさせている部分

.about-content__text-box {
 position: relative;
 top: 64px;
}

そしてこの64px分のズレを埋めるために、「.about」クラス直下の「.full-container」クラスに対して、64px分の下余白（padding）を追加しています。

▼ セクションの余白を調整

.about > .full-container {
 padding: 80px 0 calc(64px + 80px);
}

少々応用的な使い方なのでややこしいかもしれませんが、様々な場面で役立つので覚えておきましょう。


◆2. SERVICEセクションコーディング

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

画像3


2-1. HTMLコーディング

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

▼ index.html

<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>

少しHTML構造がややこしくなってきましたね。。
頑張って進んでいきましょう！


2-2. CSSコーディング

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

▼ style.css

/* 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;
}

CSS側も、これまでと違い少々レベルアップです。

初心者がつまずきやすそうな部分について、軽く解説を挟みます。


まず以下の「calc()」関数について。

.service-card {
 width: calc(100% / 3);
}

上記のコードは、SERVICEセクションにある各カードの横幅を、「.container」クラスの横幅である1080px ÷ 3で算出しています。

画像5

わざわざ自力で計算しなければいけないような場面でも、calc関数を利用することで、このように算出することができるので大変便利です。


次に「box-shadow」について。

box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;

初心者の方からすれば、正直何がなんだかサッパリだと思います。

安心して下さい。それが正常です。そして、わざわざ覚える必要もありません。


ここで利用したbox-shadow値に関しては、以下のサイトから引っ張ってきています。

上記サイトを開くと様々な「box-shadow」のサンプルが表示されるので、気に入ったものをクリックすることで、box-shadow値がまるっとクリップボードにコピーされます。

ちなみに利用しているのはコレ。

スクリーンショット 2021-06-01 14.57.48

このようなCSSコーディングの手助けをしてくれるツールはbox-shadowだけに留まらず、色々な種類のツールが存在していますので、興味のある方はぜひ調べて見て下さいね！

ちなみに私のブログ内でも軽くご紹介しています。

✅ Tips
CSSの値はわざわざ細かく覚えなくて良い。効率化を図るために、便利なジェネレーターツールをガンガン探し出して利用するべし。


◆3. WORKSセクションコーディング

さて、いよいよSTEP2内での最後のセクション、WORKSセクションをコーディングしていきます。

コーディングする箇所は以下の場所です。

画像7

一見簡単そうにも見えますが、ここでは「CSS Grid Layout」を使ってコーディングを進めていきます。

感覚を掴むのが少々難しいかもしれませんが、頑張って進めていきましょう！

3-1. HTMLコーディング

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

▼ index.html

<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>


3-2. CSSコーディング

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

▼ style.css

/* 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;
}

Grid Layoutのコーディングを始めて見たは、きっとこのままPCをシャットダウンしたくなるような内容でしょう。

シャットダウンする前に、なんとか諦めずに解説を見て進めてみて下さい...！


まずは、以下のコードから。

.works-content {
 display: grid;
 grid-template-rows: 277px 277px;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-gap: 24px 15px;
}

このコードは「.works-content」内をグリッド（2次元レイアウト）に変更するためのコードです。

まず「display: grid;」でグリッドレイアウトを使うことを宣言し、 「grid-template-rows」で行の幅を指定。「grid-template-columns」で列の幅を指定しています。

そして「grid-gap」にて、グリッド間の余白を指定しているという訳です。

.works-content {
 /* CSS Grid Layoutを使用 */
 display: grid;
 
 /* 行の幅を指定（277pxの行が2つ） */
 grid-template-rows: 277px 277px;
 
 /* 列の幅を指定（枠に合わせたサイズの列「1fr」を4つ生成） */
 grid-template-columns: 1fr 1fr 1fr 1fr;
 
 /* グリッド間の余白を指定（上下24px, 左右15px） */
 grid-gap: 24px 15px;
}


次に、各画像に指定している以下のコードについて。

grid-row: 1 / 2;
grid-column: 1 / 2;

これは、生成したグリッドの、どの部分に要素を配置するのか？を指定しているコードになります。

分かりやすく生成したグリッドに対して番号を振ったので、ご覧下さい。

画像8


上記の画像を確認した上で、一枚目の白い猫の画像に関して見てみると、

.work-img:nth-of-type(1) {
 grid-row: 1 / 2;
 grid-column: 1 / 3;
}

このように指定しているので、「行の1〜2まで」&「列の1~3まで」という指定ができていることが分かりますね。


長くなってしまうので簡易的に説明を挟みましが、「CSS Grid Layout」についてもっと知りたい！という方は、以下の記事が参考になりますよ。


◆今回のおさらい & コード確認

ここまでで、STEP2の内容のABOUT〜WORKSセクションまでのコーディングが終了しました。

最後にSTEP2まででコーディングした内容の、全体像を確認しましょう。

▼ 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>
 </main>

</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;
}


◆最後のステップへ

お疲れ様でした！最もボリュームの多いSTEP2を終えることができました。

STEP2ではflexboxやposition、grid layoutについて一気に触れたので、頭がいっぱいいっぱいかと思います。

ぜひ一度休憩を挟みましょう。


なお前回に引き続き、Twitterシェアにて完了報告や感想ツイートを行っていただけた方には、限定特典をご用意しております。

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

今回コーディングした部分は、特に初心者の方がつまずきやすいポイントだと思うので、ぜひサポート特典を利用していただければと思います。


残すところはCONTACT〜フッターのコーディングのみです！

甘いお菓子でも食べて一息ついてから、最後のSTEP3へと進んでチャレンジしていって下さいね！

▼ STEP3へ進む




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