この記事は、コーディングの全初学者におすすめしたいCodejumpの初書籍『HTML&CSS Webデザイン 実践入門』の紹介です。
こんにちは、めがねんです！
《独学応援メンター》として、これまで150名以上の独学〜営業〜案件対応を個別サポートしてきましたが、その中でWeb制作を学び始めた方々が躓くポイントといえばだいたいこんな感じでした????️
複数ページのサイトをどう構成すればいいのかイメージすら湧かない…
レスポンシブ対応とかアニメーションとか実務で使えるスキルってどう学べばいいんだろう…
独学で学習しているけど、次に何をすればいいのかがぼんやりしてる…
これらは初学者がステップアップを目指す上で必ず直面するものですが、そんな初心者の悩みを解決できる学習プラットフォームがCodejump（旧Codestep）！
本記事の目次
Codejumpとは？
Codejumpは、HTMLとCSSの基礎から実務レベルのスキルまでを段階的に学べるオンライン教材を提供しているプラットフォーム。
2020年の登場以来、なんと10万人以上が利用してきた今や定番の学習サイトです。
僕が運営している《独学応援メンター》でも初学者の方に利用を推奨していますが、ProgateなどでHTML、CSS、JavaScriptの基礎学習を終えた方にとって、デザインカンプからのコーディングを通して練習を行いながら実践的なWebサイトの制作スキルを身につけられるっていうのは、これ以上ないほど魅力的ですよね。
しかも、無料で。
僕が今からコーディングを独学で学ぶなら、間違いなく絶対にCodejumpの全課題に挑戦します。
そんなCodejumpのノウハウを凝縮し、「独学でも実務スキルを確実に身につけたい」という方のために作られた書籍が今回ご紹介する『HTML&CSS Webデザイン 実践入門』。
Codejumpの初書籍『HTML&CSS Webデザイン 実践入門』
サンプルサイトを制作しながら、初心者がつまずきやすいポイントをしっかりカバーしてくれる『HTML&CSS Webデザイン 実践入門』。
丁寧で分かりやすいCodejumpらしさを踏襲しつつ、より詳しくHTMLとCSSの基礎を学び終えた方が「次に何を学べばいいのか分からない」という悩みを解消し、実務で役立つスキルを着実に身につけられるよう構成されている一冊です。
- HTMLとCSSの基礎を終えたけど、次に何を学べばいいか分からない人！
- 実務レベルのサイト制作を独学で習得したい人！
- サンプルサイト制作を通じて実践的なスキルを具体的に身につけたい人！
初学者を卒業できる全6章
全6章で構成されている『HTML&CSS Webデザイン 実践入門』。
ここでは各章の特徴を挙げていきますので、あなたにとって読むべき章があるかどうかチェックしていきましょう。
第1章: 「サイトのレイアウトが崩れる…」を解消！Flexboxの基本をマスター
「横並びがうまくいかない」「レスポンシブ対応が難しい」といった多くの初学者が最初にぶち当たる壁を乗り越える第１章。
ここでは、シンプルなプロフィールサイトの制作を通じてFlexboxの基本を学んでいきます。
- １ページ
- HTMLの基本タグ（header、 footer、 main、 nav、 section、 div、 img、 p）の使い方
- 見出しタグ（h1、 h2）の使い方
- Flexbox を使用した横並びの方法
- リストタグ（ul、 li）の使い方
- レスポンシブ対応
第2章: 思い通りに配置したい！コンテンツのレイアウトを自在に操る方法
要素を思い通りの位置に配置できること。
初学者卒業の第一歩といえばこれですが、第２章ではCSSの「ポジション」の理解を深めながら自由自在にレイアウトを操れるようになっていきます。
- １ページ
- position を使用したコンテンツの固定
- position を使用したコンテンツ同士の重ね方
- position を使用した擬似要素の重ね方
- フォント指定
- 画像の高さ固定
- 背景の設定
第3章: 「複数ページをどう作ればいい？」を解決！基本構造と設計術
「ページ間のリンクをどう作ればいいの？」「構造をどう整理すればいい？」という悩みを解消できる第３章。
複数ページで構成されるサービスサイトの制作を通じて、基本構造の設計術を学びます。
- ４ページ
- 複数ページのサイト制作
- ラインが斜めのボックス
- 吹き出し
- 擬似要素で図形
- 表
- フォーム
- Google フォント
- ハンバーガーメニュー
第4章: もっとおしゃれに！様々なレイアウトパターンを身につける方法
日々見かける様々なレイアウトデイザインの作り方を学べる第４章。
少し複雑なHTML&CSS&JavaScript（jQuery）を使用した複数レイアウトのカフェサイトの制作を通して、色々なレイアウトの作り方について学びます。
- ４ページ
- 複数レイアウトのサイト制作
- グローバルナビゲーションのサイド配置
- 縦書き
- CSS Grid Layout（グリッドレイアウト）
- Googleマップの埋め込み
- YouTubeの埋め込み
第5章: サイトをもっと魅力的に！動きのあるデザインを作る基本テクニック
ある程度デザインカンプ通りに作れるようになってきたときに思うのが、「サイトをもっと動きのある魅力的なデザインにしたい」ですよね。
ということで、ランディングページの制作を通じて動きのあるWebサイト制作を学べるのが第５章。
- １ページ
- CSSアニメーション
- パララックス
- イベントによる要素制御
- jQueryのメソッド
- スライダー
- PCとスマートフォンの画像切り替え
第6章: 実務で求められる総合力を高める！コーポレートサイトを完成させる
学習が進んでくれば、当然「実際に仕事で使えるサイトを作りたい」って思いますよね。
最後の第６章では、集大成としてこれまで学んだスキルを総動員しつつ、アコーディオンやモーダルウィンドウといった実務で定番のテクニックについても学びながらコーポレートサイトを制作していきます。
- ６ページ
- ドロップダウンメニュー
- スクロール時のフェードイン
- タブ切り替え
- モーダルウィンドウ
- アコーディオン
【まとめ】実践的なスキルを学んで次のステップにジャンプしよう！
『HTML&CSS Webデザイン 実践入門』は、コーディング初心者が「次のステップが分からない」という悩みを解消し、実務で役立つスキルを効率的に学べるよう設計されている一冊でしたね。
従来であれば、制作会社に入社して現場を経験しないと学べなかった数々のテクニックが書籍で学べてしまうというのは、独学に励むすべての方にとって最高の教材と言っても過言ではないでしょう。
《独学応援メンター》でも、推薦図書として今後のサポートでオススメしていくことにしました。
今なら書籍の早期購入者限定として「仕事が決まる！最強ポートフォリオテンプレート」をプレゼント中だそうですよ！
HTMLとCSSを学んだけど、実際にサイトを作りはじめるとどこから手をつければいいのか分からない…