初心者が独学でWebプログラミングの基礎を学ぶ３つのステップ
「超」初心者のみなさんには、
このサイトの記事の中で、
「Webプログラミング」を進めていますが、
そんな中で、
実際にWebプログラミングを独学でやってみたいという方向けに、
Webプログラミングの「超」基礎的なことを理解
するために、
どのようなステップで学習したら良いかを説明させて頂きます。
実際にプログラミング講師での経験や、
自分自身のエンジニアを始めた時の学習経験なども踏まえて、
オススメの学習の流れを説明していきます。
ちなみに、この記事では、Webプログラミングを学習していくときに一番初めに学習するであろう、
Webデザイン（HTML / CSSなど）
の学習にフォーカスを当てて、
初心者がどのように学習を進めていけば、
できる限り挫折せずに学習を進めていけるかを説明していきます。
独学でWebプログラミングを学ぼう
この記事を読まれる際に、
このサイトでは、
「超」初心者のプログラミング学習に関しては、
Webプログラミング
の学習を行うことをオススメしています。
もし、読まれていなかったり、
その理由が気になるようでしたら、
以下の記事を読んでみてください。
独学の学習で挫折しないために
独学でWebプログラミングの学習を行なっていく上で、
一番最初に、「Webデザイン」と呼ばれる、
サイトのレイアウトを作るためのHTMLやCSS
などから学習を始めていきます。
そんな中で、
「超」初心者のみなさんが、
独学でのWebデザインの学習で挫折しないために、
- 全体の学習のどの部分をやっているのかを考える
- 完璧を求めすぎない
という点を気をつけて頂ければ、
挫折しにくいと考えています。
全体の学習のどの部分をやっているのかを考える
Webデザインの学習は、
３ステップとして、説明していきますが、
ステップ１：HTML / CSSで基礎を固める
ステップ２：Bootstrapと呼ばれる便利な見栄えを作れるものを理解
ステップ３：jQueryと呼ばれる便利な動きをつけるものを理解
この３ステップで学習をオススメします。
その際に、学習していく中で、
「自分自身がどのステップを学習しているのか」
という点は、意識しながら学習すると良いと思います。
なぜなら、
インターネットに掲載されている情報が、
この３ステップが、
丸ごと説明されていることがあるため、
初心者が学習するときに、
どのステップの内容か、
うまく把握できないために、
挫折してしまうことがあるためです。
ですので、
自分が学習しているステップがどのステップなのか。
他の参考にするサイトの内容はどのステップに該当するのか、
そういうことを考えながら学習すると良いでしょう。
完璧を求めすぎない
これは、Webデザイン学習において、
挫折しないための重要なポイントですが、
初心者が初めて、Webデザインに取り組むと、
思っているデザインにならない
ということが起きることがあります。
そんな時は、
「今は、ちょっと思っているデザインとは違うけど、先に進もう」
というスタンスで、
学習を進めていくようにしましょう。
最初の時点でできなくて、
そのままにしておいても、
少しずつ、自分ができることが増えていったときに、
その「できなかったこと」が「今ならできる」
に変わることがあるので、
完璧を求めすぎず、
継続して学習することを優先して、
挫折せずに学習を進めていけるようにしましょう。
独学でデザインの「超」基礎を学ぶ、３つのステップ
先ほど、
少し説明しましたが、
以下の３ステップで学習することをオススメしています。
ステップ１：HTML / CSSで基礎を固める
ステップ２：Bootstrapと呼ばれる便利な見栄えを作れるものを理解
ステップ３：jQueryと呼ばれる便利な動きをつけるものを理解
まずは、基本的なHTML / CSSを理解しよう
Webデザインの基本として、
HTML / CSS
の２つの基本を理解しましょう。
この基本部分は、
以下の２つのサービスを使うと良いでしょう。
このようなサービスを使って学習すると良いですが、
完璧に理解するとなると、
時間がかかりすぎるので、
- 挫折しないために、HTMLの最低限、抑えたいこと
- 挫折しないために、CSSの最低限、抑えたいこと
この辺りを理解すれば、
個人的には、
学習の流れの３ステップの中の、
ステップ２：Bootstrapと呼ばれる便利な見栄えを作れるものを理解
このステップ２に進んで良いと思っています。
正直、
このステップ２に早く移行した方が、
作っているときに楽しいと思うので、
最低限のことを理解したら、
早めにステップ２の学習に進ことをオススメします。
それでは、
HTML/ CSSのそれぞれ、
最低限、抑えておきたいことを説明していきます。
挫折しないために、HTMLの最低限、抑えたいこと
ちなみに、
理解する上で、
一番最初に抑えたいポイントとしては、
HTMLの大きな構造
言い換えれば、
htmlの中に、headとbodyというのがあること
ということです。
すごいシンプルなHTML が以下です。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>１つ目の要素</div>
<div>２つ目の要素</div>
</body>
</html>この中で、
<html></html>の中に、
<head>
:
</head>というブロックと
<body>
:
</body>
という２つが入っています。
そして、
その中に、
<a>〜</a><div>〜</div><p>〜</p>などを使って、
色々と書き込んでいくのですが、
これらは、「タグ」と呼ばれるものですが、
「タグ」というものは、全てを完璧に覚える必要はない
ということは、頭に入れながら学習を進めましょう。
タグの種類はたくさんありすぎるので、
実際にレイアウトを作るときに使うものから少しずつ覚える
という方法で覚えていくことをオススメします。
挫折しないために、CSSの最低限、抑えたいこと
CSS で最低限、抑えておくことは２つ。
CSSだけ別ファイルにして、読み出す方法
と
プロパティと値の考え方
の２つです。
「CSSだけ別ファイルにして、読み出す方法」
に関しては、
Webデザインでは一般的なので覚えましょう。
<!DOCTYPE html>
<html>
<head>
<style>
<link rel="stylesheet" type="text/css" href="sample.css">
</style>
</head>
<body>
<div>test</div>
</body>
</html>この中の、
<link rel="stylesheet" type="text/css" href="sample.css">この部分です。
これだと、
「sample.css」というファイルを別ファイルで分けて、
使う方法で、
よくWebデザインでは使う方法なので、
この別ファイルにする方法は理解しましょう。
そして、
「プロパティと値の考え方」
に関しては、
body {
background-color: red;
}という書き方を、
CSSでは行うのですが、
これを
A {
B: C;
}このようにしたときに、
「AのBをCにする」という書き方をする
ということを覚えておきましょう。
ちなみに、
A：要素、タグと呼ばれるもの
B：プロパティ
C：値
というのを頭に入れておくと良いでしょう。
ちなみに、
このCSSのプロパティと値の組み合わせに関しては、
HTMLのタグの種類がたくさんありすぎるのと同じように、
実際にレイアウトを作るときに使うものから少しずつ覚える
という考えで学習を進めると良いでしょう。
Bootstrap を使ってサイトに見栄えをつけよう
この「Bootstrap」で、
サイトに見栄えをつけるということに関しては、
初心者がWebデザインをやっていて、
やはり楽しくないと続かないと思っており、
Bootstrapでデザインすることは、比較的、楽しい
と初心者には感じてもらうことが多いので、
ステップ１を早めに終わらせて、
このステップ２で、
Webデザインの楽しさに気づいてもらえると良いと思っています。
この「Bootstrap」は、
HTMLやCSSで作るデザインを、
より簡単に作れるようにするフレームワークと呼ばれるものです。
ゆくゆくは、
以下のBootstrapの公式サイト見ながら、
自分自身で使えるようになれることが理想です。
この辺りの使い方などは、
別記事で今後、まとめていきますね。
jQueryを使ってサイトに動きをつけよう
この「jQuery」と呼ばれるものも、
「Boostrap」と同じように、
Webデザインで、
便利でサイトに動きを付けれるものです。
「jQuery」を使うことで、サイトに動きをつけることができる
ので、「Boostrap」と合わせて、使えるようにしていきましょう。
基本を抑えたら、スキルアップを目指す
基本を押さえたら、スクール活用もあり
このサイトでも、
「ネット検索が難しい」というレベルの人が、
いきなりプログラミングやデザインのスクールに通うことはオススメしていません。
「超」初心者の中で『ネット検索って難しい』というレベルの人はいきなり「オンライン」のプログラミングスクールに通うのはやめよう
逆に、
ここまでのWebデザインの基礎を理解していれば、
プログラミング・ デザインのスクールも、
基礎がしっかりしている分、
より有意義に活用しやすいと言えるので、
スキルアップのために検討してみるのも良いでしょう。
参考に未経験の方にもオススメできるスクールを紹介しておきますね。
転職を保証の安心のサポート体制。「超」初心者にもオススメ「DMM WEBCAMP」
２０代までの「超」初心者向けに無料カリキュラム、サポートがある「Programmer College」もオススメ
２０代までの「超」初心者の第二新卒やフリーターに朗報。東京で転職/29歳までなら「GEEK JOB」もオススメ
独学を続けるなら、他のサイトを真似てみよう
独学を続けて、自分でスキルアップを目指すのであれば、
他のサイトを真似る
という学習をオススメします。
自分が気に入っているサイトや、
デザインが良いと思うサイトなどで、
どのようなWebデザインが使われているのか。
- 使われているタグはどのようなものが多いのか
- 色はどのような色が多いか
- それぞれのボタンや入力項目の幅は？高さは？
などのように自分なりに他のサイトを見て、
良いところを吸収しながら、
学習してみると良いでしょう。
ピックアップ
こちらもおすすめ
初心者向けの色々な情報はあるけれど、
- 無料でお試しができるスクール
- ホームページなど簡単に作成できる
- 組織で使いたいサービス
について、
少しでも試して良いものがあると、
それを活用することで学習や業務などが効率化できるので、
おすすめのサイトなどをいくつか紹介しておきます
