勉強の最初のうちって、本当に難しい事だらけですよね。
それでも周りがすごい先まで進んでいる気がしたり、知らないコードをつかっていたりして落ち込んでしまうこともあったり・・・
脱初心者になるためには
闇雲に上からサイトを作成していくのではなく、
考えてコーディングできるようになることです！
この記事は
- 初心者おすすめの教材がしりたい
- 脱初心者になりたい！
- おすすめのHTML CSSの学習方法を知りたい
という方にに向けて執筆しています。
初心者から抜け出すと、いろんな世界が見えてきます。
もちろん「副業で稼ぎたい」などの内容も現実味を帯びてくるでしょう！
HTML&CSS編
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
- 初心者に優しい入門書。
- HTML CSSの基礎から理解し、実際に1つのサイトが作れる。
- 解説がかなり優しく、すんなりと理解できる設定になっている。
とにかく初心者に優しい入門書！
もしprogateやドットインストールの基礎から
という人がいたら、ぜひ本を復習&実践で取り組んで見てください！
CSS設計
- とにかく詳細にCSS設計がわかる
- 良くないコードから徐々に良いコードに変わっていくのが面白い
- この1冊でCSSをどのように当てていけばよいか（考えていけばよいか）がわかる
web制作を学ぶ人には絶対におすすめしたい書籍！
ボリュームもさることながら
なんとなく当てていたCSSをどのように当てていけばよいかがわかる
レベルアップに最高な書籍となっております。
自分のCSSの書き方を改めて考えさせられる1冊です。
Web制作者のためのSassの教科書
- Sassの実践的な使い方がわかる
- 使用方法だけでなく、どのように使用できるか？というところまで解説
- gulpなどについても記載があり「効率」を上げるノウハウが詰まっている
HTML CSSを勉強するとよく勘違いをしている人がいるのですが
実務でsassを使わないことはありません！！
というくらい、ほぼ100%Sassで実装します。
そんなSassをどうやって使うか？からどう使えば効率的か？まで解説してくれている1冊。
Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ
サイト作成実践編
さて、ここからはサイト作成編です！
HTML CSSの基礎や使用方法がわかったのならば、どんどんサイトを作成してアウトプットしていきましょう！
サイトを作成する！
にフォーカスを当てたときのおすすめ紹介していきますね！
HTML&CSS
コーディング・プラクティスブック 1 実践シリーズ
- どのようにコーディングしていくか？のコーディングの流れがわかる。
- コーディングを始める前に確認しなければならないことが詳しく記載されている
- remやvwなど、様々な技法で作成されている
HTML CSSを勉強したてのときに僕もぶち当たりました。
こんな悩みを解決してくれるコーディング練習教材です。
モバイルファーストの設計で「どうコーディングしていくか？」「どのようなコードを書いていくか？」
が詳しく説明されている。初心者はかなりお世話になるはず！
HTML&CSS コーディング・プラクティスブック 1 実践シリーズ
小見出し2-1
先程も紹介した大人気シリーズの第２段！
正直に言うと、僕はこちら実践したことがないのであまり言えませんが周りの初学者さんたちの口コミが良いので記載させていただきました。
僕が実践してないので、紹介はさらっとここまでにさせてください！
【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)
小見出し2-2
コーディングプラクティスシリーズの第２段！
- remなどのpx以外のコーディングについて知れる
- 複雑なレイアウトのコーディング方法がわかる
- 適宜vwや%などの単位を使用しているものがある
初学者には若干ハードルが高いかもしれませんが、絶対にやるべき一冊。
ブロークングリッドと呼ばれる難しいレイアウトの実践方法になっています！
ここまでできるようになると本当につよい！
実践力もかなり付くのでぜひお試しください！！
HTML&CSS コーディング・プラクティスブック 2 実践シリーズ
ワードプレス編
ワードプレスは学習に時間がかかりますが、なれてくれば理解が進むでしょう！
最初は何言ってるのかわからないかと思いますが、とにかく複数の教材を使って少しずつワードプレスの概念を理解していきましょう！
［改訂版］WordPress 仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］
- よくあるブログ型のワードプレス化が学べる
- サイトデザインがキレイでコーディングモチベーションが上がる
- テンプレート関数や導入方法に関する説明が丁寧
こちらはシンプルなブログ型サイトをワードプレス化していく教材です。
よく見るサイトデザインにプラスしてワードプレスの関数なども丁寧に解説してくれています。
後述するワードプレスの教科書が難しいと感じる場合は、まずこちらを試してみるとよいかもしれません！
［改訂版］WordPress 仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］ Webデザイナー養成講座
WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版]
- PHPの基礎がわかる！
- WordPressを見据えた内容であり、ゴリゴリのPHPの内容ではない
- イラストが豊富で複雑な内容をイメージで理解できる
ワードプレスとPHPは切ってもきれない関係です。
そのPHPつまずく初心者さんにおすすめの教材です。
とにかく「はじめから、ていねいに」のタイトル通り丁寧に進んでいきます。
PHPもほどよいところまで進みます。
目的はPHPエンジニアになるというところではなく、WordPressを使用できるというところにおいているので難易度も程よくいい感じです！
WordPressユーザーのためのPHP入門 はじめから、ていねいに。［第3版］
ビジネスサイトを作って学ぶ WordPressの教科書
ワードプレスサイト作成の定番書！
- ビジネスサイトをワードプレス化できる
- そこそこの難易度で実務では必須の内容構成
- 基礎から応用まで幅広い範囲をカバー
良書です。断言します。
こちらはビジネスサイトをワードプレス化していく定番書です。
実際の案件はブログ型の構築というものはほとんどなく、ほぼ全てはビズネスサイトといって良いでしょう。
そのため、ビジネスサイトをワードプレス化するというのは実務では必須になっていきます。
難易度は正直高いです！が、このレベルまで実力をもっていきましょう！
ビジネスサイトを作って学ぶ WordPressの教科書 Ver.5.x対応版
WordPress開発マスター講座
ワードプレスの一連の作成方法が動画でわかる！
- 初級~上級の内容までカバー
- 動画の説明で実際に手を動かすのでわかりやすい
- １からワードプレス化していく手法が体系的に学べる
動画で学べる教材です。
特に素晴らしいのは、初級的な内容から上級的な内容まで網羅的に解説されていることです！
動画を見ながら、ワードプレス化の流れがわかるようになっています！
JS編
ここからはJavaScript編です！
プログラミング学習の最大の挫折点。
それはjQueryやjavascript。
どちらもいわゆる「プログラミングっぽい」という理由から難しくなり、挫折者を多く排出する場所になります。（プログラミングっぽいはおつゆの独断と偏見）
jQuery最高の教科書
- 初心者にかなり優しい設計
- 1STEPずつ進むからつまずくことがほとんどない
- ただのサンプルコード集ではなく、「jQuery作成の考え方」が学べる
僕がjQueryで挫折したときにお世話になった教科書です。
とにもかくにも、１ステップずつ進むので理解がしやすい。
書籍化にあたりチームメンバーに１人、全くの初心者を入れたそうです。そのおかげで初心者にもわかりやすいような設計になっているのだと思います。
動くWebデザインアイディア帳
- 実務でよく使う動きがよく分かる！
- サンプルコードが乗っているので、コピペで使える！
- どのように構成されているのか？の解説もありJS系のコードが紐解くようにわかる！
１時期かなりバズっていたように感じるこちらの書籍。（おつゆ感想）
記載の量もかなり多く、実務でよくつかうものにんあ
確かな力が身につくJavaScript「超」入門
- 超入門の名前に沿う、本当の入門書！
- 図解やイラストが豊富で難しい内容もビジュアルで認識できる
- 動きのあるwebサイトを作るための基礎がわかる
ビジュアル付きでかなりわかりやすく解説してくれている本です！
特にかなり優しい設計になっているので、挫折率の高いJavaScriptの勉強の手助けになるのではないかと思います！
その他
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
- 目的別に別れたwebサイトのデザイン集
- 様々なジャンルのwebサイト（デザイン）を網羅的にみることができる
- フォントや色に詳しくなれる
個人的にはコーダーにこそ持っておいてほしい１冊。
様々なジャンル別のサイトは網羅的に記載されています。
僕はコーディング前の要件定義の段階や提案の資料としてこの１冊を使用していました！
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
改訂2版 わかばちゃんと学ぶ Git使い方入門
gitの使い方はこれですべてわかる
マンガ形式で話が進んでいくので、すらっと中身が入ってくる。
初心者でも体系的にgitを使えるようになる。
とにかくわかりやすかった１冊。
gitは専門的な用語が多く概念を理解するにも時間がかかるのですが、専門用語も漫画を読んでいるうちに理解できるようになります！
例えや解説が絶妙で、gitに関してはこの１冊で困ったことはありません。
まとめ
いかがだったでしょうか？
どれもレベルアップ間違いなしの教材です！
