Codejump（旧Codestep）の使い方と進め方、特徴を徹底解説

Codejump（コードジャンプ／旧Codestep）は、HTML/CSSの基礎を学んだあとに、実際にサイトを作りながら練習できる学習サイトです。

無料で使えるデザインカンプやサンプルコードが用意されており、「基礎は勉強したけれど、次に何を作ればいいか分からない」という人に向いています。

ただ、課題を前にすると「どの順番で進めるべき？」「全部やる必要はある？」「見た目は近づいたけれど、この書き方でいい？」と迷うこともあるでしょう。

そこでこの記事では、私がCodejumpの課題を難易度と学べる内容で整理し、基礎学習後の進め方から、実装中につまずきやすいポイントまで解説します。WordPress編や、有料のCodejump Pro・書籍の位置づけも紹介します。

無料課題では、完成後にデモやサンプルコードを参考に、自分で仕上がりを確認します。作って終わりにせず、何を確認し、次の課題にどう生かすか。 そこまで押さえて進めていきましょう。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。2024年からは外資のWeb系企業でディレクター業も兼務。月数万PVのブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

• デザインカンプからのコーディングを経験したい
• 現役エンジニアのレビューを受けてみたい
• 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

2025年には「8日以内提出」という納期と「修正10箇所以内」という品質項目が課された、模擬案件編も追加

コーディングに自信をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

Codejump（旧Codestep）とは

Codejumpは、HTML/CSSなどの基礎知識を、サイト制作で使える力に変えるための学習サイトです。

完成したデモサイトを見て再現する「模写コーディング」と、デザインデータをもとに組み立てる「デザインカンプからのコーディング」の両方に取り組めます。

運営者は小豆沢健氏｜2020年開設・累計10万人以上が利用

Codejumpを運営しているのは、Webアプリケーション開発やWebサイト制作に携わる小豆沢健氏です。

ソフトウェア開発会社での勤務を経て独立し、2020年にCodejumpを開設。公式プロフィールによると、累計10万人以上が利用しています。2025年には技術評論社からHTML/CSSの実践書も出版しており、以前レビューさせて頂きました。

2025年おすすめHTML新作本「HTML&CSS Webデザイン 実践入門」をレビュー 2025年、おすすめのHTML/CSS本「HTML&CSS Webデザイン 実践入門」が出ましたので、ご紹介します。 こ...

教材を作っている人の制作経験や経歴が公開されていることは、学習に使う教材を判断する材料になります。

「Codestep」から「Codejump」への改名について

Codestep（コードステップ）は、Codejumpの旧名称です。 別の学習サービスではありません。現在の公式サイトにも「旧 Codestep」と記載されています。

過去のブログや学習記録で「Codestepの課題に取り組んだ」と書かれていたら、現在のCodejumpを指していると考えて大丈夫です。ただし、課題の内容や配布データは更新されるため、実際に取り組む際は現在の公式ページを確認しましょう。

料金｜どこまで無料で、どこから有料か

通常のコーディング課題は無料で取り組めますが、実践編の「Codejump Pro」は有料です。

無料課題ではデザインカンプやサンプルコードが公開されており、基礎学習後の練習を始められます。

Codejump Proは、スタンダードが月額2,480円、プレミアムが月額5,980円、スピードプランが一括29,760円です。いずれも税込で、2026年9月4日時点の料金です。

プレミアムには納品後の動作確認と評価レポートが付くため、有料プランもすべて自己チェックだけ、というわけではありません。 各プランの詳しい違いは、後の章で解説します。

どんな人に向いているか

私がCodejumpを使うタイミングとして勧めるのは、基礎教材を一通り終え、「自分で1ページ作る練習」に移る段階です。

たとえば、HTMLの見出しや画像の書き方、CSSの色や余白の指定は分かる。でも、ページ全体をどう組み立てればよいか迷う。そんな人には、完成形と課題の条件が用意されているCodejumpが役立ちます。

最初からすべての書き方を覚えている必要はありません。分からないところを調べながら、まず1ページを完成させること。 そこを最初の目標にして、入門編から進めていきましょう。

しょーご

Codejump以外の教材も含めて探したい方は、「HTML/CSSコーディング練習サイト7選【無料あり】」をご覧ください。

Codejumpの課題一覧と難易度の目安

Codejumpの課題は、ページ全体を作る練習と、特定のパーツや機能を身につける練習に分かれています。

まずは、各カテゴリで何を学べるのかを押さえましょう。代表的な課題と学習内容をまとめました。

難易度は「ページ数・レイアウト・動き」で見る

課題を選ぶときは、カテゴリ名に加えて、前の課題から何が増えるかを見ると判断しやすくなります。

入門編では、まず1ページを組み立てる流れを経験します。初級編では扱うレイアウトが増え、中級編では複数ページのつながりを考える必要が出てきます。上級編・応用編に進むと、複雑な配置や動きの実装にも取り組みます。

ただし、難しさは得意分野によって変わります。ページ数が少なくても、初めて扱うレイアウトなら時間がかかって当然です。

しょーご

私なら、次の課題は「まだ練習していない要素があるか」で選びます。横並びが作れたら複数ページへ、静的な配置ができたら動きのある課題へ、という進め方です。

番外編とWordPress編は目的に合わせて使う

番外編は、苦手なパーツを集中的に練習したいときに使えます。たとえばアコーディオンの実装で止まったら、該当する課題で仕組みを確認してから、制作中のサイトに戻ると理解を整理できます。

WordPress編は、HTML/CSSで作ったサイトをWordPress化する段階の課題です。基礎学習直後は、まずHTML/CSSの入門編を1つ完成させましょう。そこから目的に合わせて課題を選べば、取り組む順番も決めやすくなります。

Codejumpの攻略ルート｜どの順番で進めるべきか

Codejumpは、すべての課題を順番に終わらせなくても学習を進められます。私なら、「1ページを自力で作れるか」を基準に、次の2つのルートを使い分けます。

以下は公式の必須順序ではなく、各課題で学べる内容をもとに組んだ私独自の学習ルートです。

基礎学習を終えた直後なら、入門編から段階的に進める

Progateなどを終えて、まだ自分でサイトを完成させたことがない人は、この順番で進めてみてください。

Profile → PHOTO BOOK → My Work → Furniture Design

最初のProfileでは、画像や文章を配置して1ページを完成させます。レイアウト解説も用意されているので、手が止まったときに組み立て方を確認できます。

次のPHOTO BOOKでは、最初の課題で覚えたことを使って、解説を見る回数を減らしてみましょう。その後、初級編のMy Work、中級編のFurniture Designへ進み、異なるレイアウトや複数ページの制作に取り組みます。

進級の目安は、コードを暗記できたかではありません。調べながらでも完成させ、なぜその書き方にしたかを説明できるかで判断しましょう。

実務を目指すなら、未経験の要素がある課題を選ぶ

すでに簡単な1ページを作れる人は、入門編を繰り返すより、次の順番で経験を広げるとよいでしょう。

Furniture Design → 上級編を1課題 → 応用編を1課題 → 実践編や模擬案件

Furniture Designで複数ページの制作を経験したら、上級編では2カラムや固定サイドメニューなど、まだ作ったことのないレイアウトを選びます。応用編では、CSSアニメーションやスライダーなどの動きに取り組みます。出典：公式の課題一覧

このルートでは、デザインカンプと仕様を先に読み、自分で構成を考えてから実装することを意識してください。完成コードは、実装後の振り返りに使います。

飛ばしていい課題は「同じことを自力でできるか」で判断する

似た課題を飛ばす前に、次の3点を確認しましょう。

これができていて、次の課題にも新しく学ぶ要素が少なければ、いったん後回しにして構いません。反対に、前のコードを貼り付けただけで仕組みを説明できないなら、似た課題でもう一度練習する意味があります。

番外編も、苦手な機能が出てきたタイミングで取り入れましょう。課題を何個終えたかより、自分で判断して作れる部分が増えたかを基準に進めることが大切です。

CodejumpのWordPress編の進め方

WordPress編では、HTML/CSSで作ったサイトを、管理画面から記事や画像を更新できる形にしていきます。

見た目を再現する力に加えて、「どの部分を管理画面から変更できるようにするか」を考える練習です。HTML/CSSで1ページを作れるようになってから取り組むと、学習内容を整理しやすくなります。

まずはパソコンにWordPressを動かす環境を用意する

WordPressは、HTMLファイルのように直接ブラウザで開くだけでは動きません。練習を始める前に、WordPressが動作する環境を用意しましょう。

自分のパソコンで練習するなら、WordPress環境構築ツールの「Local」が使えます。まずはWordPressのサイトを作成し、管理画面にログインできるところまで進めてください。

この段階では、公開用のレンタルサーバーや独自ドメインを契約する必要はありません。環境の準備とテーマ制作を分けて進めると、問題が起きたときも原因を探しやすくなります。

入門編から、更新できる内容を少しずつ増やす

私なら、最初はProfileに取り組み、その後My Work、Furniture Designへ進みます。それぞれの課題で増える要素は、次のとおりです。

HTML/CSS版と同じ名前でも、ページ構成や必要な機能は異なります。 以前作ったコードを使う場合も、WordPress版の仕様を読み直してから始めましょう。

つまずいたら「表示するファイル」と「表示するデータ」を分けて確認する

WordPress化では、HTML/CSSに加えてPHPやテンプレートの仕組みを扱います。特に迷いやすいのが、「どのファイルを編集すれば画面が変わるのか」という点です。

WordPressには、ページの種類に応じて使用するファイルを選ぶ「テンプレート階層」というルールがあります。Codejumpで扱うPHPベースのテーマでは、投稿詳細は主にsingle.php、固定ページは主にpage.phpが担当します。

表示がおかしいときは、まず対象のテンプレートを確認し、次に投稿データが取得できているかを調べましょう。一度にすべてをWordPress化せず、タイトル、本文、画像の順に少しずつ表示すると、原因を絞れます。

完成後は、管理画面から投稿を追加・編集し、一覧と詳細ページに反映されるかまで確認してください。ここまで動かせて、WordPress化の練習が一区切りになります。

Codejumpでつまずきやすい7つのポイント

Codejumpで手が止まるのは、書き方を知らないときだけではありません。「いくつか方法は分かるけれど、どれを選ぶべきか」で迷うこともあります。

ここでは、実装中に確認したいポイントをコード例とともに整理します。以下のNG・OKは、説明した条件での判断です。数値やクラス名は説明用で、課題の完成コードとは異なります。

1．width・heightを固定値にするか迷う

固定する部分と、画面幅や文章量に合わせて変わる部分を分けましょう。 たとえば文章が増えるボックスに幅・高さを固定すると、スマホで横にはみ出したり、文章が枠からあふれたりします。

/* NG：画面幅や文章量が変わるボックスを固定する */
.description {
  width: 960px;
  height: 200px;
}

/* OK：幅に上限を設け、高さは文章量に合わせる */
.description {
  width: 100%;
  max-width: 960px;
  height: auto;
  box-sizing: border-box;
}

max-widthは幅の上限を指定するプロパティです。狭い画面では縮み、広い画面でも指定幅を超えない形にできます。

ただし、固定値そのものが悪いわけではありません。Profileのメインビジュアルには「高さ600px固定」という指定があります。まず課題の仕様を読み、そのうえで可変にする範囲を判断することが大切です。

2．marginを足しても、想定した余白にならない

通常の縦並びでは、隣り合う要素の上下のmarginが重なり、大きいほうの値だけになることがあります。これが「marginの相殺」です。

/* NG：合計40pxになるつもりで指定する */
.heading { margin: 0 0 20px; }
.text    { margin: 20px 0 0; }

/* OK：40px空けたいなら、片側で指定する */
.heading { margin: 0 0 40px; }
.text    { margin: 0; }

余白が合わないときは、数値を増やす前に、隣の要素にもmarginが付いていないか確認しましょう。

しょーご

余白の原因を調べるときは、Chromeデベロッパーツールで適用されているCSSを確認しましょう。

3．ブレイクポイントを何pxにするか迷う

Codejumpの課題では、仕様にブレイクポイントが書かれていれば、その値を基準にします。 たとえばProfileは600pxです。普段使っている値を、そのまま当てはめないようにしましょう。

/* NG：Profileの指定を確認せず768pxで切り替える */
@media (max-width: 768px) {
  .bicycle-list { flex-direction: column; }
}

/* OK：課題の指定に合わせる */
@media (max-width: 600px) {
  .bicycle-list { flex-direction: column; }
}

切り替えたあとは、PC幅とスマホ幅だけでなく、その中間でも表示を確認します。指定がない制作では、内容が窮屈になる位置を見ながら切り替え幅を考えます。

しょーご

複数の画面幅をまとめて確認したい場合は、Responsive Viewerも便利です。

4．FlexboxとGridのどちらを使うか迷う

横一列の配置ならFlexbox、縦横の列をそろえる一覧ならGridが扱いやすい、という目安から考えてみましょう。

たとえば「3列で、列の間に16pxの隙間を入れる」場合、各要素を単純に3分の1の幅にすると、隙間の分だけ収まらなくなります。

/* NG：幅の合計が約100%になり、隙間の分が収まらない */
.list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.list > * { width: 33.333%; }

/* OK：Gridで隙間を含めて3列に分ける */
.list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.list > * { width: auto; }

Flexboxでも幅を計算すれば実装できます。サンプルと同じ方法かより、必要な配置を無理なく表現できるかで判断しましょう。

5．画像のaltに何を書けばよいか分からない

altは、画像が見えない場合に、その画像が伝える内容や役割を補うテキストです。ファイル名や「画像」という説明だけでは、内容が伝わりません。

<!-- NG：商品の特徴を伝える画像なのに、内容が分からない -->
<img src="images/bicycle.jpg" alt="画像">

<!-- OK：画像が伝える情報を簡潔に書く -->
<img src="images/bicycle.jpg" alt="黒いロードバイクの側面">

一方、情報を持たない装飾画像ならalt=""とします。すべての画像に長い説明を入れる必要はありません。周囲の文章も含めて、その画像の役割を考えましょう。

6．font-familyを書いたのに、指定した字体にならない

font-familyは、使うフォントを指定するものです。端末にないフォントは、名前を書くだけでは使えません。Webフォントなら、フォントデータを読み込む設定も必要です。

/* NG：未導入のフォントを、名前だけで指定する */
body { font-family: "PracticeFont"; }

/* OK：用意したフォントファイルを読み込んで指定する */
@font-face {
  font-family: "PracticeFont";
  src: url("../fonts/practice.woff2") format("woff2");
  font-display: swap;
}
body { font-family: "PracticeFont", sans-serif; }

この例は、指定先に利用可能なフォントファイルを置く前提です。課題で使うフォントを確認し、配布元の案内に従って読み込みましょう。

しょーご

Noto Sans JPの使い方が特に迷いやすいポイント。読み込み方法も確認しておきましょう。

7．余白を親と子のどちらに付けるか迷う

背景や枠の内側を空けたいならpadding、要素の外側を離したいならmarginを基準に考えます。たとえば、背景色のあるセクション内に上下の余白を作りたい場合です。

/* NG：子要素のmarginだけで内側の余白を作ろうとする */
.section { background: #f5f5f5; }
.section-title { margin: 60px 0; }

/* OK：セクション自身に内側の余白を持たせる */
.section {
  background: #f5f5f5;
  padding: 60px 0;
}
.section-title { margin: 0; }

子要素の上下marginは、条件によって親の外側に出ることがあります。まず「どことどこの距離を作りたいのか」を言葉にすると、指定先を決めやすくなります。

Codejump Proと書籍は必要か

Codejumpを始めるために、Proへの申し込みや書籍の購入は必要ありません。 まず無料課題に取り組み、「制作手順をもっと詳しく学びたい」のか、「実案件に近い条件で練習したい」のかを見極めましょう。

私なら、解説を読みながら理解を深めたいときは書籍、自力で仕様を読み解く経験を増やしたいときはProを検討します。

Codejump Proは、実案件を想定して練習したい人向け

Codejump Proでは、実案件をモデルにした全12回の仮想案件に取り組みます。仕様書やデザインデータ、素材などをもとに、HTML/CSS・JavaScriptで制作する教材です。WordPressは対象に含まれません。

特徴は、案件によって渡される資料や条件が異なること。スマホ用のデザインがない場合や、原稿をもとにページを組み立てる場合もあり、資料から必要な情報を読み取り、自分で判断する練習ができます。

プラン選びでは、進めるペースと成果物の確認方法を見てください。

出典：Codejump Proのプラン案内

無料課題でも毎回サンプルコードを写す状態なら、まずは自力で組み立てる練習を続けましょう。資料を読んで一通り作れるようになり、条件の異なる制作に挑戦したくなった段階が、Proを検討する目安です。

書籍と無料課題は、学ぶ内容に重なりがある

書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』は、入門編から実践編まで、6つのサイトを制作する構成です。

無料課題と学ぶ技術や題材は重なりますが、課題の構成まで同じではありません。 たとえば、無料課題の中級編はインテリアのストアサイトですが、書籍の中級編は4ページのサービスサイトです。書籍では、枠組みから各パーツを作る手順が章立てで説明されています。

両方に取り組むなら、書籍で制作の流れを学び、無料課題で解説に頼らず作れるか試す使い方がよいでしょう。すでに自力で作れる人は、未経験のレイアウトや苦手な部分を扱う章に絞って活用できます。

しょーご

購入を迷う場合は、公式で無料公開されている第1章を読み、説明の詳しさが自分に合うか確認してみてください。

Codejumpの答え合わせ｜サンプルコードとの一致だけで判断しない

Codejumpの課題を完成させたら、サンプルコードと見比べて振り返りましょう。ただし、「同じコードなら正解、違うコードなら不正解」という判断はできません。

公式でも、コーディング方法は1パターンではなく、サンプルコードは参考として使うよう案内されています。

大切なのは、自分の実装が課題の条件を満たし、必要な表示や動作を実現できているかです。

サンプルと違っていても、条件を満たせば成立する

たとえば、サンプルがFlexboxで横並びにしている部分を、自分はGridで作ったとします。使用技術の指定がなく、配置やレスポンシブの条件を満たしていれば、方法が違うだけで不正解にはなりません。

私なら、書き直す前に次の3点を確認します。

逆に、サンプルの一部をそのまま使っても、別の条件に合うとは限りません。たとえば、短い文章に合わせた高さ指定を、文章量が増える場所に流用すると、内容があふれることがあります。

コードの形だけでなく、その書き方が成立する条件まで理解すること。 ここが答え合わせのポイントです。

自己チェックに加えて、第三者からの指摘を次の制作に生かす

自分で確認していると、普段使う画面幅ばかり見たり、見た目に集中してリンクの確認を忘れたりすることがあります。第三者に成果物を見てもらうと、こうした確認漏れに気づく機会を作れます。

Codejump内で続けるなら、Proのプレミアムプランには納品後の動作確認と評価レポートがあります。無料課題での自己チェックから、フィードバックを受ける練習へ進む選択肢です。

指摘を受けたら、修正するだけで終わらせず、「なぜ見落としたのか」「次は何を確認すれば防げるか」を残しましょう。確認項目が増えるほど、次の制作でも自分で不具合を見つけやすくなります。

しょーごログのコーディング練習課題「全部盛り」でも、セルフチェックシートと各課題2回の表示確認を用意しています。自分で作った成果物を確認してもらい、修正まで経験したい方は活用してみてください。

納期と品質目標を意識した制作に挑戦したい方には、模擬案件も用意しています。

【模擬案件】デザインカンプからのコーディング演習課題 | 品質基準と納期あり この度、模擬案件として取り組めるコーディング課題をリリースしたため、紹介します。実案件前の最後の腕試しとして挑戦したい方向けの課題とな...

自分の制作物を確認してほしい人へ｜しょーごログのコーディング課題

「見た目は再現できたけれど、この完成度で提出していいのか分からない」

そんな方に向けて、しょーごログではプロによる表示確認付きのコーディング課題を用意しています。デザインカンプから自分で制作し、提出した成果物への指摘をもとに修正まで取り組む教材です。

各課題2回の表示確認で、見落としていた部分に気づける

自分では完成したと思っていても、第三者が見ると、デザインとの違いや動作の確認漏れが見つかることがあります。

課題には、各課題2回の表示確認が付いています。確認にはレビュー用ツール「AUN」を使い、画面上の該当箇所にコメントを付けてお返しします。

たとえば上の確認例では、ボタンのフォントや太さの違いなどを指摘しています。どの部分を見直せばよいかが分かるので、自分の制作物を使って改善の練習ができます。

自己チェックから提出・修正までを経験する

課題は、次の流れで進めます。

私が大切にしているのは、指摘された箇所を直して終わりにしないことです。「次は提出前にここも確認しよう」と気づければ、その経験を次の制作に生かせます。

Codejumpで身につけた力を使って、自分で作る・確認してもらう・修正するところまで経験したい方は、課題の内容を見てみてください。

実績になる：デザインカンプからのコーディング練習課題【全部盛り】AI時代の実務基準でレビューする、デザインカンプからのコーディング練習課題。AIを使ってもOK。現場の発注者が「実務で通るか」を判定します。...

Codejumpが終わったら次にやること

Codejumpで一通りサイトを作れるようになったら、次は条件の異なる制作に取り組み、自分ができることを説明できる形にする段階です。

すべての課題を終えることにこだわらず、目指す仕事に合わせて次の一歩を選びましょう。

模擬案件や自主制作で、制作の進め方まで練習する

私なら、次の3つを意識して練習を進めます。

Codejump Proのような仮想案件では、仕様書や複数の資料を読み解く練習ができます。

自主制作なら、架空のお店などを題材に、目的や掲載内容から考えてみるのもよいでしょう。転職や営業に向けては、制作物と一緒に「どこを自分で考えて実装したか」を伝えられるようにしておきます。

ポートフォリオ掲載と商用利用は、教材・素材ごとに確認する

Codejumpの無料デモサイトについて、公式では次のように案内されています。

この案内は、有料教材を対象に含みません。また、公式では無料の模写サイトを転職・制作会社への営業用ポートフォリオに載せることについて、評価が下がる場合があるとも説明しています。

掲載が許可されていることと、実力を十分に伝えられることは別です。 掲載する場合は、Codejumpの課題として制作したことを明記し、デザインから自作した作品や、受注した実案件と誤解されないようにしましょう。画像を別の制作物に流用する際は、素材の配布元の利用条件も確認してください。

Codejump Proの制作物は、仮想案件のサイト名を変更すればポートフォリオ掲載が可能と案内されています。商用利用や素材の転用まで同じ条件とは限らないため、利用する教材の規定を確認しましょう。

まとめ｜Codejumpで「自分で考えて作る力」を身につけよう

Codejump（旧Codestep）は、基礎学習を終えたあと、実際にサイトを作りながら理解を深められる学習サイトです。

大切なのは、課題をすべて終わらせることよりも、自分で判断して実装できる部分を増やすこと。 まずは入門編を1つ完成させ、苦手な部分を振り返りながら、複数ページや動きのある課題へ進んでいきましょう。

サンプルコードは、実装方法を学ぶための参考になります。書き方の違いだけで正誤を決めず、仕様を満たしているか、画面幅を変えても崩れないかまで確認してください。

一通り作れるようになったら、次は成果物へのフィードバックを受け、修正まで経験してみましょう。しょーごログのコーディング練習課題でも、セルフチェックとプロによる表示確認を通して、制作を振り返る機会を用意しています。

まずは今の自分に合う課題を1つ選び、手を動かしてみてください。作る・確認する・直すという積み重ねを、次の制作につなげていきましょう。

Codejumpに関するよくある質問

CodestepとCodejumpの違いは何ですか？

Codestep（コードステップ）は、Codejumpの旧名称です。 同じサービスを指しており、現在の公式サイトにも「旧 Codestep」と記載されています。過去の学習記事を参考にする場合は、課題の仕様や配布データを現在の公式ページで確認しましょう。

完全無料で使えますか？

通常のHTML/CSS・JavaScript・WordPressの課題は無料で取り組めます。ただし、実践編のCodejump Proは有料です。無料課題を始めるために、Proへ申し込む必要はありません。

作った課題をポートフォリオに載せてもいいですか？商用利用はできますか？

無料課題の模写作品は、公式でポートフォリオへの使用が認められています。無料デモのソースコードも商用利用可能ですが、販売・再配布は禁止です。画像は素材の配布元の条件を確認してください。

Proの制作物は、仮想案件のサイト名を変更すれば掲載可能と案内されています。無料教材と有料教材の利用条件は分けて確認しましょう。

2026年でもjQueryを学ぶべきですか？

CodejumpのjQueryを使う課題に取り組むなら、基本的な読み書きを学ぶ意味はあります。 番外編にも、アコーディオンやスライダーなどの練習が用意されています。

私なら、まずJavaScriptの変数・関数・イベント処理を理解し、そのうえでjQueryによる要素の取得や操作を学びます。プラグインの設定を丸暗記するより、「クリックしたら何が起きるか」を説明できることを目指しましょう。

基本的な仕組みを理解したら、あとはAIに書かせるでいいと思います。

Codejump Proは買う価値がありますか？

仕様書やデザインデータを読み、自力で制作を進める練習がしたい人には、検討する価値があります。全12回の仮想案件があり、プレミアムプランでは納品後の動作確認と評価レポートも受けられます。

一方、まだ無料課題をサンプルコードなしで進めるのが難しいなら、まずはそこで練習を続けましょう。今の自分に足りない経験を補えるかを基準に選ぶと、購入の判断がしやすくなります。

ABOUT ME

shogo

しょーごログ運営者はフリーランス歴8年目のWeb制作コーダーです。当ブログは5万PV、YouTubeチャンネル「しょーごログ」は1.5万人登録、Xは8000人。爆速鬼レビューが受けられるコーディング教材が好評です。しょーごログでは「それが知りたかった！」な情報を発信しています。 2018年に新卒銀行員→一ヶ月で退職→未経験からWeb制作フリーランスになり、8年目で33歳。