HTML/CSS

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

2020年11月4日

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】と書かれた画像

 

あなた
HTMLとCSSの初心者なのですが何から勉強すべきでしょうか?

 

これからプログラミングを学んでいこうと思っている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についての解説を見ることができます。

はじめての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を独学で1カ月勉強してみた結果【超成長した】)

 

やはりしっかりとした先生に教えてもらったほうがいいと思いスクールに通いました。

結果的に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の初心者がやらなくていいこと

 

とにかく暗記しようとする

 

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と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の初心者の方にオススメのスクール3選と書かれた画像

 

あなた
HTMLとCSSの初心者です。独学に自信がないのですが、オススメのスクールはありますか?

 

ここまではHTMLとCSSの初心者の方に向けて勉強法ややりがちなミスについて紹介してきました。

 

しかしHTMLとCSSの初心者の方の中には自分で勉強するのには自信がなかったりしっかりした先生から教えてもらいたいという方もいると思います。

 

ちなみにコチラでも話していますが僕も最初は誰かにしっかり教えてもらうべきだと思います。

>>HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

 

結論から話すと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を無料で学ぶ技【初心者必見】

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

© 2022 エンジニアてんし君ブログ