ひろきです。この記事ではWEB制作に必要なスキルをメンターとして受講生に教えている僕がよく紹介するサイトを集めてみました。
ここで紹介する各勉強過程の流れや紹介する記事の内容は実務でも使える内容となっているので、しっかりメモして役立ててください！
独断と偏見で記事を紹介していきます！また、WEB制作において、実務で使えるリンクも貼っておくので全リンクしっかり確認してみるといいでしょう！
目次
WEB制作を習得するための簡易ロードマップ
さて、僕の方でも簡単にロードマップ共有します。抑えておきたいポイントはこのように強調していきます。以下で紹介する本は最低限押さえておきたい本なので、持っていない人は1冊ずつてもとにあるといいでしょう。
STEP
HTML&CSSを勉強しよう
ここは正直慣れの要素が大きいと感じています。繰り返し繰り返しひたすら手を動かすのが一番はやいです。徐々に理解することが出来ます！
以下の本はBEM設計についても記述されているので、持っておいて損はないです。むしろ持っておくべき1冊です。
STEP
Sassを勉強しよう
これは必須です！しっかり覚えましょう！とはいえ機能が多いので徐々に慣れていけばいいと思います。
STEP
jQueryを勉強しよう
あまり深く勉強する必要はありません。最低限どうすればどう動くかを理解できれいれば大丈夫です。あとは調べて実装できるようにしましょう。
オススメの1冊
STEP
デザインカンプからのコーディング
ここが一番大事！
2つから3つほどデザインカンプからのコーディングを経験しておきましょう。BEM設計を必ず意識して対応して欲しいです。
STEP
WordPress(PHP)の基礎、WordPress構築
WordPressを勉強するにあたっては必須の知識ですが、がっつりPHPを勉強する必要はありません。WordPressに特化したPHPを勉強するようにしましょう
ビジネスサイトを作って学ぶWordPressの教科書 Ver. 5.x対応版
検証ツールの使い方を覚えよう
まず、前提として検証ツールの使い方を覚えましょう！
検証ツールを制すものはWEB制作を制す！
こんなこと言っている人居ないかもしれませんが、大事なので使えるようになってください！検証ツール使えないと実務をこなすのは難しいと思ってください！
少しずつでいいので慣れましょう。
サルワカ | サルでも分かる図解説明マガジン
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
Googleクロームの便利な「要素の検証」機能の使い方を分かりやすく解説します。ウェブデザインをする人が特に知っておくべき機能を中心に紹介していきます。
HTML&CSSでよくある質問
ご参考までに、各質問確認していってくださいね！
HTML5規則
HTML5では入れ子のルール（規則）があります！
webliker（ウェブライカー）
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
html5のタグの入れ子のルールの保存版まとめです。「〇〇タグに〇〇タグって入れてもいいんだっけ？」という悩みを全部解決します！すべてw3cのコンテンツモデルの仕様に基…
CSSチートシート
Webチートシート for エンジニア
Webチートシート for エンジニア
チートシートのまとめサイトです。プログラマー・エンジニアを対象に要点をすぐに参照できるようにチートシートにまとめてみました。Web開発、モバイルアプリ、CLIなど内容…
Webチートシート for エンジニア
Webチートシート for エンジニア
チートシートのまとめサイトです。プログラマー・エンジニアを対象に要点をすぐに参照できるようにチートシートにまとめてみました。Web開発、モバイルアプリ、CLIなど内容…
Webチートシート for エンジニア
Webチートシート for エンジニア
チートシートのまとめサイトです。プログラマー・エンジニアを対象に要点をすぐに参照できるようにチートシートにまとめてみました。Web開発、モバイルアプリ、CLIなど内容…
Webチートシート for エンジニア
Webチートシート for エンジニア
チートシートのまとめサイトです。プログラマー・エンジニアを対象に要点をすぐに参照できるようにチートシートにまとめてみました。Web開発、モバイルアプリ、CLIなど内容…
Bootstrap
Bootstrapは実務では使わないと言われてますが、CSSのフレームワークなので覚えておくに越したことはないです。使わなくても理解して多少知見があるないではまったくもって違います。
公式サイトを見ましょう！ブログを調べるのもいいですが、絶対に公式サイトを確認するようにしてください。公式サイトが一番詳しく書いてあります。上が日本語版で下が英語版です。お好きな方をどうぞ。あとはバージョンをしっかり確認してください！読み込んでいる内容と記述している内容が異なっているとうまく動作しません。
あわせて読みたい
はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。
あわせて読みたい
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
命名規則（クラス名）
以下の記事を参考に進めるといいでしょう！クラス名に答えは無いのですが、他の人が見てもしっかり分かるクラス名を意識するようにしましょう！
Qiita
CSSのクラス名を決めるときに使うリストをつくりました – Qiita
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。
個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探…
BEM設計 ※重要
これは質問があるわけではないですが、私が実務で困ったことです。なるべく早いうちから意識しておくといいです。
Qiita
一番詳しいCSS設計規則BEMのマニュアル – Qiita
一番詳しい(当社比)
この記事は
大体1年くらいBEMを実践した中で溜まった知見的なものをルール･規則･注意点をまとめたマニュアルというかたちにしたもの.
BEM初心者で…
BEMのB・E・Mがよく分からないという人は以下の記事が分かりやすくておすすめです！図解されててそれが結構ピンとくる内容になっているのでぜひ保存しておいてください！
コリス
これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet
Webページやスマホアプリでよく使用されるUIコンポーネントを実装する時に、CSSのクラス名をBEMでつける時の命名規則をまとめたチートシートを紹介します。 BEM Naming Che…
jQueryでよくある質問
jQueryに関する質問は非常に多いです。外部からjQueryを読み込んで動きをつけるなにそれって感じなので読み込みできているかどうかを含めてしっかり理解しておきたい部分の一つです。
jQuery自体を覚える必要はありません。ある程度仕組みが分かっていれば問題ないです。
jQuery①
まずはCDNを読み込みましょう！そして、しっかり読み込みされているか確認しましょう！（後述）
3系を読み込めばOKです
CDNの一覧（他のも含む）は、以下からも取得できます！
cdnjs
cdnjs – The #1 free and open source CDN built to make life easier for developers
Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 bill…
またしっかり読み込めているか確認をするためには、alertを使うといいです。以下の記事に書いてあるので読んでみてください。ページを更新した時にアラートが表示されれば読み込みOKです！CDNは3系を読み込むようにしてくださいね！
jQuery②
よくあるミスを。
- jQueryを重複して読み込んでいる → 1つ読み込めばOKです
- 読み込み順序が逆になっている → jQueryをまず読み込むようにしましょう
- HTML内に書くときは、<script>タグの中に
- jsファイルに書くときは、<script>タグ不要
侍エンジニアブログ
jQueryの基本的な書き方を覚えよう！【実践用サンプルコードあり】 | 侍エンジニアブログ
この記事では「 jQueryの基本的な書き方を覚えよう！【実践用サンプルコードあり】 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなた…
Modal
モーダルはこちらの記事で解決できます！
フリーエンジニアライフ
画像をクリックしたらモーダル画面で表示するjQueryを自作してみる | むねひろ@プログラマー
WEBページを見ているとき画像が小さくてよく見えないときありますよね？ そんなときに、画像をクリックしたらモー
SlideToggle
slideToggleで検索しましょう。アコーディオンにも使えます！
ブログの設置
【jQuery】矢印付きアコーディオンメニュー3選【コピペOK】
jQueryで超簡単にアコーディオンを設定できる方法を知りたいですか？本記事ではコピペでそのまま実装できるアコーディオンメニュー3選を紹介、jQueryの詳しい解説をしてい…
Drawer.js
調べて出てきたブログではなく、公式サイトを見ましょう。絶対に公式サイトを見てください。絶対にです！情報は常に新しくなるので数年前に書かれたブログについては情報が間違っている可能性もあります。
何度でも言いますが、公式サイトを見てくださいね！英語が読めないとか関係ありません！
Drawer
Drawer
Flexible drawer menu using jQuery, iScroll and CSS.
Swiper.js
これも同じです！公式サイトを見てください！！
声を大にして言います！！
勝手なカスタマイズはせずに、公式サイトに則って、忠実に再現してくださいね！
Swiper
Swiper – The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
分からない事があったら誰かのブログを調べるのではなく、Swiper APIを見るようにしてください！細かい仕様が書いてあります。
Swiper
Swiper API
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
ちなみに5系より新しいものはIE対応していません。IE対応させる場合は4系を使うようにすると良いです！以下から探せます！
cdnjs
cdnjs – The #1 free and open source CDN built to make life easier for developers
Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 bill…
Swiperのデザインのカスタマイズは以下を参照すると良いでしょう！※CSSデザインだけですよ参考にしていいのは！！
ガリガリコード
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（各種ナビゲーションカスタマイズ編） | …
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。 Swiperとはなんぞやという方はこちらをご参照…
基本的に公式を見るようにと言っていますが、私が過去参考にしたサイトで唯一と言っていいほど参考になったサイトが以下です。本当に困ったときはこのブログを見直すと良いでしょう。Swiperのバージョンごとに管理して書いてあります。
WordPressでよくある質問
ここは正直、質問がありすぎるのでほとんど割愛します。笑
環境構築で躓く人が多いのでその部分だけ共有しますね！
PHP環境構築
以下の記事が良く書かれていてわかりやすいです。一つの記事でWindowsとMacに対応しているので読み手側もわかりやすくていいですね！
Code for Fun
MAMPのインストール方法（Windows & Mac対応）
macOS 版のバージョンを 5.2 → 6.0.1 に更新しました。（2020年10月） ここでは https://www.mamp.info/en/ で公開されている Windows 版 MAMP 4.
あとは以下の本が、構築の一通りの手順を示しているので読みながら進めると良いと思います！
ビジネスサイトを作って学ぶWordPressの教科書 Ver. 5.x対応版
WordPress
Codexを読みましょう！ひたすら読みましょう！分からなくても読みましょう！CodexがWordPressの全てです！
無垢なWordPressのインストールはこちらです。
WordPress.org 日本語
ブログから大規模サイトまで作れる CMS – WordPress.org 日本語
簡単に美しいサイト、ブログ、アプリを作成するのに使えるオープンソースソフトウェア。
番外編：実務で使える機能編
実務では、FTPツールの使用やお問い合わせフォームの設置は必ず必要になってきます！
Googleフォームの設置
こちらを読んでおけば問題ないです！
しょーごログ
Googleフォームを静的サイトに埋め込みカスタマイズ【非同期通信Ajax】｜しょーごログ
みなさん静的サイトにフォームの埋め込みを行う際、これまで難儀しなかったでしょうか？ 私は最初はフォームの実装方法がわから
PHPメールフォームの実装
お問い合わせフォームの設置ではこちらが主流です。自分はいつも以下を使っています！
あわせて読みたい
簡単設置スマホ対応レスポンシブ メールフォームの無料ダウンロード
簡単に設置できるスマホ対応メールフォームを無料でダウンロードできます。著作権表示不要。カスタマイズ自由。レスポンシブ仕様でタブレットにも対応しています。
Basic認証
テスト環境でお客様に確認してもらうときは必ず設定しましょう！
WebMedia
ベーシック認証（Basic認証）とは？設定方法と注意点・エラーになる原因を解説
Webサイトにアクセス制限をかける方法はありますが、最も簡易的に制限をかけることができる方法として挙げられるのはベーシック認証（Basic認証）です。ベーシック認証（Ba…
ルフトツールズ（LUFTTOOLS） web・ウェブ制作に役立つ便利ツール集
htpasswdファイル生成(作成)
htpasswdファイル生成（htpasswdファイル作成）するweb・ウェブ制作に役立つ便利ツール。htaccessを利用したユーザー認証によるアクセス制限（ベーシック認証）が可能です…
まとめ
Web制作において暗記は不要です！数をこなして経験を多く積みましょう。分からないことは調べて大丈夫です。調べない人なんていません。調べて実装できればそれはあなたの知識です！
是非この記事を有効活用してください！
コメント