この記事では、web初心者が独学でHTML/CSSを最短で身につけるロードマップを紹介しています。
また、webコーディングのスキルがあるとどんなふうにキャリアアップするかもまとめています。
何から手をつけていいかわからない人こそ読んで欲しいです。
HTML/CSSはけして難しい知識ではなりません。効率的に無駄なく、しっかりとした技術を身につけましょう。
この記事を書いているのは、Webデザイナー歴17年の現役フリーランスです。長年HTMLに携わってきた知識を活かして、最短のロードマップを紹介します
Webコーディングとは
Webコーディングとは、HTMLとCSSという言語を使い、デザイナーが起こしたデザインをWebサイトの形に仕上げる作業のことです。また、Webサイトに動的な動きをつけたいときは、JavaScript（ジャバスクリプト）という言語を使います。
Webサイトを作るには、HTML/CSSは欠かせないスキルです。
HTMLはプログラミングとよく似ていますが、プログラミング言語ではありません。正確にはマークアップ言語といって、プログラミングよりシンプルで覚えやすい言語です。
HTMLはプログラミング苦手な人でも学びやすいと言われます
また、学習ツールがたくさんあるので、独学でも十分学べます。
これからのITサービスにおいて、エンジニアになるにしろ、Webデザイナーになるにしろ、HTML/CSSは必要な言語になってきます。
私は20年近く前に初めてHTML/CSSを学びましたが、今でもWebコーディングはスキルとしても収入としても欠かせないものです。
- HTML/CSSは、Webサイトを構築するのに基本の言語
- HTML /CSSは、プログラミングより学びやすい
- サイトに動的な動きをつけたいときはJavaScriptを学ぶ（これはプログラミング言語）
HTML/CSS は独学可能？
結論から言うと、独学は全然可能です。HTMLもCSSも、独学のみでしっかりとしたスキルを身につけることができる言語だと思います。
試しに独学を始めてみて、どうしても難しいようであれば、スクールに通うなどの方法をとるといいでしょう
理由1:HTML言語は覚えやすい言語だから
HTMLはプログラミング言語に似ていますが、マークアップ言語と呼ばれています。
マークアップ言語のルールはとてもシンプルです。タグと言われる<>で囲まれた要素で作るのですが、このタグベースの構文は直感的で分かりやすく、タグの名前もその要素の意味を示しているのがわかります。
例えば、強調したい言葉は、
<strong>ここが大事</strong>
というふうに<strong>（強い）というタグを使います。
HTMLもCSSも書き方が決まっているので、考えたり思考したりする時間はあまりいりません。
理由2:学習ツールがたくさんあるから
HTML/CSSにはたくさんの学習方法があります。また、詰まった時でも検索すればネット上に溢れんばかりの情報があります。HTMLやCSSほど情報が多い言語はないのではないでしょうか。
基本的なことばかりではなく、実践に使える応用テクニックも多くがネット上で手に入れることができます
またコピペで使えるテンプレートもネットに多数あります。先人の知恵はガンガン使っていきましょう。
【独学ロードマップ】Webコーディング学習の基本的な流れについて
テキストエディタをインストールする
本・動画・オンライン学習サービスのどれかで学習する
写経（コードを書き写すこと）でいいから自分の手でコードを書く
コードを書くことを繰り返す
簡単なコーデイングから自分で始めてみる
Webコーディングの学習方法の流れは、学校の勉強と同じです。基本を学び、最初は真似をして覚えます。そして自分の力でコードを書き、経験値を身につける。その繰り返しです。
たとえうまくかけない部分があっても、基礎に戻って勉強しているうちに書ける時が必ずきます。
この流れは独学で学ぼうとも、専門スクールで学ぼうとも変わりません。
Webコーダーに必要なツール：テキストエディタ（無料）
Webコーディングに必要なのは、テキストエディタと呼ばれるソフトです。
初心者におすすめのソフトは、マイクロソフト社提供の
です。無料で使用可能、全世界のエンジニアが使っている人気のテキストエディタです。
テキストエディタの画面はこんな感じです。このコードがHTMLで、Webコーダーは全部打ち込んでいきますよ。
Webコーディングの独学は、お金はほぼかかりません。無料のテキストエディタさえあれば、いつでもコーディング授業を始めることができますよ
次からはHTMLの独学ロードマップについて、具体的に解説していきます。
【基礎】Webコーディングの基本知識を習得しよう
オンライン学習サイトで学ぶ
プログラム学習は、実際に手を動かして学ぶのが一番です。なので、まずはオンラインで学べる、実践型の学習サイトを紹介します。
以下のサイトは、実際にHTMLコードを打ちながら学べるオンライン学習サイトで、HTMLの基礎を学ぶのにここほど適したところはありません。今現役で活躍しているほぼ全てのコーダー・プログラマの人が通ってきたはじめの一歩となるサイトです。
両方素晴らしいサイトで、どちらもやってもいいし、どちらか一方でもかまいません。月額1,100円程の有料サイトですが、無料の講座もたくさんありますので、まずは無料の会員登録をしてみてください。その上で気に入った方を選べばいいと思います。
難易度的には、progate→ドットインストールの順番をおすすめします。
次に、それぞれのサイトの特徴について説明します。
progate（プロゲート）：ブラウザ上でコードを採点してくれる
公式サイト:https://prog-8.com/
可愛いイラストとわかりやすい説明で、ゲーム感覚で課題が出されますので、自然にHTML・CSSについての理解が進みます。しかも課題をこなすたびにレベルアップするゲーム性があり、どんどん学習が進みます。
progateの場合、ブラウザ上だけでHTML学習を進めることができますので、テキストエディタも必要ありません。
なので、まずはHTMLはよくわからないけど触ってみたい。でも環境を整えるのは面倒くさい。という人にもぴったりです。
progateでは、HTMLとCSSの基本的な知識が身に付きます。
ドットインストール：3分動画レッスンで基礎を確実にできる
公式サイト：https://dotinstall.com/
ドットインストールは、1〜3分という短く簡単な動画を順にこなすことで、体系的にHTML/CSSを学ぶことができます。昔からある超有名な老舗サイトです。
講師の声とHTMLコードを打ち込んでいく動画をみながら、実際に真似して自分のパソコンでHTML /CSSを打ち込みます。
ドットインストールは、講師の説明がわかりやすいのが特徴です。Youtube等のレッスン動画と比較しても、ドットインストールが一番わかりやすいと思います。
progateとドットインストールに関しては、さらに詳しい内容を以下の記事にまとめてあります。
Webコーディングは本で学ぶ
本での学習もおすすめです。その理由は
- 書籍はネットの情報より正確性の精度が高い
- 順序立てて知識を整理してくれる。ネットだけで学ぶと知識が煩雑になりがち
- 知識に抜け落ちが少なくなる
ネットは古い情報がそのまま残っていたり古い記事をしれっと書き直ししているだけのものもありますが、本なら発行年数にさえ気をつければ、最新の正しい知識を得ることができます。
ただし最速な情報という意味では、ネットにはかないませんけどね
以下に私のおすすめ本を紹介します。
Webデザイン独学中の人向けに、デザインとHTMLの知識をまとめた本です。Webサイトの構築方法からHTMLとCSSを体系的にまとめられています。
知識0の超初心者向けにHTMLとCSSを丁寧に解説している本です。自信がない方は、まずはこの一冊からはじめると良いと思います。
【基礎2】写経でコーディングをしてみる
HTMLの写経コーディングとは、実際に書いてあるHTMLコードを写経のごとく丸写しして手打ちしていくことです。
何でもそうなのですが、模写や写経というのは、ただ真似しているだけでは腕は上がりません。
コーディングには必ずルールがあり、ルールに則ってHTMLタグが使われています。必ずそのコードの意味を知ることが大事です。タグにつまづいたら、本やGoogle等で意味を必ず調べるようにしましょう。
写経は続けているうちに、よく使われるルールが明確になり、またHTMLコーディングのコツがわかってくるはずです。
【応用】実際にWebサイトをHTMLコーディングしてみる
基礎知識を身につけたら、実際に自分の力のみでのWebコーディングの練習に進みましょう。
とにかく簡単でシンプルなサイトをネットで探し、自分なりのやり方でHTMLとCSSを組んでみてみてください。
これは、模写HTMLコーディングと言います。
画像はどうする？
コーディングに使う画像は右クリックで拝借したり、画面のスクリーンショットをとってPhotoshopで切り抜いて使いましょう。自分の練習用として使う範囲であれば問題ありません。
もし模写しようとしたサイトに大きなアニメーションがあったら、無視してかまいません。
アニメーションはJavaScriptというプログラム言語を使って実装されていますが、これは高度な技術なので、初心者のうちは動きの再現はしなくてOKです。
模写コーディングの答え合わせのやり方
自分で作ったHTMLの答え合わせの方法ですが、正しいソースと見比べる。というのが正式なやり方ですが、初心者にはおすすめしません。
実際のサイトは、CMSやフレームワーク（HTMLを構築するのに便利なツールのようなもの）を使っていることが多いので、ソースコードを見ても無駄なコードが大変多いです。初心者は理解できなくて挫折するだけです。
なので、答え合わせとしては、デザインが崩れてなければOK。
画面デザイン通りに全てのパーツが配置がされていて、スペースもちゃんととられていて、レイアウトが崩れてなければ大丈夫です。
ただし、レスポンシブデザインは意識して構築するようにしましょう。
レスポンシブデザインとは、ひとつのコーディングファイルでスマホとパソコン両方のレイアウトを実装すること。詳しくは、書籍やオンライン学習で学ぶことができますが、模写コーディングをする際もレスポンシブのコーディングは作り込むようにしましょう。
また、作成したHTMLは、全てのブラウザでちゃんと表示されなければいけません。
現在のブラウザのシェア率の一位はgoogleChromeですが、他のブラウザを使っているユーザーももちろんいますし、クライアントの使用ブラウザがマニアックな場合もあります。
ブラウザチェックを怠けると後々苦労しますので、面倒でも、最低chrome、safari、firefox、edgeといった主要ブラウザでのチェックを行う習慣を身につけるようにしておきましょう。
また、スマホ画面の崩れも注意してくださいね。
- 画像は右クリックで拝借
- サイトの動きは無視してO
- 答え合わせは崩れていないことを目視で確認できればOK
- ブラウザチェックも行うこと
模写コーディングにおすすめのWebサイト
「テンプレート HTML」で検索して出てくるサイトの、HTMLテンプレートの模写がおすすめです。
HTMLテンプレートとして提供されているWebサイトは、汎用的かつ実用的なものばかりで、これからWebコーダーとしてやっていくのであれば、練習して間違いない実践的なレイアウトばかりです。
なるべく簡単でスタンダードなレイアウトのものから始めましょう。
シンプルかつ王道かつ凝ったものがないので、初心者の模写コーディングとしては最適かと思います。
実際に受注するHTMLコーデイングの案件は、これらのテンプレート的なレイアウトのものがほとんどです
初心者がいきなり「webデザイン まとめ」とかで出てくる高クオリティのサイトを模写しないようにしてください。
HTMLコーディングに必要な画像の切り出しについて
コーディングには、HTMLコードを書く以外にももうひとつ大事な作業があります。
それは、「画像の切り出し」です。
デザイナーがデザインソフトで作成した「デザインカンプ 」と呼ばれるデザインデータから。必要な画像を取り出す必要があるのです。
デザインデータは、pngやjpegといったweb用の画像データではなく、.psdや.aiといった、デザインソフトのデータで届きます。
なので、HTMLのコーディングでは、コーディング側の作業者にもデザインソフトの購入とインストールが必要になってきます。
2023年現在、デザイナーが使っているデザインソフトはこの4つです。同じソフトのインストールがコーダーにも求められます。
- Adobe XD
- Adobe Photoshop
- Adobe Illustrator
- figma
figmaは無料ですが、他の3つは有料で全てAdobe社のデザインソフトです。
プロのWebコーダーは通常この3つのソフトがセットで入っているAdobeCCを契約しています。
AdobeCCの契約は公式でも可能ですが、Adobe公式認定スクールのデジハリオンライン経由で契約すると44%オフで購入できるので、かなりお得になっています。
AdobeCCは、Adobeの公式認定スクールであるデジハリ経由で契約することで、誰でも44%オフのコストダウンになります（私も含め利用者多し）
詳しくは
の記事に購入方法をまとめています。すでにAdobeCCを利用している方も乗り換えOK♪
progate/ドットインストールや模写コーディングの独学までは、デザインソフトは必要ありませんが、最終的に仕事をするのであれば、デザインソフトの購入は必要になりますので、お得情報として覚えておくといいですよ。
2023年現在では無料のfigmaで作ったデザインカンプも増えてきてはいますが、まだまだPhotoshopやXD納品も少なくはない現状です。
コーダー側からデザインソフトを指定することはできないため、プロを目指すのであれば、Adobeの契約は必須と思っておいた方がいいです。
デザイン画からのWebコーディングを学習する
先ほども書きましたが、実際のWebコーダーの仕事は、デザイナーから受けたデザインデータを元にHTMLを構築していきます。
コーダーはデザインソフトの使い方も多少は知っておかなくてはいけません（主に画像の切り出し方法）
画像を切り出してコーディングするのが本来の流れなので、実作業を学習したいとなった場合、元となるデザインカンプが必要です。
以下に、コーダー練習用のデザインカンプを無料配布してくださっているサイトさんをご紹介します。
・「Codestep | 作って学ぶコーディング学習サイト」さん
実践的な課題が豊富で、練習用にちょうどいい難易度も素晴らしいです。
もしつまづいてしまったら
初心者のコーダーの方には、こんなにたくさん覚えられるのか？写経しかできないんだけど、本当にこんな風なHTMLを書ける時が来るのか？とつまづく時が来るかもしれません。
大丈夫、私たちにはgoogle先生がついています。
プログラムコードでわからなくなったらgoogleに頼るというのは、上級者でも日常的にやってます。
私も毎日飽きもせずgoogle先生に聞いてばかりです
全てのコードを理解する必要はないのです、googleは最強のカンニングツールです。
基礎を覚えた後の学習方法
HTML/CSSの基礎を覚えるのは、3ヶ月もあれば十分かと思います。
初心者コーダーが次のステップとして何を学ぶかは以下の記事に詳しくまとめています。
HTML独学で大切なこと
HTMLを独学で学ぶにあたって大切なことは、とにかく自分の頭で考えてコードを打つことです。
HTMLという言語はルールがしっかりしていて、ある程度のタグの種類さえ覚えたらすぐに実践に入れます。最初は写経でもかまいません。ただ、なぜこのタグを使うのか、というのは意識して学習をすすめましょう。
また、ネットにはコピペOKのサンプルがたくさんあります。これらはサイト制作の時は使ってもかまいませんが、独学時点でコピペしては何の意味もありませんので、コピペするならなぜそのようなコードになっているかをちゃんと理解して書くようにしましょう。
また、独学していくうえで初心者の描いたHTMLの画面は必ずレイアウトが崩れ、デザインを再現できないことが多いでしょう。この時に何度も考えて、方法を検索し、試すことが大事です。デバッグ作業と言いますが、この積み重ねが、あなたの実力をあげてくれます。
だからたくさん失敗してもいいので、自分の力でコードを書くようにしましょうね。
ある程度学んだらとっとと仕事にすべし
ある程度の基礎が固まりサイトが一つでも二つでも作れるようになったらとっとと就職なり開業するなりで実践に移るのをお勧めします。
コーディングは実践を積まないと上手くならないし、経験値がそのままあなたのスキルになります。一つとして同じWebサイトはありませんのでとにかく数をこなすことで、一人前のコーダーになります。
また、どんどん新しい知識が出てきますが、待っていたらキリがないので、常に仕事を回しながら新しいことを取り入れていくようにしましょう。ITの人はみんなそうやって経験値を増やしています。実験台にされる案件はたまらないじゃないかと思うかもしれませんが、意外と新しいスキルというのにはみんな寛容ですし、ぜひ使ってみてと言われるものです。
それにWebコーディングの場合は致命的なことにはならないので、安心してください。
webコーディングを学んだ後のキャリアは？
最後に、Webコーディングを学んだ後、現場でどんな仕事をするのか具体的な例を見てみましょう。
- Webコーダー職として、Webサイトに携わる
- Webデザイナーとして、コーディングも同時に行う
- さらにコーディングを極めて、フロントエンドエンジニアになる
Webコーダー職として、Webサイトに携わる
Webサイト制作のコーディング担当の専門職になります。デザイナーから上がってきたデザインカンプをHTML/CSS、JavaScriptを使ってWebサイトの形に起こします。
フリーランスも可能ですが、デザイナーと一緒に組んだり、制作会社の下請けとして仕事を受注する感じになりますね。
コーディングもできるWebデザイナーになる
昨今ではWebデザイナーは必ずしもコーディングができる必要はないですが、コーディングもできるWebデザイナーは強みになります。自分でコーディングすると思うと、デザインも作りやすいです。
特にフリーランスの場合は、デザインからコーディングまで一人でできるので、サイト制作案件をまるっと一個受注することができます。
フロントエンドエンジニアになる
フロントエンドエンジニアとは、HTML・CSS、CMS構築といったコーダーの知識に加え、プログラミングのスキルもあり、Webサービスやアプリの構築を行うエンジニアのことです。
コーダーはよくマークアップエンジニアとも言われるのですが、それにプログラミングやシステム構築のスキルがついたのがフロントエンドエンジニアですね。
Webコーダーが案件をこなしていくうちにスキルアップして、フロントエンドエンジニアになるのは珍しくありません。