初心者だった僕が2ヶ月でHTML&CSSを習得した方法を教えます。

HTML&CSSの画像

 

みなさんどうも!

僕は、職業訓練に通い2ヶ月ほどで基本的なHTML&CSSを習得出来ました!

 

しかしもともと機械系やITに強かった訳ではなく全くの未経験からの学習でした。

 

早く習得できたのには理由があり、今からお教えする方法で学習すれば
スムーズにHTML&CSSを習得できるかと思います。

 

また勉強の過程で、もっとこうすればよかったのではと言う事やコツなども見つけたので

僕の勉強方法と、コツなどを合わせて紹介していきます。

 

僕が始めた時の状態に興味のある方は詳しくはこちらの記事をご覧ください

また職業訓練についてもこちらでまとめているので是非!

 

HTML&CSSとは?

 

まずは基礎知識から

ざっくり説明すると

 

HTMLとは…
サイトの骨格を作っていくもの、家でいうと土台や骨組みの部分

 

CSSとは…
サイトのデザインを作っていくもの、家でいうと壁や床などの部分

 

という感じです。

 

例えば、骨格を作るHTMLだけの場合こちらの画像のような見た目になります。

 

HTMLのみのサイトの見た目はこうなる

当ブログをHTMLのみにした場合(CSS等を外した場合)

 

見た目がかなり寂しいですね

こんなサイト見たことありません。

 

なぜなら普段私たちがよく目にするサイトには、必ずHTMLとCSSはセットで使われているからです。

 

先ほどの画像のサイトにCSSでデザインをしていくことになります↓
(当サイトのトップページですが一応…)

cssを適応した状態の画像

 

よく目にする見た目になりました!これがCSSの力です。

 

まずは、ぼんやりとでも全体のイメージを捉える

 

HTMLとCSSそれぞれ役割がわかったところで
お次はいよいよ開発のやり方です!

 

まずは、分からなくても進んで大丈夫なので
以下で説明することをだいたいで把握してください!

 

HTMLの開発画面とサイト上での表示は以下の通りです。

開発:
開発時のHTMLの見た目

 

サイト上での表示:

 

文章が<h3>や< p >といった<>で囲われていますね

この< >の部分をタグと言います。

 

<h3>には3番目に大きな見出し
< p >には段落

という意味があります。

 

例えば、段落を作りたいときは

 

原文の段落開始地点に< p >
終了地点に< /p >と記述します。

 

すると囲ってある部分をコンピューターが段落なんだなと認識してくれるという訳です!

 

つまりHTMLを書くということは
原文(普通の文章)に、コンピューターが認識できるようにタグを使って目印をつけることです

なのでマークアップなどと言います。

HTMLの基本的な型(文法)なので覚えておいてください!

 

 

そしてこのマークアップの後にCSSでデザインをします。

 

CSSの記述例:

p {
color:red;
font-size:30px;
}

赤の部分がデザインを適応するタグの指定
青い部分が行う動作
緑の部分が値

となります。

つまりこの場合は

pタグ色を赤に文字のサイズを30pxにしなさい

という命令文になります。

 

なんとなく理解できましたか?

CSSの基本的な文法は、上記の通りなのでこれも覚えておいてください

 

そして文法がなんとなく理解できたら

 

とりあえず主要なタグの使い方を覚えてください!!!
参考サイト:初心者が必ず使うタグからHTMLのタグ一覧を総まとめ

 

最低限なら
覚えなければいけないタグはそんなに多くないと思います。

 

なぜ最低限のタグだけでいいのか

 

それは、他のことは
サイト制作で詰まった時に検索して、その都度覚えれば良いからです。

それも、完璧には覚えなくても大丈夫です

 

コーダーやエンジニアと聞くと色々な言語を完璧に覚えていてコードがスラスラ書ける
と思われがちですが、実は違って

 

現場で活躍しているプロも文法だけ完璧に覚えて
他のことはその都度調べながら開発します。

それで充分なんです。

 

ひたすら制作する

 

実際にサイトを作る

これに尽きます。

 

実際に僕が学習してきた中で

ひたすら制作をするのが
一番身になり、しかも身につく速度が格段に早いと感じました。

 

例えるなら

英語の教科書をずっと見ている人よりも

英語がわからなくても現地に行って生活している人の方が英語が身につくのが早い

と言った感じです!

 

なので基礎と文法だけ理解したら

あとはトライアンドエラーでひたすらサイトを作り続けましょう!

 

とは言え初めてだしどうやって作れば良いんだろう、、となると思います。

そんな方にはこちらの本がおすすめです!僕もこの本で勉強しました。

 

これからはじめるHTML&CSS

これからはじめるHTML&CSS

 

一冊を通して「67Green」という架空のサイトを作っていく内容になっています。

例えるなら、ゲームのチュートリアルのサイト作りバージョンって感じです!

 

CD-ROMが付いていてその中に
サイト作成に必要な原文と画像などの素材、答え合わせに使える完成ファイル
などが入っているので

余分なところに時間をかけなくて済むし

丁寧すぎるくらい説明がしっかりしているので初心者にはわかりやすくて

勉強をはじめるにはもってこいの一冊でかなりおすすめです!!
(CDが読めなくても、ダウンロードできるリンクもついているので大丈夫!)

 

 

この本を終えたら、ある程度自分でサイトが作れるようになっていると思うので
ひたすらサイトを模倣し続けましょう!!

 

プロに教えてもらう

独学でもしっかりと身になる学習はできると思いますが

やはり、最速で身に付けたいときはプロの指導を受けるのが一番良いです。

 

制作する過程で詰まった時に
自分で調べてもすぐに答えにたどり着けないときが来ます

そんな時に聞ける環境があった方が圧倒的に進みが早いからです。

 

独学か、プロに教えてもらうかを選ぶときは

学習にかかるコストを重要視するのか、時間を重要視するのか

で決めると良いと思います!

 

また、Progateなどの学習サイトがありますが

それだけで学習するのはやめた方がいいです

 

なぜなら、Progateを使ったコーディング(プログラミング)は
レシピを見ながら料理をしているのと同じだからです。

料理人を目指す場合はそれじゃダメですよねw

 

しかし、予習や復習などに使う場合は
制作環境を整えなくてもすぐに学習できるのでかなりおすすめです!

最速で習得する方法まとめ

 

僕が2ヶ月でHTML&CSSを習得した方法をまとめると

 

  1. 基礎を満遍なく頭に入れる(ぼんやりとでいい)
  2. 文法を覚える
  3. 主要なHTMLタグを覚える
  4. 練習用のサイトを作りながら学んでいく

 

と言った感じです。

 

4番は最初から完璧に完成させることは無理なので

多少不具合があってもなんとか形にする。

これを繰り返してください!

そうしていくうちにいつか必ず全てが繋がり、理解できる時が来ます。

 

それに一から全て理解しようとすると挫折してしまいますからね。

 

質問などあれば、お問い合わせかコメントでお待ちしています!

 

では、また次の記事でお会いしましょう!

コメントを残す