初心者が独学でWebプログラミングの基礎を学ぶ3つのステップ

「超」初心者のみなさんには、このサイトの記事の中で、
「Webプログラミング」を進めていますが、
そんな中で、実際にWebプログラミングを独学でやってみたいという方向けに、

Webプログラミングの「超」基礎的なことを理解

するために、どのようなステップで学習したら良いかを説明させて頂きます。

実際にプログラミング講師での経験や自分自身のエンジニアを始めた時の学習経験なども踏まえて、オススメの学習の流れを説明していきます。

ちなみに、この記事では、Webプログラミングを学習していくときに一番初めに学習するであろう、

Webデザイン(HTML / CSSなど)

の学習にフォーカスを当てて、
初心者がどのように学習を進めていけば、
できる限り挫折せずに学習を進めていけるかを説明していきます。

目次
  1. 独学でWebプログラミングを学ぼう
  2. 独学の学習で挫折しないために
    2-1 . 全体の学習のどの部分をやっているのかを考える
    2-2 . 完璧を求めすぎない
  3. 独学でデザインの「超」基礎を学ぶ、3つのステップ
    3-1 . まずは、基本的なHTML / CSSを理解しよう
    3-2 . Bootstrap を使ってサイトに見栄えをつけよう
    3-3 . jQueryを使ってサイトに動きをつけよう
  4. 基本を抑えたら、スキルアップを目指す
    4-1 . 基本を押さえたら、スクール活用もあり
    4-2 . 独学を続けるなら、他のサイトを真似てみよう

独学でWebプログラミングを学ぼう

この記事を読まれる際に、このサイトでは、
「超」初心者のプログラミング学習に関しては、

Webプログラミング

の学習を行うことをオススメしています。

もし、読まれていなかったり、その理由が気になるようでしたら、
以下の記事を読んでみてください。

独学の学習で挫折しないために

独学でWebプログラミングの学習を行なっていく上で、
一番最初に、「Webデザイン」と呼ばれる、

サイトのレイアウトを作るためHTMLやCSS

などから学習を始めていきます。

そんな中で、「超」初心者のみなさんが、
独学でのWebデザインの学習で挫折しないために、

  • 全体の学習のどの部分をやっているのかを考える
  • 完璧を求めすぎない

という点を気をつけて頂ければ、挫折しにくいと考えています。

全体の学習のどの部分をやっているのかを考える

Webデザインの学習は、
この後に、3ステップとして、説明していきますが、

ステップ1:HTML / CSSで基礎を固める
ステップ2:Bootstrapと呼ばれる便利な見栄えを作れるものを理解
ステップ3:jQueryと呼ばれる便利な動きをつけるものを理解

この3ステップで学習をオススメします。
その際に、学習していく中で、

「自分自身がどのステップを学習しているのか」

という点は、意識しながら学習すると良いと思います。

なぜなら、インターネットに掲載されている情報が、
この3ステップが、丸ごと説明されていることがあるため、
初心者が学習するときに、どのステップの内容か、
うまく把握できずに挫折してしまうことがあるためです。

ですので、自分が学習しているステップがどのステップなのか。
他の参考にするサイトの内容はどのステップに該当するのか、
そういうことを考えながら学習すると良いでしょう。

完璧を求めすぎない

これは、Webデザイン学習において、挫折しないための重要なポイントですが、
初心者が初めて、Webデザインに取り組むと、

思っているデザインにならない

ということが起きることがあります。
そんな時は、

「今は、ちょっと思っているデザインとは違うけど、先に進もう」

というスタンスで、学習を進めていくようにしましょう。

最初の時点でできなくて、そのままにしておいても、
少しずつ、自分ができることが増えていったときに、

その「できなかったこと」が「今ならできる」

に変わることがあるので、完璧を求めすぎず、
継続して学習することを優先して、
挫折せずに学習を進めていけるようにしましょう。

独学でデザインの「超」基礎を学ぶ、3つのステップ

先ほど、少し説明しましたが、
以下の3ステップで学習することをオススメしています。

ステップ1:HTML / CSSで基礎を固める
ステップ2:Bootstrapと呼ばれる便利な見栄えを作れるものを理解
ステップ3:jQueryと呼ばれる便利な動きをつけるものを理解

まずは、基本的なHTML / CSSを理解しよう

Webデザインの基本として、

HTML / CSS

の2つの基本を理解しましょう。

この基本部分は、以下の2つのサービスを使うと良いでしょう。

プロゲート
ドットインストール

このようなサービスを使って学習すると良いですが、
完璧に理解するとなると、時間がかかりすぎるので、

  • 挫折しないために、HTMLの最低限、抑えたいこと
  • 挫折しないために、CSSの最低限、抑えたいこと

この辺りを理解すれば、個人的には、
学習の流れの3ステップの中の、

ステップ2:Bootstrapと呼ばれる便利な見栄えを作れるものを理解

このステップ2に進んで良いと思っています。

正直、このステップ2に早く移行した方が、
作っているときに楽しいと思うので、
最低限のことを理解したら、早めにステップ2の学習に進ことをオススメします。

それでは、HTML/ CSSのそれぞれ、最低限、抑えておきたいことを説明していきます。

挫折しないために、HTMLの最低限、抑えたいこと

ちなみに、理解する上で、
一番最初に抑えたいポイントとしては、

HTMLの大きな構造

言い換えれば、

htmlの中に、headとbodyというのがあること

ということです。

すごいシンプルなHTML が以下です。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

この中で、
<html></html>
の中に、
<head></head>と<body></body>
という2つが入っている。

そして、

その中に、<a></a>や、<div></div>、<p></p>などを使って、
色々と書き込んでいくのですが、
これらは、「タグ」と呼ばれるものですが、

「タグ」というものは、全てを完璧に覚える必要はない

ということは、頭に入れながら学習を進めましょう。

タグの種類はたくさんありすぎるので、

実際にレイアウトを作るときに使うものから少しずつ覚える

という方法で覚えていくことをオススメします。

挫折しないために、CSSの最低限、抑えたいこと

CSS で最低限、抑えておくことは2つ。

CSSだけ別ファイルにして、読み出す方法

プロパティと値の考え方

の2つです。

「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でデザインすることは、比較的、楽しい

と、初心者には感じてもらうことが多いので、
ステップ1を早めに終わらせて、
このステップ2で、Webデザインの楽しさに気づいてもらえると良いと思っています。

この「Bootstrap」は、HTMLやCSSで作るデザインを、
より簡単に作れるようにするフレームワークと呼ばれるものです。

ゆくゆくは、以下のBootstrapの公式サイト見ながら、
自分自身で使えるようになれることが理想です。

参考:Bootstrap公式のドキュメント
https://getbootstrap.com/docs/4.3/components/alerts/

この辺りの使い方などは、別記事で今後、まとめていきますね。

jQueryを使ってサイトに動きをつけよう

この「jQuery」と呼ばれるものも、「Boostrap」と同じように、
Webデザインで、便利でサイトに動きを付けれるものです。

「jQuery」を使うことで、サイトに動きをつけることができる

ので、「Boostrap」と合わせて、使えるようにしていきましょう。

基本を抑えたら、スキルアップを目指す

基本を押さえたら、スクール活用もあり

このサイトでも、「ネット検索が難しい」というレベルの人が、
いきなりプログラミングやデザインのスクールに通うことはオススメしていません。

逆に、ここまでのWebデザインの基礎を理解していれば、
プログラミング・ デザインのスクールも、

基礎がしっかりしている分、より有意義に活用しやすい
と言えるので、スキルアップのために検討してみるのも良いでしょう。

参考に未経験の方にもオススメできるスクールを紹介しておきますね。

独学を続けるなら、他のサイトを真似てみよう

独学を続けて、自分でスキルアップを目指すのであれば、

他のサイトを真似る

という学習をオススメします。
自分が気に入っているサイトや、デザインが良いと思うサイトなどで、
どのようなWebデザインが使われているのか。

・使われているタグはどのようなものが多いのか
・色はどのような色が多いか
・それぞれのボタンや入力項目の幅は?高さは?

などのように自分なりに他のサイトを見て、
良いところを吸収しながら、学習してみると良いでしょう。