HTML/CSS 初心者向け勉強法

2017/06/13 サイト制作 投稿者:前原

初めまして、WEBサイト制作担当の前原です。WEB未経験で入社して9ヶ月になる新人です。

私はHTML/CSSについては入社前に独学+学校で3ヶ月ほど教わりましたが、
ネディアには、入社後に社内で一からWEBについて勉強し(これからお勧めする勉強法+多少先輩に教わりつつ)、3ヶ月も経たずにWEB制作の実務で活躍中の方もいます。

向き不向きと、本人のやる気・努力次第でもありますが、HTML/CSSは独学でも比較的学びやすい言語だと思います。
これから独学で勉強したいという方向けに、実践して良かった勉強法をお勧めしたいと思います。

※HTML/CSSにはバージョンがありますが、XHTMLなど昔のバージョンについては「こんなのがあったんだな~」くらいで、まずは最新のHTML5とCSS3だけを勉強する事をおすすめします。

【Progate】

初級編無料、中級・上級編は月額980円
https://prog-8.com/

progate

まず最初に行うのが、ブラウザ上で実際にコードを打ち込みながら勉強できるオンライン学習サービスです。
とても良いサービスですし、2000円以上する書籍を買ったり、有料のスクールに通うのと比べると、月額980円はかなりお得だと思います。
が、もちろん無料の範囲でも充分できるようになると思います。金欠の方は初級編をクリアしたら次の段階へどうぞ。

このサービスで全く正解出来ない!という方にはWEB制作の道は厳しいかもしれません…

HTML・CSSのほかにもJavaScript・jQuery・Ruby・PHP・Java・Python・Swift・command Line・Gitなどが学べます。

※初級編で答えは合ってるのはずなのに正解できない!という時は、全角で打ち込んでいないか、スペースが入っていないか、など細かな所を確認しましょう。

【HTML5&CSS3標準デザイン講座】

定価2480円+税
https://www.amazon.co.jp/dp/4798142204

htmlcss_standardcourse

オンライン学習サービスの次は書籍です。
【Progate】ではブラウザ上のエディタにコードを打ち込んでいくという感じでしたが、この本では自分のパソコンの中でサイトを作っていきます。
HTML5/CSS3の基本からスマホ対応まで学べます。
上手くいかないときはブラウザのデベロッパー(開発者)ツールを使って原因を探しましょう。
ブラウザはデベロッパーツールが使いやすいのでGoogleChromeを個人的にお勧めしています。

+持っておきたい書籍
【できるポケット HTML5&CSS3/2.1全事典】

定価1680円+税
https://www.amazon.co.jp/dp/4844337394

htmlcss_dictionary

その名の通りHTML5とCSS3のコード辞典です。
ネットで逐一検索するのでもいいですが、これ一冊あるととても便利です。
超初心者の段階ではいらないと思いますが、【HTML5&CSS3標準デザイン講座】で実際に自分でサイトを作る時に揃えたい書籍です。

実制作

この先は実際に手を動かしてサイトをひたすら作っていきます。
WEBデザインギャラリー イケサイ などから作りが簡単そうなサイトを探して模写してみましょう。
HTML/CSSをある程度使えるようになったら、jQueryのライブラリを使ってスライドショーやモーダルウィンドウなどの導入にも挑戦してみるといいと思います。

+時間があったらやりたいサービス

【Schoo】

生放送授業は無料、全授業は月額980円~
https://schoo.jp/

schoo

動画での学習サービスです。プログラミングの他、デザインや英語など幅広い分野について学べます。
先生がついて個別指導してもらえるプランもあります。

【Schoo】で個人的におすすめの授業
https://schoo.jp/class/441
HTMLスケッチというサイト模写の授業です。WEBデザイナーとして活躍している方のコーディングが実際に見れるので勉強になります。
【HTML5&CSS3標準デザイン講座】で勉強した後にどうぞ。
※この方のHTMLスケッチの授業は改訂前の物がユーチューブでも公開されています→https://youtu.be/038wQNc_j1s

【CODEPREP】

全て無料
https://codeprep.jp/

codeprep

Progateと同じように実際にコードを打ち込みながら勉強できるオンライン学習サービスです。
2017年6月現在、全て無料で学習できます。
「はじめてのHTML」などの講座以外は限定的な技術の講座が多いです。
Progateをやった後、復習という感じで、時間があったらやってみるのがいいと思います。

HTML・CSSのほかにもJavaScript・jQuery・Ruby・PHP・Java・Python・Bootstrap・Scala・Rustが学べます。

まとめ

以上、他にも良いサービスはあるのですが割愛します。
色々と紹介しましたが、やはりレベルアップの一番の近道は実際にサイトを作ることだと思っています。

しかしネットを検索しても分からなくて行き詰った時など、独学ではどうしようもなくなる時もありますので、分からない所を質問できる先生を見つけるとより良いですね。

上記で勉強してそのまま仕事で即戦力という訳にはいかないと思いますが、
今WEB制作で活躍されている方も、かつて初心者の時があって現在バリバリ制作されているわけで、いつかそうなれることを夢見て、コツコツ地道に技術を上げていけたらと思います。

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)