【WEB制作】初学者向けロードマップとよくある質問に答える記事一覧【レベル別にまとめた】

ひろきです。この記事ではWEB制作に必要なスキルをメンターとして受講生に教えている僕がよく紹介するサイトを集めてみました。

ここで紹介する各勉強過程の流れや紹介する記事の内容は実務でも使える内容となっているので、しっかりメモして役立ててください!

独断と偏見で記事を紹介していきます!また、WEB制作において、実務で使えるリンクも貼っておくので全リンクしっかり確認してみるといいでしょう!

目次

WEB制作を習得するための簡易ロードマップ

さて、僕の方でも簡単にロードマップ共有します。抑えておきたいポイントはこのように強調していきます。以下で紹介する本は最低限押さえておきたい本なので、持っていない人は1冊ずつてもとにあるといいでしょう。

STEP
HTML&CSSを勉強しよう

ここは正直慣れの要素が大きいと感じています。繰り返し繰り返しひたすら手を動かすのが一番はやいです。徐々に理解することが出来ます!

以下の本はBEM設計についても記述されているので、持っておいて損はないです。むしろ持っておくべき1冊です。

CSS設計完全ガイド
created by Rinker
STEP
Sassを勉強しよう

これは必須です!しっかり覚えましょう!とはいえ機能が多いので徐々に慣れていけばいいと思います。

Web制作者のためのSassの教科書
created by Rinker
STEP
jQueryを勉強しよう

あまり深く勉強する必要はありません。最低限どうすればどう動くかを理解できれいれば大丈夫です。あとは調べて実装できるようにしましょう。

オススメの1冊

jQuery最高の教科書
created by Rinker
STEP
デザインカンプからのコーディング

ここが一番大事!

2つから3つほどデザインカンプからのコーディングを経験しておきましょう。BEM設計を必ず意識して対応して欲しいです。

STEP
WordPress(PHP)の基礎、WordPress構築

WordPressを勉強するにあたっては必須の知識ですが、がっつりPHPを勉強する必要はありません。WordPressに特化したPHPを勉強するようにしましょう

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

検証ツールの使い方を覚えよう

まず、前提として検証ツールの使い方を覚えましょう!

検証ツールを制すものはWEB制作を制す!

こんなこと言っている人居ないかもしれませんが、大事なので使えるようになってください!検証ツール使えないと実務をこなすのは難しいと思ってください!

少しずつでいいので慣れましょう。

HTML&CSSでよくある質問

ご参考までに、各質問確認していってくださいね!

HTML5規則

HTML5では入れ子のルール(規則)があります!

CSSチートシート

Bootstrap

Bootstrapは実務では使わないと言われてますが、CSSのフレームワークなので覚えておくに越したことはないです。使わなくても理解して多少知見があるないではまったくもって違います。

公式サイトを見ましょう!ブログを調べるのもいいですが、絶対に公式サイトを確認するようにしてください。公式サイトが一番詳しく書いてあります。上が日本語版で下が英語版です。お好きな方をどうぞ。あとはバージョンをしっかり確認してください!読み込んでいる内容と記述している内容が異なっているとうまく動作しません。

命名規則(クラス名)

以下の記事を参考に進めるといいでしょう!クラス名に答えは無いのですが、他の人が見てもしっかり分かるクラス名を意識するようにしましょう!

BEM設計 ※重要

これは質問があるわけではないですが、私が実務で困ったことです。なるべく早いうちから意識しておくといいです。

BEMのB・E・Mがよく分からないという人は以下の記事が分かりやすくておすすめです!図解されててそれが結構ピンとくる内容になっているのでぜひ保存しておいてください!

jQueryでよくある質問

jQueryに関する質問は非常に多いです。外部からjQueryを読み込んで動きをつけるなにそれって感じなので読み込みできているかどうかを含めてしっかり理解しておきたい部分の一つです。

jQuery自体を覚える必要はありません。ある程度仕組みが分かっていれば問題ないです。

jQuery①

まずはCDNを読み込みましょう!そして、しっかり読み込みされているか確認しましょう!(後述)

3系を読み込めばOKです

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の教科書 Ver. 5.x対応版
created by Rinker

WordPress

Codexを読みましょう!ひたすら読みましょう!分からなくても読みましょう!CodexがWordPressの全てです!

無垢なWordPressのインストールはこちらです。

番外編:実務で使える機能編

実務では、FTPツールの使用やお問い合わせフォームの設置は必ず必要になってきます!

Googleフォームの設置

こちらを読んでおけば問題ないです!

PHPメールフォームの実装

お問い合わせフォームの設置ではこちらが主流です。自分はいつも以下を使っています!

Basic認証

テスト環境でお客様に確認してもらうときは必ず設定しましょう!

まとめ

Web制作において暗記は不要です!数をこなして経験を多く積みましょう。分からないことは調べて大丈夫です。調べない人なんていません。調べて実装できればそれはあなたの知識です!

是非この記事を有効活用してください!

よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

目次
閉じる