ひろきです。この記事ではWEB制作に必要なスキルをメンターとして受講生に教えている僕がよく紹介するサイトを集めてみました。
ここで紹介する各勉強過程の流れや紹介する記事の内容は実務でも使える内容となっているので、しっかりメモして役立ててください！
独断と偏見で記事を紹介していきます！また、WEB制作において、実務で使えるリンクも貼っておくので全リンクしっかり確認してみるといいでしょう！
WEB制作を習得するための簡易ロードマップ
さて、僕の方でも簡単にロードマップ共有します。抑えておきたいポイントはこのように強調していきます。以下で紹介する本は最低限押さえておきたい本なので、持っていない人は1冊ずつてもとにあるといいでしょう。
ここが一番大事！
2つから3つほどデザインカンプからのコーディングを経験しておきましょう。BEM設計を必ず意識して対応して欲しいです。
検証ツールの使い方を覚えよう
まず、前提として検証ツールの使い方を覚えましょう！
検証ツールを制すものはWEB制作を制す！
こんなこと言っている人居ないかもしれませんが、大事なので使えるようになってください！検証ツール使えないと実務をこなすのは難しいと思ってください！
少しずつでいいので慣れましょう。
HTML&CSSでよくある質問
ご参考までに、各質問確認していってくださいね！
HTML5規則
HTML5では入れ子のルール（規則）があります！
CSSチートシート
Bootstrap
Bootstrapは実務では使わないと言われてますが、CSSのフレームワークなので覚えておくに越したことはないです。使わなくても理解して多少知見があるないではまったくもって違います。
公式サイトを見ましょう！ブログを調べるのもいいですが、絶対に公式サイトを確認するようにしてください。公式サイトが一番詳しく書いてあります。上が日本語版で下が英語版です。お好きな方をどうぞ。あとはバージョンをしっかり確認してください！読み込んでいる内容と記述している内容が異なっているとうまく動作しません。
命名規則（クラス名）
以下の記事を参考に進めるといいでしょう！クラス名に答えは無いのですが、他の人が見てもしっかり分かるクラス名を意識するようにしましょう！
BEM設計 ※重要
これは質問があるわけではないですが、私が実務で困ったことです。なるべく早いうちから意識しておくといいです。
BEMのB・E・Mがよく分からないという人は以下の記事が分かりやすくておすすめです！図解されててそれが結構ピンとくる内容になっているのでぜひ保存しておいてください！
jQueryでよくある質問
jQueryに関する質問は非常に多いです。外部からjQueryを読み込んで動きをつけるなにそれって感じなので読み込みできているかどうかを含めてしっかり理解しておきたい部分の一つです。
jQuery①
まずはCDNを読み込みましょう！そして、しっかり読み込みされているか確認しましょう！（後述）
CDNの一覧（他のも含む）は、以下からも取得できます！
またしっかり読み込めているか確認をするためには、alertを使うといいです。以下の記事に書いてあるので読んでみてください。ページを更新した時にアラートが表示されれば読み込みOKです！CDNは3系を読み込むようにしてくださいね！
jQuery②
よくあるミスを。
- jQueryを重複して読み込んでいる → 1つ読み込めばOKです
- 読み込み順序が逆になっている → jQueryをまず読み込むようにしましょう
- HTML内に書くときは、<script>タグの中に
- jsファイルに書くときは、<script>タグ不要
Modal
モーダルはこちらの記事で解決できます！
SlideToggle
slideToggleで検索しましょう。アコーディオンにも使えます！
Drawer.js
調べて出てきたブログではなく、公式サイトを見ましょう。絶対に公式サイトを見てください。絶対にです！情報は常に新しくなるので数年前に書かれたブログについては情報が間違っている可能性もあります。
何度でも言いますが、公式サイトを見てくださいね！英語が読めないとか関係ありません！
Swiper.js
これも同じです！公式サイトを見てください！！
分からない事があったら誰かのブログを調べるのではなく、Swiper APIを見るようにしてください！細かい仕様が書いてあります。
ちなみに5系より新しいものはIE対応していません。IE対応させる場合は4系を使うようにすると良いです！以下から探せます！
Swiperのデザインのカスタマイズは以下を参照すると良いでしょう！※CSSデザインだけですよ参考にしていいのは！！
基本的に公式を見るようにと言っていますが、私が過去参考にしたサイトで唯一と言っていいほど参考になったサイトが以下です。本当に困ったときはこのブログを見直すと良いでしょう。Swiperのバージョンごとに管理して書いてあります。
WordPressでよくある質問
ここは正直、質問がありすぎるのでほとんど割愛します。笑
環境構築で躓く人が多いのでその部分だけ共有しますね！
PHP環境構築
以下の記事が良く書かれていてわかりやすいです。一つの記事でWindowsとMacに対応しているので読み手側もわかりやすくていいですね！
あとは以下の本が、構築の一通りの手順を示しているので読みながら進めると良いと思います！
WordPress
Codexを読みましょう！ひたすら読みましょう！分からなくても読みましょう！CodexがWordPressの全てです！
無垢なWordPressのインストールはこちらです。
番外編：実務で使える機能編
実務では、FTPツールの使用やお問い合わせフォームの設置は必ず必要になってきます！
Googleフォームの設置
こちらを読んでおけば問題ないです！
PHPメールフォームの実装
お問い合わせフォームの設置ではこちらが主流です。自分はいつも以下を使っています！
Basic認証
テスト環境でお客様に確認してもらうときは必ず設定しましょう！
まとめ
Web制作において暗記は不要です！数をこなして経験を多く積みましょう。分からないことは調べて大丈夫です。調べない人なんていません。調べて実装できればそれはあなたの知識です！
是非この記事を有効活用してください！
コメント