HTML & CSS Webデザイン 現場レベルのコーディング・スキルが
身につく実践入門

メッセージ

皆さま、こんにちは。
Codejumpを運営しています、小豆沢 健と申します。

この度、2025年1月14日（火）に、Codejumpから初となる書籍の発売が決定いたしました。

書籍名は、『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』です。1冊で現場レベルのコーディングスキルが身につく、Web制作の実践本になります。

Codejumpを立ち上げてから約5年、多くの人にご利用いただいた結果としてこのような機会をいただくことができました。ご利用者の皆さまには改めてお礼を申し上げます。

さて、今回は書籍のご紹介の他に、皆さまにお伝えしたいことがありメッセージを書かせていただきました。そもそもなぜこの書籍を出版することになったのかという経緯と合わせて、今後の皆さまの学習の進め方についてもお話しさせていただきたいと思います。

出版の経緯

Codejumpは、あらゆる人が自由にWeb制作の実践的なコーディング学習をできるようにという思いのもと、2020年に立ち上げたコーディング学習に特化した学習サイトです。立ち上げ当初から全ての学習コンテンツを無料で開放し、これまで本当に多くの方々に利用していただきました。

もともとCodejumpを立ち上げる際に特に意識していたことが2点ありました。1点目は「学習者が挫折しないサイトを作る」ということ。2点目は「仕事で必要なスキルが身につく学習内容にする」ということです。

まず、1点目の「学習者が挫折しない」という点について、ステップアップ方式の学習スタイルを取り入れました。Codejumpを学習中の方にはお馴染みの「入門編〜実践編」と難易度が上がっていく学習スタイルです。このスタイルを採用したことにより、基礎学習を終えて初めて模写やデザインカンプからのコーディングを始めた方の挫折を減らすことができました。

また、2点目の「仕事で必要なスキルが身につく」という点について、各練習サイトを構成する要素の中に実務で使うスキルをまんべんなく盛り込みました。これにより、全ての練習課題に取り組むことで仕事でよく使う定番のスキルを一通り学ぶことができるようにしました。

その為、現在Codejumpの練習課題は入門編6件、初級編5件、中級編5件、上級編2件、そして実案件をモデルにした実践編が12件の、合計30件とかなりの練習量になっています。

実際、私自身この練習量が仕事で使うコーディングスキルを身につけるのに必要な練習量だと信じてこれまでCodejumpを運営してきました。

しかし、2年前に出版のお話をいただいたのをきっかけに、私は「実務で必要なコーディングスキルを身につけるために必要な学習」について改めて見直すことになりました。

Codejumpを立ち上げてから3年が経過していたこともあり、Codejumpの運営で得た学習コンテンツを作るノウハウも蓄積していました。そのおかげで、当時よりも高いレベルで学習内容の見直しを行うことができました。

Codejumpの入門編から実践編の中で学ぶ学習要素を全て抽出すると同時に、これまで私自身が仕事で携わってきた100を超える制作案件を全て見返し、改めて本当に必要な技術を過不足なく洗い出しました。そして、その洗い出した技術をもとに、改めて学習課題を作成し直しました。

その結果、30件あった練習課題を6件に凝縮することができたのです。

そして、その6件の練習課題を1冊にまとめたのが、今回の書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』です。

この書籍を利用することで、Codejumpで学習中の皆さまの学習効率を飛躍的に高めることができると思い、本書を出版するに至りました。

書籍の概要について

この本は、仕事に必要なコーディングスキルを身につけるための実践書です。HTMLの基礎学習を終えた方が、入門編から実践編の6つのサンプルサイト制作を通して、この書籍1冊で実務レベルのコーディングスキルを身につけます。

【第1章】入門編：プロフィールサイト

基礎学習を終えたあとのウォーミングアップ用の練習サイト

【第2章】初級編：ブランドサイト

かんたんなHTMLとCSSだけで作れる、1ページのシンプルなWebサイト

【第3章】中級編：サービスサイト

かんたんなHTML、CSS、JavaScript（jQuery）を使用した複数ページのWebサイト

【第4章】上級編：カフェサイト

少し複雑なHTML&CSS&JavaScript（jQuery）を使用した、複数レイアウトのWebサイト

【第5章】応用編：ランディングページ

複雑なHTML&CSS&JavaScript（jQuery）を使用した動きのあるLP（ランディングページ）

【第6章】実践編：コーポレートサイト

実案件をモデルにした実践的なWebサイト

＜習得テクニック＞

この6サイトの中で、実務で使うレイアウト（シングルカラム、2カラム、タイル型、ブロークングリッド、フルスクリーンなど）の作り方がすべて学べます。また、実務で使うテクニック（フレックスボックス、ポジション、CSS アニメーション、JavaScript（jQuery）、ドロップダウンメニュー、ハンバーガーメニュー、アコーディオン、モーダルウィンドウなどなど、書き出せばキリがないのでここでは割愛）も一通り学べるようになっています。

＜レイアウト構成の解説＞

書籍の中ではソースコードの解説だけでなく、Codejumpと同じようにレイアウト構成の解説も行なっています。コーディングのテクニックだけでなく、コーディングを行う前に必要な、デザインからレイアウトをイメージするレイアウト構成力も養えるようになっています。

＜ソースコードの解説＞

書籍内のソースコードは解説箇所だけ抜粋するのではなく、全てのコードを実際のコーディング手順に沿って掲載しています。そのため、書籍を見ながら最後まで一緒にサンプルサイトを作り上げることができます。

＜OnePoint解説＞

ソースコードの中に出てくるテクニックの中で、仕事でよく使うものについては「OnePoint」として、詳しく掘り下げて解説しています。これにより、実務で使うテクニックに集中して効率的に学ぶことができるようになっています。

＜デザインカンプ＆仕様＆ソースコード付き＞

全てのサンプルサイトに、「Figma」と「Adobe XD」のデザインカンプがついているので、実務と同じくデザインカンプからのコーディング練習ができます。また、サイトの中に動きの入る5章と6章には仕様をまとめたページが付いているので、より本格的なデザインカンプと仕様書からのコーディング練習もできます。最後に、サンプルコードと自分の書いたコードの比較チェックも行えます。

今後の学習の進め方について

現在Codejumpで学習中の方は、おそらくCodejumpの練習課題を入門編から順番に進めていっていることかと思います。しかし、この書籍を使うことでさらに効率的に学習を進められるようになります。

今後の学習の順番としては、「書籍をメイン」にし、「Codejumpを補助」として活用していただければと思います。

具体的には、まず初めに書籍の入門編から練習を行なっていただき、スムーズに進んだ場合は初級編、中級編と次のレベルへ進んでいってください。もしつまづいた場合は、Codejumpの同じレベルの練習サイトを使ってそのレベルのコーディングに慣れるまで数をこなしてみてください。

この進め方で学習することにより、Codejumpの練習課題を1つずつ順番に全部やっていくよりも、短い時間で効率的に実務に必要なスキルを習得することが可能になります。

最後に

書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』の発売は、年明け1月14日の火曜日です。「114でいいよ」と覚えておいてくださいね！

全国の書店とAmazonでご購入いただけますので、楽しみにお待ちいただければと思います。

ちなみに本書ですが、執筆を始めてから発売まで約2年の歳月がかかりました。「Web制作の本書くのになんで2年もかかるの？」と思われた方。

本日から発売までの間に、執筆のきっかけから本が完成するまでの裏話を「出版ブログ」の中で隠すことなく全て発信していこうと思います。なぜ2年もかかったのか、その謎が分かるようになっていますので、ぜひ楽しみにしていてくださいね！

そして、最後になりましたが、今回、書籍の購入者特典として素敵なプレゼントを用意しているところです。コーディング学習を終えた後のポートフォリを作りも役立つようなプレゼントを考えています。こちらも後日、詳細を発表しますので楽しみにお待ちいただければと思います。！

長くなってしまいましたが、メッセージは以上となります。引き続き、Codejumpは皆さまの学習を全力でサポートしていきますので、何卒宜しくお願いいたします。

ここからは、書籍の紹介になります。詳しい内容については、これから発売日までの間に順次公開していきますので、こうご期待！