これからプログラミングを学んでいこうと思っているHTMLとCSSの初心者の方の中にはやる気があっても何をすべきなのかあまりよくわかっていない方もいると思います。
やる気があるのはとても素晴らしいことです。
しかしHTMLとCSSの初心者が間違った方法で勉強してもまったく成長はしません。
「なんとなく勉強してて気づいたら時間だけ無駄にたっていた」なんてこともあります。
HTMLとCSSの初心者はやるべきことが決まっていますのでそれをしっかりこなしていくことが大事です。
この記事では実際にHTMLとCSSの初心者状態からプログラミングの勉強を初めて、現在はWEB系エンジニアとして働いている僕がHTMLとCSSの初心者が何をすべきかについて解説していきます。
この記事を読むのにかかる時間は5分ほどです。
【この記事でわかること】
✔ HTMLとCSSの初心者がすべきこと
【この記事を読んでほしい方】
✔ HTMLとCSSの初心者の方
✔ HTMLとCSSをどのように学習すればいいかわからない方
【この記事の信頼性】
この記事を書いている僕は現役のWEB系エンジニアです。
HTMLとCSSの初心者状態からスクールに通って習得しエンジニアになりました。
現在は平均年収以上もらいながら服装も時間も場所も自由に働けています。
ではさっそく見ていきましょう。
HTMLとCSSの初心者は何をすべきなのかを現役エンジニアが解説します
結論から話すとHTMLとCSSの初心者はまず以下の3つのことをすべきです。
【HTMLとCSSの初心者がするべき3つのこと】
① : HTMLとCSSの意味を理解する
② : WEBサイト模写
③ : 自分でHTMLとCSSを使って作品を作ってみる
この章では初心者からエンジニアになった僕が、HTMLとCSSの初心者の方がすべきことを具体的に紹介します。
【この章でわかること】
✔ HTMLとCSSの初心者の方がまず最初にやるといいこと
HTMLとCSSの意味を理解する
HTMLとCSSの初心者の方がすべきことの1つ目がHTMLとCSSの意味を理解することです。
簡単にそれぞれの意味を以下にまとめました。
【HTML】
・Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略
・WEBページの骨組みになる部分
コチラでは動画でHTMLについての解説を見ることができます。
【CSS】
・Cascading Style Sheets（カスケーディング・スタイル・シート）の略
・WEBページの装飾になる部分
・HTMLで書かれた部分をデザインする
コチラでは動画でCSSについての解説を見ることができます。
ちなみにテックアカデミーの無料教材
を使えば0円でHTMLとCSSの基本を身につけることが出来ます。
こちらの記事でくわしく紹介しています。
>>テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】
WEBサイトの模写をしてみる
HTMLとCSSの初心者の方がすべきことの2つ目がHTMLとCSSを使ってWEBサイトの模写をすることです。
模写というのは名前の通り見本のWEBサイトのコードを真似して写すことです。
HTMLとCSSの初心者の方がWEBサイトの模写をするメリットは以下のとおりです。
・HTMLとCSSの関係性が目に見えてわかる
・全体のイメージがつく
・自分でもやれそうと思える
特にHTMLとCSSの関係性が模写をすると一気にわかるのでHTMLとCSSの初心者の方は1度模写はしておくべきでしょう。
HTMLとCSSの初心者の方が模写の際に使うといい教材はmanaさんの「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」です。
コチラの教材ではHTMLとCSSの基本的な知識はもちろん、WEBサイト模写に使える内容も含まれています。
通常の模写だと意味を理解しなくてもできてしまうのですが、この教材を使えば意味を理解しながら模写できるので一石二鳥なのです。
図や写真も多いのでHTMLとCSSの初心者の方でも取り組みやすいです。
僕もHTMLとCSSの初心者時代にお世話になりました。
自分で作品を作ってみる
HTMLとCSSの初心者の方がすべきことの3つ目がHTMLとCSSを使って自分で作品(WEBサイト)を作ってみることです。
そんなことできるの？と思うかもしれませんがWEBサイトの見た目だけならHTMLとCSSで十分に作れます。
そして自分でHTMLとCSSを使って作品をつくるというのはHTMLとCSSの初心者の方にとってとても力になります。
もしあなたがHTMLとCSSを使えるようになりたい。エンジニアになりたい。と思うのならばぜひやっておくべきでしょう。
【HTMLとCSSの初心者がするべき3つのこと】
① : HTMLとCSSの意味を理解する
② : WEBサイト模写
③ : 自分でHTMLとCSSを使って作品を作ってみる
テックアカデミーの無料教材を使って0円でHTMLとCSSの基本を身につける
>>テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】
プログラミングスクールに通えばHTML、CSSの学習はもちろんエンジニアとして必要なスキルを身につけることができます。
>>HTML/CSSを習得できるプログラミングスクールランキング
僕がHTMLとCSSの初心者だったころにやったこと
ここまではHTMLとCSSの初心者がすべきことについて詳しく解説してきました。
ここからは僕自身がHTMLとCSSの初心者時代にやったことについて紹介します。
【この章でわかること】
✔ HTMLとCSSの初心者のときに僕がやったこと
HTMLの骨組みの理解
僕がHTMLとCSSの初心者時代にやったことの1つ目はHTMLの骨組みの理解です。
先程も紹介しましたがテックアカデミーさんの動画や無料教材
を利用してHTMLの構造を理解しました。
その後はとりあえず基本的なタグの意味だけを暗記して、WEBサイトを模写していました。
全部暗記するのではなく大体の部分を覚えておいたのはよかったです。
特にHTMLはそんなに覚えることもないので基本的な部分だけはしっかりおさえておけばOKだと思います。
動画を見ながらのコーディング
僕がHTMLとCSSの初心者時代にやったことの2つ目は動画を見ながらのコーディングです。
ずっと真面目な教科書を読むよりも、HTMLとCSSを使ったいろんなデザインを楽しみながらコーディングしていましたね。
HTMLとCSSの初心者の方は「とにかく真面目に勉強だ」と意気込みがちですが、楽しくないと物事はすぐにつまらなくなってしまうものです。
多少は楽しいと思えるように勉強を工夫するのは大切です。
ちなみに動画教材だとUdemyもオススメです。 
当時の遊びのような勉強が仕事を始めた後に意外と役に立ったりしたりもしました。
スクールに通った
僕がHTMLとCSSの初心者時代にやったことの3つ目はプログラミングスクールに通ったことです。
HTMLとCSSについて初心者でそもそもプログラミングについても全く知識のなかった僕は将来的にエンジニアになりたかったこともありプログラミングスクールに通うことにしました。
最初の方はHTMLとCSSについても独学でやっていたのですが、
（詳しくはコチラHTMLとCSSを独学で１カ月勉強してみた結果【超成長した】)
やはりしっかりとした先生に教えてもらったほうがいいと思いスクールに通いました。
結果的に3ヶ月ほどスクールで学んでエンジニア就職までできたので本当に通ってよかったなとは思います。
>>【エンジニア最高】エンジニアになって4ヶ月たったので感想をまとめます
もしあなたがしっかりとした知識をつけたいと思っていたり、エンジニアになりたい。フリーランスになりたいと考えているのならばスクールに通うのもアリでしょう。
【僕がHTMLとCSSの初心者だったときにしたこと】
・HTMLの構造の理解
・動画を見てコーディング
・スクールに通った
テックアカデミーの無料教材を使って0円でHTMLとCSSの基本を身につける
>>テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】
\こちらではHTMLとCSSを学べるスクールをランキング化しています/
>>HTML/CSSを習得できるプログラミングスクールランキング
HTMLとCSSの初心者がやりがちなミス【回避するべき】
これからHTMLとCSSの勉強をしようと思っている方はするべきことをするのも大事ですが、それと同じぐらいにやってはいけない勉強法を避けるのも大事です。
HTMLとCSSの初心者がやるべきでないことをしてしまうと全く力が付きませんし、あとから「時間の無駄だった」と後悔することになります。
ここからはHTMLとCSSの初心者がやりがちなミスを紹介していきます。参考にしてぜひやらないようにしましょう。
【この章でわかること】
✔ HTMLとCSSの初心者がやらなくていいこと
とにかく暗記しようとする
HTMLとCSSの初心者がやりがちなミスの1つ目がとにかく暗記しようとすることです。
これはプログラミングにおけるすべてについて言えるのですが全部を暗記する必要はありません。
僕は現役のエンジニアとして働いていますが、細かいところまで全部暗記しているかと聞かれたら答えはNoです。
よく使うものについては当然ある程度は覚えていますが、そんなに使わないものに関しては暗記はしていません。
HTMLとCSSの初心者の方というかプログラミング初心者の方は「勉強=暗記」という考えが普通になっていると思いますがプログラミングを勉強するにあたってはその考えは捨てたほうがいいです。
それよりもよく使うものは覚えて残りはカンニングする（調べたりメモを見る）というほうがいいでしょう。
特にCSSについては細かいテクニックなどを合わせれば結構な量になります。
暗記はやらないでおきましょう。
教科書ばかり読んで手を動かさない
HTMLとCSSの初心者がやりがちなミスの2つ目が教科書ばかり読んで手を動かさないことです。
よくHTMLとCSSの初心者の方には「教科書の内容を全部頭に入れてから実践しよう」という方がいます。
しかしこれはNGな勉強方法です。
僕もHTMLとCSSの初心者の頃にまず覚えてから実践しようと思って失敗しました。
そのようなことをしてもいざ実践しようとするときには必ず忘れています。
1番良い勉強方法はやはり教科書や見本を見て手を動かしながら覚えることです。
できるエンジニアの方も同じことを言うと思います。
完璧を求める
HTMLとCSSの初心者がやりがちなミスの3つ目が完璧を求めることです。
結論から話しますがHTMLとCSSに限らずプログラミングを勉強し始めるとわからないことが必ず出てきます。
しかし最初のうちから分からないことが出てくるたびに悩んでしまうのはNGです。
完璧を追い求めると、出来ないときに自分にセンスがないと思って落ち込んでしまったり、勉強がつまらなくなったりします。
HTMLとCSSの初心者の方はまず8割型を理解して前に進みましょう。
続けていればいつかは「そういうことだったのか」とわかるタイミングがきます。
【HTMLとCSSの初心者の方がやりがちなミス】
・とにかく暗記しようとする
→暗記は重要部分だけでOK
・教科書ばかり読んで手を動かさない
→手を動かしながら覚えること
・完璧を求める
→最初は8割を目指せばOK
テックアカデミーの無料教材を使って0円でHTMLとCSSの基本を身につける
\こちらではHTMLとCSSを学べるスクールをランキング化しています/
>>HTML/CSSを習得できるプログラミングスクールランキング
HTMLとCSSの初心者レベル卒業の目安
この章ではHTMLとCSSの初心者を卒業したと言えるレベルの目安を解説します。
【この章でわかること】
✔ HTMLとCSSの初心者を卒業したと言えるレベルの目安
HTMLタグの意味を一通り理解している
HTMLとCSSの初心者を卒業したと言えるレベルの目安の1つ目がHTMLタグの意味を一通り理解していることです。
HTMLのタグには例えば以下のようなものがあります。
<DIV> …… ひとかたまりの範囲として定義する（ブロック要素）
<SPAN> …… ひとかたまりの範囲として定義する（インライン要素）
<!DOCTYPE> …… ドキュメントタイプを宣言する
<HTML> …… HTML文書であることを宣言する
<HEAD> …… 文書のヘッダ情報を表す
<META> …… その文書に関する情報（メタ情報）を指定する
<TITLE> …… 文書にタイトルをつける
<BODY> …… 文書の本体を表す
<H1>～<H6> …… 見出しを付ける
<P> …… ひとつの段落（パラグラフ）であることを表す
引用元：HTMLクイックリファレンス
これらのタグの意味をある程度理解できていれば少なくともHTMLとCSSの初心者ではないと言えます。
CSSでの基本的な装飾ができる
HTMLとCSSの初心者を卒業したと言えるレベルの目安の2つ目がCSSでの基本的な装飾ができることです。
具体的にはCSSを用いて以下の装飾ができれば少なくともHTMLとCSSの初心者以上のスキルはあると言えます。
・フォントサイズ調節
・ブロック要素の横並べ
・色調節
・ボタンの作成
・背景色の調整
・重なりの調整
・左寄せ、中央寄せ、右寄せ
・marginとpaddingの調整
さらに疑似要素などを使いこなせるようになるとCSSの技術は普通にあると言えるようになります。
調べながらコーディングできる
HTMLとCSSの初心者を卒業したと言えるレベルの目安の3つ目が自分で調べながらコーディングできることです。
初心者の段階ではHTMLとCSSについての参考書を見ながらだったり見本のWEBサイトを模写しながらだったりしてコーディングします。
この段階の次の段階が自分で調べながら理想のWEBページを作れることです。
自分で調べながらある程度HTMLとCSSでWEBページが作れるようになれば初心者のレベルは卒業しているといえます。
【HTMLとCSSの初心者卒業のレベルの目安】
・HTMLの基本タグの意味を理解している
・CSSで基本的な装飾ができる
・調べながらコーディングできる
テックアカデミーの無料教材を使って0円でHTMLとCSSの基本を身につける
>>テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】
\こちらではHTMLとCSSを学べるスクールをランキング化しています/
>>HTML/CSSを習得できるプログラミングスクールランキング
HTMLとCSSの初心者の方にオススメのスクール3選
ここまではHTMLとCSSの初心者の方に向けて勉強法ややりがちなミスについて紹介してきました。
しかしHTMLとCSSの初心者の方の中には自分で勉強するのには自信がなかったりしっかりした先生から教えてもらいたいという方もいると思います。
ちなみにコチラでも話していますが僕も最初は誰かにしっかり教えてもらうべきだと思います。
>>HTMLとCSSを独学で１カ月勉強してみた結果【超成長した】
結論から話すと1人でHTMLとCSSの初心者の方で誰かに教えてもらいたい方ははスクールに通うべきです。
僕も最初は独学していたのですが結果的にスクールに通いました。
>>テックアカデミープロ(旧エンジニア転職保証コース)で就職しました【道のりを全て教えます】
この章では現役WEB系エンジニア目線でHTMLとCSSの初心者の方にオススメのスクールを紹介します。
【この章でわかること】
✔ HTMLとCSSの初心者の方にオススメのプログラミングスクール
テックアカデミー
HTMLとCSSの初心者の方にオススメのプログラミングスクールの1つ目はキラメックス株式会社の運営しているテックアカデミー 
です。
| スクール名 | テックアカデミー |
| 場所 | 全国（オンライン） |
| 料金 | 月々3709円〜(分割払いの場合） |
| 形式 | オンライン |
| 受講条件 | なし |
【オススメの理由】
・受講できるコース26種類もあり他スクールと比べても量が圧倒的に多い
・教材の質が非常に高く未経験からエンジニアやWEBデザイナーを目指せる
・現役のエンジニアにHTMLとCSSを教えてもらえる専門のHTML/CSSトレーニングコースがある
テックアカデミーでHTMLとCSSの無料教材を手に入れる方法を公開しました。
>>テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】
テックアカデミーの無料体験についてはこちらの記事でくわしく紹介しています。
>>僕がテックアカデミーの無料体験を受けた時の話【内容を詳しく公開】
テックキャンプ
HTMLとCSSの初心者の方にオススメのプログラミングスクールの2つ目は株式会社divが運営するテックキャンプ です。
| スクール名 | テックキャンプ |
| 料金 | 月30,000円〜 |
| 場所 | 東京（渋谷）/大阪（梅田）/名古屋（栄）/福岡（天神） |
| 型式 | オンライン+教室 |
| 受講条件 | なし |
【オススメの理由】
・挫折させないライザップスタイルの授業
・周りにやる気が多い方がたくさんいる
・HTMLとCSSもしっかりカバーしている
テックキャンプのコースについて詳しくはコチラの記事でまとめています。
>>テックエキスパートがテックキャンプに改名【変更点を徹底解説】
ちなみにテックキャンプはオンラインでも受講可能です。くわしくはコチラにまとめています。
>>テックキャンプはオンライン受講できる？【聞いてみました】
ポテパンキャンプ
HTMLとCSSの初心者の方にオススメのプログラミングスクールの3つ目は株式会社ポテパンが運営するポテパンキャンプ
です。
| スクール名 | ポテパンキャンプ |
| 場所 | 全国（オンライン） |
| 料金 | ポテパンキャンプ経由でエンジニアになれば無料 |
| 形式 | オンライン |
| 受講条件 | なし |
【オススメの理由】
・HTMLやCSSの基本から応用まで身につく
・実践的な学習でエンジニアとしての力がつく
・少々ハードな内容になっているのでやる気のある方向き
ポテパンキャンプについてはこちらの記事でくわしく紹介しています。
>>ポテパンキャンプの就職先・評判・働きながら通えるのか【全てが分かる完全版まとめ】
HTMLとCSSの初心者の方は正しい勉強をしよう【勉強方法がすべて】
今回はHTMLとCSSの初心者の方に向けて勉強方法や僕自身がやってきたこと、HTMLとCSSの初心者レベルの卒業目安などについて解説してきました。
今この画面を前にしているあなたも今後の学習のイメージが大体ついているところだと思います。
HTMLとCSSの学習自体はめちゃくちゃ難しいわけではありません。
ただし教材選びや教えてくれる人を選ぶのが難しいのは事実です。
もしあなたが間違った学習方法で取り組んでしまうとまったく力がつかないなんてこともあるので教材選びは慎重になりましょう。
あなたの学習を応援しています。
テックアカデミーの無料教材を使って0円でHTMLとCSSの基本を身につける
HTMLとCSSの無料教材を手に入れる方法を公開しました。
>>テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】
