プログラミング

【脱初心者!】web制作おすすめ教材 | 元web制作フリーランスが選ぶ独学教材

泣きエンジニア
泣きエンジニア
HTML CSSが全然わからない
泣きエンジニア
泣きエンジニア
詳しく説明してくれている書籍を知りたい!
勉強エンジニア
勉強エンジニア
もっとHTML CSSのスキルをレベルアップさせたい
ゆるいエンジニア
ゆるいエンジニア
ついでに動画教材なんかもしりたい
おつゆ
おつゆ
そのお悩み、解決しましょう!

勉強の最初のうちって、本当に難しい事だらけですよね。

それでも周りがすごい先まで進んでいる気がしたり、知らないコードをつかっていたりして落ち込んでしまうこともあったり・・・

脱初心者になるためには

闇雲に上からサイトを作成していくのではなく、

考えてコーディングできるようになることです!

おつゆ
おつゆ
考えてコーディングできるようになりましょう!

この記事は

  • 初心者おすすめの教材がしりたい
  • 脱初心者になりたい!
  • おすすめのHTML CSSの学習方法を知りたい

という方にに向けて執筆しています。

初心者から抜け出すと、いろんな世界が見えてきます。

もちろん「副業で稼ぎたい」などの内容も現実味を帯びてくるでしょう!

HTML&CSS編

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

おつゆ
おつゆ
なんと言ってもまずはこの一冊!
  • 初心者に優しい入門書。
  • HTML CSSの基礎から理解し、実際に1つのサイトが作れる。
  • 解説がかなり優しく、すんなりと理解できる設定になっている。

とにかく初心者に優しい入門書!

もしprogateやドットインストールの基礎から

泣きエンジニア
泣きエンジニア
どうすればよいかわからない・・・

という人がいたら、ぜひ本を復習&実践で取り組んで見てください!

 

https://www.amazon.co.jp/【Amazon-co-jp-限定】1冊ですべて身につくHTML-CSSとWebデザイン入門講座-DL特典-Flexbox/dp/4797398892/ref=sr_1_5?__mk_ja_JP=カタカナ&crid=3P57EC5I85UPQ&keywords=HTML+CSS&qid=1636090269&sprefix=html+css%2Caps%2C208&sr=8-5

CSS設計

おつゆ
おつゆ
CSS設計の最もおすすめの書籍!
  • とにかく詳細にCSS設計がわかる
  • 良くないコードから徐々に良いコードに変わっていくのが面白い
  • この1冊でCSSをどのように当てていけばよいか(考えていけばよいか)がわかる

web制作を学ぶ人には絶対におすすめしたい書籍!

ボリュームもさることながら

なんとなく当てていたCSSをどのように当てていけばよいかがわかる

レベルアップに最高な書籍となっております。

自分のCSSの書き方を改めて考えさせられる1冊です。

おつゆ
おつゆ
個人的に今回紹介する書籍の中で一番おすすめしたい!

CSS設計完全ガイド ~詳細解説+実践的モジュール集

Web制作者のためのSassの教科書

おつゆ
おつゆ
sassの使い方はこの1冊で十分!
  • 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

おつゆ
おつゆ
初心者待望の一冊!

先程も紹介した大人気シリーズの第2段!

正直に言うと、僕はこちら実践したことがないのであまり言えませんが周りの初学者さんたちの口コミが良いので記載させていただきました。

僕が実践してないので、紹介はさらっとここまでにさせてください!

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

小見出し2-2

おつゆ
おつゆ
こちらもおすすめです!

コーディングプラクティスシリーズの第2段!

  • remなどのpx以外のコーディングについて知れる
  • 複雑なレイアウトのコーディング方法がわかる
  • 適宜vwや%などの単位を使用しているものがある

初学者には若干ハードルが高いかもしれませんが、絶対にやるべき一冊。

ブロークングリッドと呼ばれる難しいレイアウトの実践方法になっています!

ここまでできるようになると本当につよい!

実践力もかなり付くのでぜひお試しください!!

HTML&CSS コーディング・プラクティスブック 2 実践シリーズ

ワードプレス編

おつゆ
おつゆ
さて、次はワードプレス編です!

ワードプレスは学習に時間がかかりますが、なれてくれば理解が進むでしょう!

最初は何言ってるのかわからないかと思いますが、とにかく複数の教材を使って少しずつワードプレスの概念を理解していきましょう!

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版]

おつゆ
おつゆ
シンプルなブログ型サイトをワードプレス化する基礎がわかる!
  • よくあるブログ型のワードプレス化が学べる
  • サイトデザインがキレイでコーディングモチベーションが上がる
  • テンプレート関数や導入方法に関する説明が丁寧

こちらはシンプルなブログ型サイトをワードプレス化していく教材です。

よく見るサイトデザインにプラスしてワードプレスの関数なども丁寧に解説してくれています。

後述するワードプレスの教科書が難しいと感じる場合は、まずこちらを試してみるとよいかもしれません!

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] Webデザイナー養成講座

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版] 

おつゆ
おつゆ
PHPの概念がいまいち理解できない人におすすめ!
  • PHPの基礎がわかる!
  • WordPressを見据えた内容であり、ゴリゴリのPHPの内容ではない
  • イラストが豊富で複雑な内容をイメージで理解できる

ワードプレスとPHPは切ってもきれない関係です。

そのPHPつまずく初心者さんにおすすめの教材です。

とにかく「はじめから、ていねいに」のタイトル通り丁寧に進んでいきます。

PHPもほどよいところまで進みます。

目的はPHPエンジニアになるというところではなく、WordPressを使用できるというところにおいているので難易度も程よくいい感じです!

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版]

ビジネスサイトを作って学ぶ WordPressの教科書

 

ワードプレスサイト作成の定番書!

  • ビジネスサイトをワードプレス化できる
  • そこそこの難易度で実務では必須の内容構成
  • 基礎から応用まで幅広い範囲をカバー

良書です。断言します。

こちらはビジネスサイトをワードプレス化していく定番書です。

実際の案件はブログ型の構築というものはほとんどなく、ほぼ全てはビズネスサイトといって良いでしょう。

そのため、ビジネスサイトをワードプレス化するというのは実務では必須になっていきます。

難易度は正直高いです!が、このレベルまで実力をもっていきましょう!

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.5.x対応版

WordPress開発マスター講座

ワードプレスの一連の作成方法が動画でわかる!

  • 初級~上級の内容までカバー
  • 動画の説明で実際に手を動かすのでわかりやすい
  • 1からワードプレス化していく手法が体系的に学べる

動画で学べる教材です。

特に素晴らしいのは、初級的な内容から上級的な内容まで網羅的に解説されていることです!

動画を見ながら、ワードプレス化の流れがわかるようになっています!

JS編

ここからはJavaScript編です!

プログラミング学習の最大の挫折点。

それはjQueryやjavascript。

どちらもいわゆる「プログラミングっぽい」という理由から難しくなり、挫折者を多く排出する場所になります。(プログラミングっぽいはおつゆの独断と偏見)

jQuery最高の教科書

おつゆ
おつゆ
まさに最高の教科書!
  • 初心者にかなり優しい設計
  • 1STEPずつ進むからつまずくことがほとんどない
  • ただのサンプルコード集ではなく、「jQuery作成の考え方」が学べる

僕がjQueryで挫折したときにお世話になった教科書です。

とにもかくにも、1ステップずつ進むので理解がしやすい。

書籍化にあたりチームメンバーに1人、全くの初心者を入れたそうです。そのおかげで初心者にもわかりやすいような設計になっているのだと思います。

jQuery最高の教科書

動くWebデザインアイディア帳

おつゆ
おつゆ
超実務向き最強の1冊!
  • 実務でよく使う動きがよく分かる!
  • サンプルコードが乗っているので、コピペで使える!
  • どのように構成されているのか?の解説もありJS系のコードが紐解くようにわかる!

1時期かなりバズっていたように感じるこちらの書籍。(おつゆ感想)

記載の量もかなり多く、実務でよくつかうものにんあ

動くWebデザインアイディア帳

確かな力が身につくJavaScript「超」入門

おつゆ
おつゆ
JavaScriptの入門書!
  • 超入門の名前に沿う、本当の入門書!
  • 図解やイラストが豊富で難しい内容もビジュアルで認識できる
  • 動きのあるwebサイトを作るための基礎がわかる

ビジュアル付きでかなりわかりやすく解説してくれている本です!

特にかなり優しい設計になっているので、挫折率の高いJavaScriptの勉強の手助けになるのではないかと思います!

確かな力が身につくJavaScript「超」入門 第2版

その他

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

おつゆ
おつゆ
web製作者・コーダーこそ持っておいてほしい1冊!
  • 目的別に別れたwebサイトのデザイン集
  • 様々なジャンルのwebサイト(デザイン)を網羅的にみることができる
  • フォントや色に詳しくなれる

個人的にはコーダーにこそ持っておいてほしい1冊。

様々なジャンル別のサイトは網羅的に記載されています。

僕はコーディング前の要件定義の段階や提案の資料としてこの1冊を使用していました!

 

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

 

改訂2版 わかばちゃんと学ぶ Git使い方入門

おつゆ
おつゆ
まじでわかりやすい・・・

gitの使い方はこれですべてわかる

マンガ形式で話が進んでいくので、すらっと中身が入ってくる。

初心者でも体系的にgitを使えるようになる。

とにかくわかりやすかった1冊。

gitは専門的な用語が多く概念を理解するにも時間がかかるのですが、専門用語も漫画を読んでいるうちに理解できるようになります!

例えや解説が絶妙で、gitに関してはこの1冊で困ったことはありません。

改訂2版 わかばちゃんと学ぶ Git使い方入門

まとめ

いかがだったでしょうか?

どれもレベルアップ間違いなしの教材です!

おつゆ
おつゆ
お試しになってみてください!