【初心者向け】HTMLとCSSを学習する手順を完全解説！

こういった疑問にこたえます。

本記事のHTMLとCSSはブラウザの表示に関わる重要な言語です。

HTMLとCSSのスキルがあれば、ホームページを作れるようになります。

いま皆さんがみている画面もHTMLとCSSでできています。WEBブラウザがそれらを読み取って文字の大きさや色、行間などを決めています。

厳密にはプログラミング言語とは言いませんが、ブラウザの画面に表示させるための命令と考えればプログラムといってもいいかもしれません。

HTMLとCSSはWEB制作を行うための第一歩です。その他のWEB系の言語であるJavaScriptやPHPを学ぶときにも必要になってきますので、ぜひ最初にマスターしておきましょう。

この記事では、HTMLとCSSの学習ロードマップを紹介しています。順番に学習していけば、HTMLとCSSはほぼ完璧です。次のステップであるJavaScriptやPHPに進んでも大丈夫。

完全初心者の方向けに紹介していますのでご安心ください。

HTMLとCSSを学習する手順

HTMLとCSSを学習する全体の流れを最初に紹介します。

Progateを1周する

初めてHTMLとCSSを勉強するという方はProgateという学習サイトを使うのがおすすめです。

Progateは正直めちゃくちゃわかりやすい。何にもわからない状態でもProgateなら挫折せずに最後まで走り切れます。

無料版でも少しは学習できますがそれだと内容がしょぼいです。

必ず有料のプラス会員になりましょう。月額1,078円を払うだけでほぼHTMLとCSSの基礎は身につきます。毎月払う必要は全然なくて、一ヶ月で終わらせれば1,000円で済みます。

2週間もあればHTML&CSSのコースを全て完了するので安心してください。

有料会員で学習できる内容こんな感じ。

• HTMLの基本的なタグの使い方
• CSSの基本的な使い方
• レスポンシブデザイン
• Flexboxの使い方

FlexboxまでやればHTMLとCSSの基本はバッチリです。

Progateの内容がしっかり理解できれば、自分でホームページを作れるようになります。

本一冊買うより安いのでケチらずに会員になりましょう。

書籍を1冊読む

Progateが1周できたら次は書籍を1冊読みます。

なぜ書籍を1冊読むかというと、Progateでの取りこぼしを拾うためです。

ProgateはHTMLとCSSの基礎は身につきますが、網羅されているわけではありません。

そこで、より詳しく書いてある本で知識を補って行きます。

HTMLとCSSの書籍でおすすめは「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」です。

ここでは本の内容を1ページ目からPCに打ち込んで動作を確認する必要はありません。

Progateで学習した内容は読み飛ばしながら、まだ知らないとこを拾っていきましょう。

Progateで学習した内容でもあまり理解できていないところがあれば、実際にコードを書いてPC上で動作を確認しましょう。

Udemyでサイト作成の手順を学ぶ

Progateで学習して本で取りこぼしを補えたらHTMLとCSSの基本はバッチリです。

次のステップとしてはUdemyでサイト作成の手順を学びます。

Udemyは動画の学習サービスです。プロのWebデザイナーさんがデザインカンプからコーディングしてWebページを作成していく過程を学べます。

デザインカンプというのはWebページを作成するためのページの見本です。実際、Web制作の仕事を受けると「こんなページを作ってください」というファイルが送られてきます。

コーダーさんはデザインカンプをみて同じものをHTMLとCSSを使って実現していきます。

プロのデザイナーと同じようにコーディングしていくことで実際に仕事を取ったときにどのような手順でやっていけば良いかがわかります。

Udemyで受講するべき講座は「未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース 」です。

Udemyはセール中に買うのがおすすめです。頻繁にセールをやっていて2,000円以下で購入できます。

Photoshopなどのツールも合わせて学習できます。PhotoshopはWeb制作の現場でも使用することがあるのでこの機会に覚えておきましょう。

サイトを模写する

最後のステップは実際のサイトの模写を行います。

模写というのは実際に存在するサイトのページを丸ごとそのまんまコピーしていく学習方法です。

正直これがいちばん良い上達方法です。

たぶん最初は一つのサイトを作るのに10時間くらいかかるかもしれません。もっとかかる人もいるかも。

これまで学習したことを思い出しながら一つずつ丁寧にやっていきましょう。

模写のおすすめはこの3つ。

• デイトラの無料練習素材
• Airbnb
• iSara

上から順番にやっていきましょう。だんだん難しくなっていきます。

最初からできる人はいません。本を見ながらでもゆっくりでも進めていきましょう。

Webページのデザインを見てコードを書いていき、全く同じものを作ることができればコーディングの仕事を受けれるくらい実力がついたということです。

HTMLとCSSを学習する手順まとめ

HTMLとCSSを学習する手順を紹介してきました。もう一度おさらいしておきます。

結構なボリュームですが、やり終えた頃には確実にスキルが身に付いています。

コーディングの仕事が取れるくらいのレベルです。自信を持っていきましょう。

これが終わったら次のステップに進みましょう。

HTML&CSSの学習が終わったらJavaScriptの学習をするのがおすすめです。

JavaScriptを学べばWebページに動きをつけることが可能です。さらにWebデザインの幅が広がるのでぜひ学習しましょう。