【初級】エンジニア経験ゼロからはじめるHTML・CSS学習方法

今回はそのような人の向けに、これまでプログラミングをほとんど触ったことがない人が、Webページを作れるようになるまでの道のりをまとめてみました。この通りに進めていけば必ずの実力はつきます。初心者のつまずきがちな部分もしっかりカバーして行きます。

HTMLを習得しよう

HTMLを説明した後、その後学習の流れを紹介していきます。

1.HTMLを理解しよう

HTMLとは

HyperText Markup Language(ハイパーテキスト マークアップランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。
ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。
HTMLはwebサイトやサービスの画面を構成する最も基本的な技術です。PHPやRubyといった言語もありますが、それらもHTMLと密接に関係しています。まずはHTMLを習得することがプログラマーとしての第一歩になります。

HTMLとはなんなのか、なんとな〜くわかったところで(今はあんまりわからなくても大丈夫です)、さっそく学んでいきましょう。

2.Sublime Text 2 を入れよう

まずはテキスト・エディタを入れましょう。これはプログラミングする際に、コードを記録してくものです。レポートでいうとWordみたいなものですね。

いろいろありますが筆者がおすすめするのは、Sublime Text2 です。テキストエディタにもいろいろな種類もあるのですが、初心者にはSublimeTextをおすすめしています。インストールして使ってみてくださいね。

3.王道のドットインストール

そして、エディタをインストールしたら、ドットインストールで学習を進めていきましょう。

ドットインストールとは、約3分間の動画でプログラミングにおける様々な技術を学ぶことが出来るサイトで、初心者から中級者まで誰もが通るサイトです。まずは、ドットインストールのHTML入門をやっていきましょう。

おすすめの進め方は、

・1周目:なんとなく見ていく(手は動かさない)
・2周目:しっかり見ていく(手は動かさない)
・3周目:手を動かしながら見ていく

こんな感じです。はじめの2周は手を動かさずにこんな感じなんだな〜って分かる、早く手を動かしたいな、っていう状態になって下さい。ここでは手を動かさないことがポイントです。我慢してください。

3周目に先ほどインストールしたSublime Text 2 を利用して、動画を見ながら、手を動かしていきましょう。

ドットインストールで基本的な概念や仕組み、中身を「知る」ということが重要です。

4.COODPREPで手を動かしながら学習

次に、おすすめしている方法がこちらも無料プログラミング学習サービスのCODEPREPです。

ドットインストールでHTMLで実際に手を動かしながらCODEPREPを進めていきましょう。この中でも、基礎編はじめてのHTML を行いましょう。

おすすめのポイントは、

・ドットインストールで理解した内容を手を動かしながらできる
・アウトプットを強めに行い、身に付けることができる

という点です。時間が経たないうちに早めに行い、しっかりと身に染み込ませましょう。

CSSを習得しよう

さて、ここまででHTMLはひと通り学習することができました。次はHTMLで作ったサイトの構造にデザインを綺麗に整えていくCSSを見て行きましょう。

CSSとは

CSS(Cascading StyleSheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。
CSSは、HTMLと組み合わせて使用する言語です。HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。
HTMLクイックリファレンスより
簡単にいうと、HTMLをよりきれいに、デザインを整えたりするのがCSSがです。さっそく学習を進めていきましょう。

1.再びドットインストールで学習

やはりはじめにおすすめするのがドットインストールです。

CSSも同じように学んでいきます。CSS入門をやっていきましょう。
ドットインストールは、基礎から必要な部分をもれなく学べるので初心者にとってはとても有用です。また今後も使う機会が多いと思うので、有料プランで2倍速で見るのもおすすめです

進め方はHTMLと同様、3周行っていきましょう。

2.またCODEPREP

こちらも2度目の登場のCODEPREPです。基礎編はじめてのCSS を行いましょう。CODEPREPで手を動かしながらCSSを身につけていきましょう。

3.最後の仕上げProgate

ここまでしっかりやることが出来たらHTML,CSSはひと通り理解出来ていると思います。

最後にHTML,CSSを両方使って実践形式で学べるサイト、Progateを利用して知識の体系化を行いましょう!

こちらのサイトでは、実際にWebサイトを作る過程でHTML,CSSを学ぶという形式になっていて、これまでバラバラだった知識が有機的にながります。

Progateで体系的な知識を身につけた後は、実際に自分でサイトを制作していきましょう。その際に、必要な知識はドットインストールやCODEPREP、Progateを見なおしていくことでしっかりと身につきます。

これで、webサイトを作れるようになりますね。

まとめ

いかがだったでしょうか?これまで全くプログラミングに触れてなかった人でもWebサイトを作れるようになれると思います。あとはPhotoshopやIllustratorなど、デザイナーのスキルをしっかり身につけていくため、バイトやインターン、もしくは個人制作でサイトを制作していきましょう。

マスターした方は、jQuery、JavaScriptの学習も行い、フロントエンドエンジニアとしての実力をしっかりと付けていけるようにしましょう。