\案件獲得に直結する！/ 挫折知らずの模写コーディング完全攻略テキスト

はじめに

まずは、このテキストを手に取ってくれてありがとうございます。
数ある情報の中から、ここまでたどり着いてくれたことを本当にうれしく思っています。

改めて自己紹介をすると、僕はかかしといいます。

プログラミング教育コミュニティ「ProNavi」を運営し、これまでに800名以上をサポートしてきました。

僕らのコミュニティでは、案件獲得率93％・挫折率1.3％・満足度99％という数字を叩き出しています。

かつて僕自身も独学でつまずき、模写で何度も心が折れかけた人間です。

だからこそ、今は同じように挑戦している人が挫折せずに前へ進めるよう、全力でサポートしています。

僕が800名以上を見てきて痛感しているのが、「模写コーディング」がプログラミング学習の最大の壁だということです。

HTML/CSSを学び終え、いざ模写を始めた瞬間、、
コードがぐちゃぐちゃになり、デザインが崩れる。

「どこから手をつけていいか分からない」「自分は向いてないかも」と不安になる。

そして、この段階で3〜4割が静かに学習をやめていく。
最終的に8〜9割が案件にたどり着く前に挫折する。

でも、これはあなたの才能の問題じゃありません。

ほとんどの人が、模写を“ただ写す練習”だと誤解したまま取り組んでしまっているだけです。

模写は、単なるトレースではありません。

コード設計、構造の理解、実務で通用する力を最短で鍛える、極めて重要なフェーズです。

僕は、模写で挫折してしまう人を何度も見てきました。

そして同時に、正しいやり方でこの壁を突破した人たちが、その後案件獲得や実務レベルのスキル習得へ最短で進んでいく姿も数えきれないほど見てきました。

だから、このテキストを作りました。

ここには、僕が800名以上をサポートしてきた経験から導き出した、模写コーディングのカラクリと、誰でも突破できる再現性のある手順をすべてまとめています。

模写を怖いものから「自分の成長を実感できる武器」に変えるための道筋です。

このテキストを読み終えたとき、あなたは、、

模写を制する者は、案件を制する。

これは大げさでもなんでもありません。

模写の攻略法を知らずに挑戦して挫折してしまう人を、僕はあまりに多く見てきたからです。

あなたには同じ道を歩んでほしくない。

ぜひこのテキストを使いこなして、最短で実践力を手に入れてください。

ここからが、本当のスタートです。

模写コーディングとは？

模写コーディングとは？
既存のウェブサイトやアプリケーションのデザインや構造をそのまま真似して再現する練習方法のことです。言い換えると、実際に存在するプロダクトを参考にして、同じようなコードを書き、同じ見た目や機能を作るプロセスを指します。

たとえば、「シンプルなブログのページ」や「洗練された企業サイト」を見て、そのレイアウトや動きをどのように実現しているのかを探りながら、ゼロから自分の手で再現していく作業です。

なぜ模写をする必要があるのか？

模写コーディングをする目的は単に「真似すること」ではなく、プロが作った実際のプロダクトを通じて、基礎から応用まで幅広いスキルを効率よく学ぶためです。

1. 基礎技術を体得できる
模写をすることで、HTMLやCSS、JavaScriptといったフロントエンド技術の基本的な使い方を実践的に学ぶことができます。特に初心者にとって、教科書のサンプルコードだけでは分からない「実際の使い方」や「技術のつながり」を体感できます。これは模写でしか感じることができないのでいろんな応用のスキルを習得しましょう。

2. 構造や設計思想を学べる
ウェブサイトやアプリは、デザインの美しさだけでなく、使いやすさや効率を考慮して作られています。模写を通じて、「どのようにHTMLが構造化されているか」「CSSでどのようにデザインが実現されているか」など、実践的な設計思想を学ぶことができます。

3. 問題解決力が鍛えられる
模写を進めていく中で、必ず「うまく再現できない部分」が出てきます。そのたびに、自分で考えたり、調べたり、試行錯誤を繰り返すことで、問題解決力が磨かれます。このプロセス自体が、実際の現場で役立つスキルになります。

4. 手を動かすことで記憶に残る
プログラミングでは特に重要視しているのがアウトプットメインの勉強法です。テストでもテスト勉強だけして試験がないとどこの勉強が甘かったのか？自分が何を覚えれていないのか？など明確な課題は見えてこないと思います。そのため、実際に手を動かしてコードを書くアウトプットが重要です。模写はコードを書く量を増やし、自然と記憶に定着させる効果があります。

5. デザインとコーディングの一体感を理解できる
模写を行うことで、デザインを実際のコードに落とし込むプロセスを学ぶことができます。たとえば、「このボタンの影はどのようにCSSで実現するのか？」や、「この動きはJavaScriptでどのようにプログラムされているのか？」など、デザインとコーディングがどのように結びついているかを理解できます。

模写コーディングから得られる学び

模写コーディングを行うことで得られる学びは多岐にわたります。以下に具体例を挙げます。

1. 現場感覚の習得
実際に使われているサイトを模写することで、最新のトレンドや現場でよく使われる技術スタックを身につけることができます。例えば、レスポンシブデザイン（画面サイズに応じたデザインの調整）や、モダンなCSSフレームワークの活用方法などです。

2. アウトプットの経験
模写は、単なる練習ではなく「完成物」を作るプロセスです。完成したものは自分のポートフォリオにもなり、後々転職活動やプロジェクト提案に役立てることができます。

3. 細部への気づき
模写する中で、細かい部分に目を向けることが求められます。例えば、フォントのサイズや間隔、アニメーションの速さ、余白の取り方など、見過ごされがちなポイントを注意深く観察する習慣が身につきタイピングミスやコーディングの書き漏らしなども気づくことができます。

4. コーディングの引き出しが増える
模写を続けることで、さまざまなレイアウトや機能を実現するコードの書き方が引き出しとして蓄積されます。この引き出しは、自分が新しいサイトをゼロから作るときに大いに役立ちます。

模写コーディングを成功させるポイント

模写コーディングを効果的に行うためには、以下のポイントを意識するとよいでしょう。

1. 段階を踏む 最初は簡単なサイト（たとえば、静的なランディングページなど）から始め、徐々に複雑なサイトや動きのあるものに挑戦すると良いです。

2. 観察を深める ただ見た目を真似るのではなく、「なぜこのような構造になっているのか」を考えながら進めることが重要です。

3. 不足しているスキルを補う 模写を進める中で、自分に足りない知識が明確になります。その都度、本やオンラインリソースで学びを深めることで成長につながります。

4. ツールを活用する ブラウザの開発者ツールを使って、実際のサイトのコードを確認しながら模写を進めることで、学びが深まります。

このようなことから模写はとても重要な学習段階になります！
実際にこれらを理解して模写に取り掛かろうとしている方もいるかと思います。なのでここでオススメしている模写サイトを紹介します！
それは「 Code jump」です。

サイトのリンクも貼っておきます。分からない方は下記のリンクから閲覧してみてください。

※特に登録などは不要で活用できます。
今でこそ僕もプログラミングの業務に携わっていますが過去勉強している時にものすごくお世話になったサイトです。
このサイトはレベル別に分かれていて自分のレベルに合った模写のサイトを選択することができ解説なども分かりやすく説明があるのでとても便利です。
ここからは実際にCodejumpの使い方について解説していこうと思います。
サイトを開いていただくとこのような画面があると思います。

この画面でレベルが書いてあるので今自分がどの言語を使うことができるかで模写のサイトを選択しましょう。
もし模写が初めての場合だと左上の自転車のサイトがオススメです。
実際にレベルを選択して開くとこのような画面になります。
ここの赤枠で囲っているところが模写をする上での重要なヒントやポイントなどもあるので何が見れるのかを一つづつ解説していきます。

コーディング練習
ここでは模写の練習方法であったりこのサイトの完成がどのようなレイアウトになっているのか。またPCで画面を表示した時とスマホで表示した時のサイトの違いなども確認することができます。
模写をする前に全体の構造がどういった感じになっているのかを事前に確認しておくことはとても重要です。

レイアウト構成
ここでは全体のレイアウト構成についてと各パーツのレイアウト構成が載っています。
具体的にどういったことかも画像を用いながら説明していきます。
まずは全体のレイアウトがあると言いましたがサイトにはもっと具体的に載っています。
この画像を確認すれば

などこのサイトを模写する上でかなり重要になることを確認することもできますしもし仮に手が止まってしまってどういったコードを書いてくくればいいのか分からなくなってしまった。そんな時にこのページに戻って頭の中を整理するのもいいかと思います。

そしてこの画像に対しても丁寧に文字で解説もしてありますので画像も確認しつつ文字も読んでより自分自身の頭の中の解像度を上げていくのもいいかもしれません。

次に各パーツのレイアウト構成も解説してあります。
先ほどのものはレイアウトの構成なのでサイトの全体を把握するための解説が多いです。

しかし、サイトを作る時にはもう少し細かいところまでコーディングしていく必要があると思います。

例えば、headerで冒頭は括るのは分かるけどそのheaderの中がどのような構成になっているのか分からない。そんな時に最適な解説になっています。
画像を見ていただくと分かる通りheaderの中がどういったclassの分け方をしているのか。これを見れば一目でどういった構造に分かれているのか分かると思います。

これに付随してheaderのコーディングのヒントも書いてあります。

これはheaderのコーディングに対してのみの解説になります。
この部分の解説は今回の自転車の模写であれば[header],[div(#mainvisual)],[section(#about)],[section(#bicycle)],[footer]のように各部分に対してレイアウトの画像とコーディングのヒントがセットで解説してありますのでぜひ模写で躓いた時のヒントにしてもらえればと思います。

解説
この解説の部分では文字と画像のみになりますがサイトを完成させるための答えが載っています。
先ほどのレイアウト構成よりもより具体的に詳しく解説してあります。

• どうやってコーディングしていかないといけないのか？

• なぜそういった構成にしないといけないのか？

• どういった理屈でそういったコーディングになるのか？

など各部分に対して細かく説明があります。
どうしても手が止まって他のヒントなどを見てもさっぱり理解ができない人などはちらの解説を見ることをオススメします。

ソースコード
これは名前の通り答えのコードが載っています。

などの問題も答えのソースコードを見ることで確認することができる優れものです。ですがこの答えは全てが載っているので極力見るのは最終手段にした方がいいと思います。
できそうなところは自力で頑張って綺麗なコードの書き方ができなくても自分の力で書いてみるということも力をつけるためにはとても重要なことです。このような点も含めて使ってみてください。

デモ
このデモは完成したサイトを今使っているデバイス上で確認できるものになっています。
これの利点でもあるポイントは実際の完成サイトを確認することができるということ。これの何がいいのか？
模写は完成しているものを見ながら完成サイトと同じようにコードを入力していき完成させる必要があります。
そのため完成のサイトを確認し例えばボタンをクリックすることができるようなものであったりクリックすることでサイトのどの部分に飛ぶことができるのかなども細かいところではありますが真似しないといけません。
その確認の作業もできるため実際に完成したサイトを使ってみることができる優れたものになります。
これらのいいところなどを使いながらこれからの模写に役立ててもらえたら嬉しいです！

模写コーディングの具体的な進め方の手順

ここまでは模写の重要性などをお話ししたのでやらないといけないということは伝わったかなと思います。
ですがまだ具体的にどのような手順で模写を進めていけばいいのか分からないと思います。
なのでこれら実際に模写をするにはどの手順で始めていけばいいのかを詳しく解説します。
使うサイトは上部で紹介した模写サイト（codejump）を活用して説明していきます。

1.模写するサイトを決める
まず初めは模写するサイトを決めていきます。
個人によってレベル感が違うと思うので自分に合った模写サイトを選択しましょう！
※初心者は動きのないサイトから選ぶようにしましょう！

2.デモサイトでサイトを触る
ここで何をするのかというと実際に完成したサイトを触ってボタンを押したらどんな動きをするのかなどサイトの確認作業も含めて触ります。
ここでもう一つしてほしいことがサイトの共通点を探すことです。
コーディング前にサイトの共通点を把握するだけで模写をするときにかなり楽にコーディングできるのでオススメです。

3.レイアウト全体構成を見る
本格的に模写に入っていくので全体のレイアウトを確認します。
ページの構成を的確に把握していくことが大事です！
部分ごとに細かいデザインまで確認することでサイト全体にイメージを掴むことができます。

4.サイトに必要な画像をダウンロード
サイトで使う画像などは模写の前にダウンロードしておきしょう。
ダウンロードのやり方はが模写するサイトを選択してページのした部分に
「画像をダウンロード」の文字があるのでそこをクリックしていただくとダウンロードが開始します。

5.VScodeでファイルを作成
必要な素材のダウンロードが終わったら模写をするために使うVScodeを立ち上げて模写をする準備をしていきます。

6.コーディングスタート
これらの手順を踏まえて模写のコーディンをしていきましょう！

STEP1　部分的な模写コーディング

Progateを勉強したからといって急に模写をするとほぼ確実にできなくて挫折の原因になります。

そうならないためにまずは部分的な模写コーディングからしていくことをオススメします。

なぜ最初は全体の模写から入らずに部分的な模写から始めた方がいいのかを説明していきます。

1.負担を減らす
冒頭でお話ししたように初心者にとって、いきなり全体を模写するのは難しく、途中で挫折しがちです。
小さな部分に分けて取り組むことで、「できた！」という達成感を得やすく、モチベーションを保つことができるので挫折するリスクを軽減することができます。

2.基本的な構造を理解しやすい
プログラムは部分ごとに役割があるため、一部だけを集中して模写することで、その役割や仕組みをしっかり理解できます。
全体を一気に見ると混乱することも、部分的に見るとシンプルに感じられます。

3.エラーに気づきやすい
部分的に模写をすることで、エラーが発生したときに原因を特定しやすくなります。
全体を模写してエラーが出ると、どこが原因か分かりにくいですが、部分ならすぐに修正できます。

4.応用力を身につけやすい
小さな部分の模写を積み重ねることで、「このコードはこういうときに使える」という知識が増えます。
それを繋ぎ合わせて、やがて全体を作れるようになっていきます。

5.学習の柔軟性が高まる
部分的に模写すると、自分のペースで進められます。難しいところは飛ばして、得意な部分から始めることができるので、無理なく学習を続けられます。

初心者にとっては、「小さな成功体験を積み重ねること」が非常に大事です。部分的な模写を繰り返しながら、徐々に全体へと挑戦していく流れが、学習の効果を最大化するので最初は部分的な模写から初めていきましょう！

じゃあ実際にどうやって初めていけばいいのか？
STEP9ではその部分的な模写はどのように始めたらいいのかを説明していこうと思います。

今回はコードジャンプの一番簡単なサイトである自転車を例にして説明していきます。おそらく初めての方はこのサイトの模写から始めることになります。

サイトのリンクは以下から参照してください。

今回部分的な模写で説明するのは画面中央のところを解説します。

ソースコードはこちらになります。

<main>
      <div id="mainvisual">
        <img src="img/mainvisual.jpg" alt="テキストテキストテキスト">
      </div>

      <section id="about" class="wrapper">
        <h2 class="section-title">About</h2>
        <div class="content">
          <img src="img/about.jpg" alt="テキストテキストテキスト">
          <div class="text">
            <h3 class="content-title">KAKERU MIYAICHI</h3>
            <p>
              テキストテキストテキストテキストテキストテキストテキスト<br>
              テキストテキストテキストテキストテキストテキストテキスト<br>
              テキストテキストテキストテキストテキストテキストテキスト
            </p>
          </div>
        </div>
      </section>

1.全体の構造を分かりやすくするため

<main>タグ
ページの「主要な内容」を表しています。検索エンジンやスクリーンリーダーが「ここがこのページの重要な部分だ」と認識しやすくなります。

<section>タグ
コンテンツを「セクションごと」に分けています。それにより、HTMLコードを読む人も、ブラウザも、どの部分が何を表しているか理解しやすくなります。

初心者向けのポイント
HTMLでは、意味のあるタグを使うことで、読みやすさとSEO（検索エンジン最適化）が向上します。

2.IDやクラスを使うのは「スタイリング」や「機能追加」のため

id="mainvisual"やid="about"
・特定の要素を一意に識別するための名前です。
・CSSでデザインを変更したり、JavaScriptで動きを追加する際に役立ちます。
class="wrapper"やclass="section-title"
・複数の要素に同じスタイルや機能を適用したいときに使います。
・例えば、全ページで「セクションタイトル」の見た目を統一したい場合に便利です。

初心者向けのポイント
IDは「一つの特定の要素」に使い、クラスは「複数の要素」に使います。

3.画像やテキストには「意味を持たせる」必要がある

<img src="img/mainvisual.jpg" alt="テキストテキストテキスト">
・src属性は画像のファイルパスを指定します。
・alt属性は、画像が表示されないときに代わりに表示されるテキストです。さらに、視覚障害者用のスクリーンリーダーがこれを読み上げるので、アクセシビリティ（使いやすさ）の向上につながります。

初心者向けポイント
画像に「alt属性」をつけるのは、ユーザーの体験を良くするためです。

4.見出しタグで情報の「階層」を表す

<h2>と<h3>
・<h2>は「セクションのタイトル」、<h3>はその中の小見出しです。
・見出しタグを使うと、コンテンツの構造が明確になり、視覚的にも「重要な部分」を強調できます。

初心者向けポイント
見出しタグを使うことで、ページの内容が分かりやすくなり、SEOの効果も高まります。

5.テキストと画像を使い分ける

・<div class="text">と<img>で分かれているのは、デザインやレイアウトを柔軟に調整できるようにするためです。
・例えば、CSSを使って画像を左、テキストを右に配置するなど、自由にレイアウトが組めます。

初心者向けポイント
HTMLでは「コンテンツの構造」を決め、CSSで「見た目やレイアウト」を調整します。

まとめ

これらを意識して書くと後でCSSやJavaScriptを使う時に非常に便利です！

続いてCSSについて解説していきます。
ソースコードはこちらです。

/*-------------------------------------------
Mainvisual
-------------------------------------------*/ #mainvisual  {
  margin-bottom: 80px;
} #mainvisual  img {
  width: 100%;
  max-width: 1920px;
  height: 600px;
  object-fit: cover;
}

/*-------------------------------------------
About
-------------------------------------------*/ #about  .content {
  display: flex;
  justify-content: center;
  align-items: center;
} #about  img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 30px;
} #about  .text {
  text-align: left;
}

1.#mainvisualセクションのCSSについて

 #mainvisual  {
  margin-bottom: 80px;
}

意味
#mainvisualのセクションに余白を設けています 。
・セクションと次の要素（Aboutセクション）との間に十分なスペースを作り、見た目をすっきりさせています。
・この余白がないと、要素同士が詰まって見え、デザインが窮屈に感じられます。

 #mainvisual  img {
  width: 100%;
  max-width: 1920px;
  height: 600px;
  object-fit: cover;
}

width: 100%;
・画像の横幅を親要素（#mainvisual）の横幅に合わせています。
・これにより、画面サイズに応じて画像がリサイズされます。
max-width: 1920px;
・画像の横幅が1920pxを超えないように制限しています。
・フルHD解像度に対応しつつ、データサイズを適度に保ちます。
height: 600px;
・高さを固定し、一定のバランスを維持します。
・画像が極端に縦長または横長にならないよう調整します。
object-fit: cover;
・画像の縦横比を維持したまま、枠いっぱいに表示します。
・画像が切り取られる場合も、自然に収まるように見せる効果があります。

2. AboutセクションのCSSについて

 #about  .content {
  display: flex;
  justify-content: center;
  align-items: center;
}

display: flex;
・フレックスボックスを使って、画像とテキストを横並びに配置します。
・Flexboxは、レイアウトを簡単に整列できる便利なCSSプロパティです。
justify-content: center;
・画像とテキストを水平方向の中央に配置します。
align-items: center;
・画像とテキストを垂直方向の中央に揃えます。
・これにより、画像とテキストが高さの異なる要素でも見た目が均等になります。

 #about  img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 30px;
}

width: 100px; / height: 100px;
・画像を指定サイズにリサイズし、コンパクトに見せています。
・Aboutセクションでは「プロフィール写真」のような役割を果たすため、小さく円形に表示するのが一般的です。
border-radius: 50%;
・画像を円形にします。
・四角い画像に角を丸め、デザインを柔らかくする効果があります。
margin-right: 30px;
・画像とテキストの間に余白を設け、見やすさを向上させています。

 #about  .text {
  text-align: left;
}

text-align: left;
・テキストを左揃えにしています。
・日本語や英語の文章は左揃えが一般的で、自然に読めるレイアウトを実現しています。

このCSSの目的と効果

1.メインビジュアルセクション
・幅広いデバイスで見た目を崩さず、美しい画像表示を実現。
・フルHD画像を最大限活用し、トリミング効果でデザイン性を向上。
2.Aboutセクション
・フレックスボックスを使い、画像とテキストをバランス良く配置。
・プロフィール写真を円形にし、デザインの一貫性を高める。
・全体のスペースや配置を調整し、視認性を向上。

初心者向けのアドバイスとして、このCSSは以下のポイントを学ぶのに最適です

このように最初は全体をせずに好きなところを一部分切り抜いて初めてみてください！

STEP2　静的な模写コーディング①PHOTO BOOK

目次

全体のレイアウト構成

解説
レイアウト構成は以下の通りです。

各パーツのレイアウト構成

コーディングのヒント

div(#mainvisual)

コーディングのヒント

section(#index)

コーディングのヒント

section(#detail)

コーディングのヒント

footer

コーディングのヒント

STEP3　静的な模写コーディング②Mywork

目次

全体レイアウトの構成
画像を差し込む

解説
1カラムのシンプルなレイアウトです。
レイアウト構成は下記の通りです。

各パーツのレイアウト構成
header

コーディングのヒント

div(#mainvisual)

コーディングのヒント

section(#about)

コーディングのヒント

section(#works)

コーディングのヒント

section(#news)

コーディングのヒント

section(#contact)

コーディングのヒント

footer

コーディングのヒント

STEP4　静的な模写コーディング③web Entertainment design

目次

全体レイアウト
画像を差し込む
解説
レイアウトの構成は下記の通りです。

各パーツのレイアウト構成
header

コーディングのヒント

div(#mainvisual)

コーディングのヒント　

section(#news)

コーディングのヒント

section(#about)

コーディングのヒント

section(#business)

コーディングのヒント

section(#company)

コーディングのヒント

footer

コーディングのヒント

STEP5　動的な模写コーディング　jsアニメーション　

ここまでで、あなたは静的な模写の本質を理解し、デザインを崩さず再現できるようになったはずです。

ここから先は、いよいよ動きを操るフェーズに入っていきます。

ハンバーガーメニュー、スライダー、フェードイン…。
これを実現するには、JavaScriptやjQueryの基礎が欠かせません。

なのでまずはProgateなどを使って土台を作ってきてください。

静的を攻略したあなたなら、動的の学習はただの暗記ではなく、意味を理解しながら一気に吸収できるようになります。

この先が、実案件に直結する【本当のコーディング力】です。

1. 目標物の確認・プロジェクトの準備

ハウスメーカーからコーポレートサイトの制作をjQueryを使って、動的なサイトとして制作していきましょう。

2. 静的部分の構築

動的なサイト制作とはいえ根本的には、HTML・CSSが基礎になってきますので、まずは、HTML・CSSでサイトを作っていきましょう。
各セクションにまずは分けて考えていきましょう。

レイアウト構成は下記の通りです。
header
ロゴ、グローバルナビを囲みます。
main
コンテンツのメインエリア全体を囲みます。
div（#video）
動画のエリアを囲みます。
section（#project）
Projectコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#feature）
Featureコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#flow）
Flowコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section（#contact）
Contactコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
footer
コンテンツ下のfooter部分を囲みます。
前半部分で静的サイトのコーディングについては解説済みですし、ここまで読んでくださった皆さんならコーディングは実装できると思うので、細かい説明については割愛します。

3. 動的機能の追加（jQueryで実装）

1. ハンバーガーメニューの実装
レスポンシブのsp画面からハンバーガーメニューと呼ばれる ≡ が出現します。これの実装をjQueryを用いて実装していこうと思います。
仕組みは、アコーディオンアニメーションの仕組みを応用してハンバーガーメニューを作っていきます。

jQuery

$(function(){
  $('#hamburger').on('click',function(){
    $('#hamburger').toggleClass("open");
    $('#header-menu').slideToggle();
  });
});

HTML

<div id="hamburger" class="hamburger">
   <span></span><span></span><span></span>
</div>

copy
CSS

.hamburger {
    position: absolute;
    top: 32px;
    right:32px;
    cursor: pointer;
    width: 32px;
    height: 24px;
    z-index: 10;
}
.hamburger span {
    /*3本の線を作る*/
    transition: all .3s;
    position: absolute;
    height: 2px;
    background-color: #333 ;
    width:100%;
    z-index: 10;
}
.hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 4px;
}
.hamburger span:nth-of-type(2) {
    /*真ん中の線の位置*/
    top: 12px;
}
.hamburger span:nth-of-type(3) {
    /*下の線の位置*/
    top: 20px;
}
.hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: 10px;
    transform: translateY(6px) rotate(-33deg);
}
.hamburger.open span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
}
.hamburger.open span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    top: 22px;
    transform: translateY(-6px) rotate(33deg);
}

copy
ハンバーガーメニューにhamburgerというidを与えていて、それをクリックした時の関数を書いています。

$('#hamburger').toggleClass("open");

copy
このtoggleClassというのは、指定したCSSクラスが要素に無ければ追加し、あれば削除するという意味で、関数が呼び出されるたびに（ハンバーガーメニューがクリックされるたびに）openクラスをつけたり外したりしています。

2. To-Topボタンの実装
スクロールに応じてボタンが出現し、クリックするとトップページに戻り再度ボタンが非表示になるというto-topボタンの実装を行います。
jQuery

let pagetop = $(".to-top");
  // 最初に画面が表示された時は、トップに戻るボタンを非表示に設定
  pagetop.hide();

  // スクロールイベント（スクロールされた際に実行）
  $(window).scroll(function () {
    // スクロール位置が700pxを超えた場合
    if ($(pagetop).scrollTop() > ) {
      // トップに戻るボタンを表示する
      pagetop.fadeIn();

      // スクロール位置が700px未満の場合
    } else {
      // トップに戻るボタンを非表示にする
      pagetop.fadeOut();
    }
  });

  // クリックイベント（ボタンがクリックされた際に実行）
    pagetop.click(function () {
    // 0.5秒かけてページトップへ移動
    $("body,html").animate({ scrollTop: 0  },500 );

    // イベントが親要素へ伝播しないための記述
    // ※詳しく知りたい方は「イベント　バブリング」または「jQuery バブリング」で調べてみてください
    return false;
  });

HTML

<a class="to-top" href="#"></a>

CSS

/*
右下に固定で配置
表示・非表示の切り替えはjQueryで行うため、詳細は「main.js」のコメントを参照
*/
.to-top {
  width: 50px;
  height: 50px;
  background-color: #121212 ;
  border: solid 1px #fff ;
  border-radius: 50%;
  position: fixed;
  right: 25px;
  bottom: 25px;
}

/*
中の三角は疑似要素で作成
*/
.to-top::after {
  content: "";
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff ;
  position: relative;
  left: 17px;
  bottom: 3px;
}

まず初めに画面に表示されるときにはto-topボタンはhide()にして非表示にし設定します。

let pagetop = $(".to-top");
  // 最初に画面が表示された時は、トップに戻るボタンを非表示に設定
  pagetop.hide();

次にスクロールされたときに実行するスクロールイベントを書いていきます。
if文を用いて、条件に応じてフェードイン・フェードアウトで表示/非表示を切り替えていきます。
今回の例ではスクロールの位置を700pxに設定しています。

  // スクロールイベント（スクロールされた際に実行）
  $(window).scroll(function () {
    // スクロール位置が700pxを超えた場合
    if ($(pagetop).scrollTop() > 700) {
      // トップに戻るボタンを表示する
      pagetop.fadeIn();

      // スクロール位置が700px未満の場合
    } else {
      // トップに戻るボタンを非表示にする
      pagetop.fadeOut();
    }
  });

ここまででスクロールに応じてto-topボタンの表示/非表示の切り替えができるようになりました。
次にボタンがクリックされたときに0.5秒かけてページトップに移行するという動きを作っていきます。

  // クリックイベント（ボタンがクリックされた際に実行）
    pagetop.click(function () {
    // 0.5秒かけてページトップへ移動
    $("body,html").animate({ scrollTop: 0  },500 );

クリックされたら、scrollTop(表示されている画面の上端の位置)から０（トップページ）まで500ミリ秒（０.５秒）かけてスクロールするという動きを設定しています。
これでハンバーガーメニューとto-topボタンの実装が完了しました。

４. テストと改善

デベロッパーツールを使ったデバックを踏まえてハンバーガーメニューとto-topボタンの実装を調べていきましょう。

ハンバーガーメニュー

検証ツールを開いて、Elementsタグをクリックします。
デベロッパーツールの「Elements」タブで、#hamburger をクリックした際に open クラスが正しく追加・削除されるか確認します。

• イベントのトリガー確認
「Sources」タブを使用して、クリックイベントが正しくトリガーされているか確認します。
• $('#hamburger').on('click', ...) にブレークポイントを設定し、クリック時にコードが実行されるか追跡します。
• this が正しい要素（#hamburger）を指しているかを確認します。

to-topボタン

検証ツールを開いて、Elementsタグをクリックします。
デベロッパーツールの「Elements」タブで、to-topボタン が非表示になっているか cssのstyleでdisplay:noneになっているか、スクロールをしていくと、700pxの位置でdisplay:noneが外れて、to-topボタンが表示されているか確認する。

• イベントのトリガー確認
「Sources」タブを使用して、クリックイベントが正しくトリガーされているか確認します。
• pagetop.click(function(){にブレークポイントを設定し、クリック時にコードが実行されるか追跡します。
• this が正しい要素（a.to-top）を指しているかを確認します。
• $('body,html').animate({scrollTop:0},500)にブレークポイントを設定し、実際にスクロールアニメーションが実行されていることを確認します。

ここまでで、動的なアニメーションの実装と、それに応じたデベロッパーツールを使用したデバックを学びました。
この手順を踏んでいくと、不明点を改善しながら動的サイトの作成を行っていくことができるようになります。

最後に

ここまで読んだあなたは、もう分かっているはずです。

模写コーディングをただこなすだけでは、成長が止まってしまう。
正しいやり方で取り組むことが、案件を取れるレベルに最短で近づく最重要ポイントだということを。

このテキストは、そのための「ナビ」みたいなものです。

でも、ナビだけでは、時に迷うことがあります。
人によって今のスキル、使える時間、目指す未来はまったく違うからです。

僕はこれまで800名以上の学習者を見てきました。

その中でいつも感じるのは、同じ知識を持っていても、自分に合わせて戦略を組める人は成長が早く、迷う人は長い時間を失ってしまうということ。

だからこそ、あなたが最短で進めるように、電話カウンセリングで今の状況を整理し、学習の優先順位を一緒に決めるための相談の場を用意しています。

あなたの現状を聞いたうえで、

今のスキルに合った進め方

を一緒に考えるための時間です。

自己流で迷い続ける時間が一番の損失。

正しい方向を見極めれば、成長のスピードは一気に上がります。

このテキストを手に取った今こそ、動き出すタイミングです。

「自分はどう進めばいいのか」を整理して、最短のルートを一緒に考えましょう。

あなたの挑戦を、僕は本気で応援しています。