まず初めに
プログラミングの勉強ってまず何から始めていいか分からない・・・
一般的なサイトを作るために必要なプログラミング言語のHTMLとCSS。このブログもHTMLとCSSでできています。(スマホ用のメニューだけはJavascriptという言語だったり、PHPという言語使ったりもしています。)
プログラミングの基本のきでもある、このHTMLとCSSっていうのは習得するだけであれば1ヶ月でできてしまうのではないかと思いました!ですので、その勉強法をいくつか紹介したいなと思います!お前学校いってんじゃんって思った方、行く前にHTMLとCSSだけは独学で勉強してから行きました。またこっちに来てからこうすれば早く習得できるんじゃないかと思ったので、それを踏まえた勉強法です。
以下みなさんのお力になれればと思います!
勉強する前に用意しておきたい環境
・ブラウザ(GooglechromeやSafariなど)
このサイト見ている人は用意する必要はないです。デベロッパーツールが使えるのでおすすめはChromeブラウザです。
・コードを書くためのテキストエディタ
初心者の方にはSublimetextというのがオススメです。
ダウンロードや使い方はこちら
サクラエディタやmiでも大丈夫です。
5つの勉強法
⑴Progateを使う
⑵ドットインストールを使う
⑶メンターとなる人を見つける
⑷静的な(動かない)Webサイトをコピーしまくる
⑸デベロッパーツールとリファレンスを使ってうまくいかないところの原因を探す
⑴Progateを使う
一番おすすめしたいのが
という学習用のwebサービスです。
Progateというのは、ゲーム感覚でHTMLやCSSといったプログラミング言語を身につけることができます。
HTML&CSS基礎編、応用編とあるのですが、どちらもクリアしていくにつれ徐々にサイトができあがってくのでとても満足感があります。あっ!いつのまにかwebサイトができていたなんてことになります。
実際の勉強画面がこんな感じになっています。
⑵ドットインストールを使う
プログラミン言語やサイト作成、アプリ開発を勉強するための動画サイト
。実際の画面での操作状況を動画で見ることができます。レッスンが細切れになっていたり、一回一回が短いので飽きずに続けることができます。
ドットインストールを使ったおすすめの勉強法は、画面を2分割して左側でドットインストールを見ながら、右側のエディタで同じように打って、実際どう映るのか自分自身で試すことです。
⑶メンターとなる人を見つける
上記の二つや実際に本を読みながら勉強することも重要なのですが、もうすでにプログラミングができてメンターとなる人が身近にいるとなおさらいいと思います。
なぜならつまずいたり、わからなくなったりした場合、原因を見つけるのが難しいのがプログラミングです。そういったときに身近に質問できる人がいれば、すぐ解決できる場合もあるのでおすすめです。
⑷静的な(動かない)Webサイトをコピーしまくる
上記で基本を身につけたら、後はもう実践して力をつけていくだけです。だらだら概念だけを勉強し続けても実際に作れなければ意味がありません。なので簡単なサイトからコピーしていくのがいいと思います。
じゃあどうやってそういう参考サイトを見つけるのってことなのですが、いい感じのサイトが集まったwebサイトがあります。
このサイトは世界のイケてるサイトを集めたサイトです。色指定でサイトを選ぶことができます。下のイケサイよりもおしゃれなサイトが多いなと個人的に思います。
イケサイは日本のサイトをメインに紹介しています。ここのいいところはサイトを種類別に見ることができること、コーポレートサイトや通販サイトなどといいうように、種類別にサイトを検索することができます。
ランディングページという1ページだけでできたサイトを集めたサイトです。真似するのが比較的簡単でハードルが低いので初心者さんにはおすすめのサイトです。
イケてるサイトを集めているので、構造が難しかったり動いたりするサイトがあります。できるだけ簡単なサイトから取り組んでいった方が達成感もあるし、途中で挫折しにくいと思います。自分でいいなと思ったサイトを選んで真似してみてください!
デベロッパーツールとリファレンスを使ってうまくいかないところの原因を探す
わからなくなったらデベロッパーツールとHTML&CSS辞典があればなんとか対処することもできます。
Googlechromeについてる、どんなCSSで書かれているか見ることができるものです。
反映がうまくされない部分をデベロッパーツールで押すと、そこがどんな風に書かれているのかを見ることができます。
またこのタグなんだっけとか、行間を指定するタグなんだっけというのにはHTML、CSSリファレンスがオススメです。タグの説明やタグを探すことができる辞典みたいなものです。どういうCSSを書けばいいのかが一目でわかります。
最後にひとつだけ
上記の方法であれば独学で無料で勉強できるのですが、一つだけ注意点があります。プログラミング言語は時の流れが速かったりトレンドが急に変わったりします。実際にHTMLでも今はHTML5が主流ですが、昔はXHTMLといったものもありました。疑問点が出て探す時や本を買うときは、いつ発表されたものなのかというのも念頭に置いておいてください。今は違うなんてことがたまにあります。
上記の点をふまえて是非HTML&CSSの勉強を頑張ってみてください!