HTMLとCSSを独学で身につける順番と、在宅のコーディング案件で求められる水準

2026年6月22日

＠SOHO編集部

この記事のポイント

✓HTMLとCSSを独学で身につける順番を
✓模写の進め方まで整理しました
✓つまずきやすい点と抜け出し方

HTMLとCSSは、プログラミングの中でも独学で身につけやすい分野です。必要な道具は無料でそろい、書いた結果がすぐにブラウザの画面で確かめられるからです。ただし、基本のタグを覚えただけでは、在宅のコーディング案件で求められる水準には届きません。仕事として受けるには、デザインの見本どおりに組み、スマートフォンでも崩れないページを作れることが求められます。

この記事では、HTMLとCSSを独学で身につける順番を、準備する道具から、基本のタグ、レイアウト、スマートフォン対応、模写の進め方まで順に説明します。後半では、在宅のコーディング案件で求められる水準と、案件を受けるときに確かめることを扱います。

HTMLとCSSはそれぞれ何をするものか

HTMLとCSSは、Webページを作るための2つの言語です。役割がはっきり分かれているので、最初にその違いを押さえておくと、学ぶ内容の整理がしやすくなります。

HTMLは中身と構造を決める

HTMLは、Webページの中身と、その構造を決める言語です。ここが見出し、ここが段落、ここが画像、ここがリンク、というように、文章や画像に意味の印を付けていきます。この印のことを「タグ」と呼びます。HTMLだけで作ったページは、文字と画像が上から順に並ぶだけの、飾りのない見た目になります。

CSSは見た目を決める

CSSは、HTMLで作った中身の見た目を決める言語です。文字の大きさや色、余白、背景、要素を横に並べるか縦に並べるか、といった見た目の指定を、CSSでまとめて行います。HTMLが建物の骨組みと部屋の並びだとすれば、CSSは壁紙や家具の配置にあたります。

JavaScriptとの違い

Webページの仕組みには、もう1つJavaScriptという言語もよく登場します。JavaScriptは、ボタンを押したら表示を切り替える、入力の内容を確かめる、といったページの動きを作る言語です。HTMLとCSSが「表示」を担当するのに対し、JavaScriptは「動き」を担当します。独学では、まずHTMLとCSSで見た目どおりのページを作れるようになり、そのあとでJavaScriptに進むのが一般的な順番です。

言語	担当すること	例
HTML	中身と構造	見出し、段落、画像、リンク、表
CSS	見た目	文字の色と大きさ、余白、配置、背景
JavaScript	動き	メニューの開閉、入力の確認、表示の切り替え

HTMLとCSSは独学で身につくのか

HTMLとCSSは、独学で身につけている人が多い分野です。Web制作の会社で働く人の中にも、最初は独学で学んだという人は少なくありません。

独学に向いている理由

独学に向いている理由は3つあります。1つ目は、必要な道具がすべて無料で手に入ること。2つ目は、書いたものをブラウザで開けばすぐに結果が見えるので、間違いに気づきやすいこと。3つ目は、学ぶための資料が豊富にあることです。Webの技術の解説を公開しているMDN Web Docsのように、無料で読める信頼性の高い資料もそろっています。

独学で止まりやすいところ

一方で、独学には止まりやすいところもあります。HTMLとCSSでは、思ったとおりの位置に要素が並ばない、余白が想定と違う、スマートフォンで表示が崩れる、といった見た目の問題で長く悩むことが多くなります。Webの学習について解説している記事でも、相談相手を持つことが勧められています。

独学で行き詰まったときのために、技術的な相談ができる指導者を見つけておくと安心です。オンラインコミュニティの経験者やプログラミングスクールのメンター、実務経験のあるエンジニアなど、的確なアドバイスをもらえる環境を整えることで、効率的な学習が可能になります。出典: moreworks.jp

相談できる人がいない場合でも、後で説明するブラウザの開発者ツールの使い方を覚えておくと、見た目の問題の多くは自分で原因を突き止められるようになります。

準備するもの

HTMLとCSSの学習に必要なのは、パソコンと、コードを書くためのエディタ、表示を確かめるブラウザの3つです。どれも無料でそろいます。

コードを書くエディタ

エディタとは、プログラムを書くための文字の編集ソフトのことです。Visual Studio Code（略してVS Code）は無料で使えるエディタで、HTMLとCSSを書くときにタグの入力を補ってくれたり、色分けして読みやすくしてくれたりします。Windowsでも Macでも使えます。メモ帳のような普通の文字の編集ソフトでも書けますが、間違いに気づきやすいので、最初から専用のエディタを使うほうが効率よく学べます。

表示を確かめるブラウザ

書いたHTMLのファイルをブラウザで開くと、ページとして表示されます。普段使っているブラウザで構いませんが、仕事ではいくつかのブラウザで表示を確かめることになるので、慣れてきたら2種類以上のブラウザを入れておきます。

パソコンの性能

HTMLとCSSの学習だけなら、高い性能のパソコンは必要ありません。普段インターネットを見たり文書を作ったりしているパソコンで十分です。画像の編集ソフトやデザインのソフトも使うようになったら、そのときに性能を見直します。

ファイルの整理の仕方を決めておく

学習を始めたら、練習ごとにフォルダを分け、その中にHTMLのファイル、CSSのファイル、画像のフォルダを分けて保存する形に決めておきます。仕事でも、ページのファイル、見た目のファイル、画像をそれぞれ決まった場所に分けて納品するのが一般的です。最初からこの形に慣れておくと、ファイルの場所を指定する書き方でつまずくことが減り、案件で受け取ったファイルの構成もすぐに読み取れるようになります。

HTMLとCSSを独学で身につける順番

準備ができたら、次の6つのステップで進めます。各ステップで「終わりの目安」に届いたら、次へ進みます。

ステップ1：HTMLの基本のタグを覚える

最初に、よく使うHTMLのタグを覚えます。見出し、段落、リンク、画像、箇条書き、表といった、ほとんどのページで使うタグです。最初から全部のタグを覚える必要はありません。自己紹介のページのように、見出しと段落と画像だけでできる簡単なページを作りながら覚えます。

ステップ2：CSSの基本の指定を覚える

次に、CSSで文字の色や大きさ、背景の色、余白を指定する方法を覚えます。CSSで特に大切なのは、どの要素に指定を当てるかを決める書き方（セレクタと呼ばれます）と、要素の周りの余白の考え方です。要素の内側の余白と外側の余白の違いが分かると、思ったとおりに間隔を空けられるようになります。

ステップ3：レイアウトを覚える

要素を横に並べる、画面の中央に置く、2列や3列に分ける、といった配置の方法を覚えます。現在はFlexbox（フレックスボックス）とGrid（グリッド）という2つの仕組みが広く使われています。Flexboxは1列に並べる配置、Gridは縦と横の格子に並べる配置が得意です。ここが、HTMLとCSSの学習で最もつまずきやすいところです。

ステップ4：スマートフォンに対応させる

画面の幅に合わせて表示を切り替える方法を覚えます。パソコンでは3列に並べ、スマートフォンでは1列に並べる、といった切り替えです。画面の幅に応じて表示を変える作り方を「レスポンシブ」と呼び、CSSのメディアクエリという書き方で実現します。今のWebサイトは、スマートフォンで見る人が多いので、仕事ではほぼ必ず求められます。

ステップ5：既存のサイトを見本にして作る

基本が分かったら、実在するWebサイトを見本にして、同じ見た目のページを自分で組んでみます。この練習は「模写」と呼ばれ、実務に近い力がつきます。やり方は後の節で詳しく説明します。

ステップ6：デザインの見本から組む

最後に、デザインの見本の画像やデザインのファイルを受け取って、それをもとにページを組む練習をします。仕事の多くは、デザイナーが作った見本を、HTMLとCSSでWebページにする作業です。見本を正確に読み取り、余白や文字の大きさまで合わせて組めるようになれば、案件を受ける準備が整います。

ステップ	やること	終わりの目安
1	HTMLの基本のタグ	見出し、段落、画像、リンクで1ページ作れる
2	CSSの基本の指定	色、大きさ、余白を思ったとおりに変えられる
3	レイアウト	横並び、中央寄せ、2〜3列の配置ができる
4	スマートフォン対応	画面の幅で表示を切り替えられる
5	模写	実在のページと同じ見た目を組める
6	デザインの見本から組む	見本どおりの余白と大きさで組める

学ぶ期間の目安と計画の立て方

HTMLとCSSを仕事に使える水準まで身につける期間は、1日にどれだけの時間を取れるか、以前にパソコンでの作業に慣れているかで大きく変わります。数週間で基本のタグを覚えることはできても、デザインの見本どおりに組めるようになるには、模写を何本も重ねる期間が必要です。

段階ごとに区切って計画する

計画は、前の節のステップごとに区切って立てます。最初の段階は基本のタグとCSSの基本、次の段階はレイアウトとスマートフォン対応、最後の段階は模写とデザインの見本からのコーディング、という3つの区切りです。それぞれの区切りに期限を決め、期限が来たら、終わりの目安に届いたかを振り返ります。届かなかったら、計画を直して続けます。

毎日少しでも書く

HTMLとCSSは、手で書いた量に比例して身につきます。週末にまとめて長い時間を取るより、毎日30分でもエディタを開いてコードを書くほうが、前回の内容を忘れずに積み上げられます。時間がない日は、開発者ツールで好きなサイトの余白の付け方を眺めるだけでも、見る目が育ちます。

作ったものを残しておく

学習の途中で作ったページは、消さずにフォルダに残しておきます。数か月後に見返すと、自分の書き方の変化が分かり、続ける力になります。あとで作品を作るときに、部品として使い回せることもあります。

教材の選び方

HTMLとCSSの教材は、無料の学習サイト、書籍、動画の講座と種類が豊富です。選び方の基本は、最初の1周は1つに絞り、分からないところだけを別の教材で補うことです。

無料の資料で基本を固める

信頼できる無料の資料として、Mozillaが運営するMDN Web Docsの学習のページがあります。Webの技術を初めて学ぶ人向けに、HTMLとCSSの基本から順に学べる構成になっています。タグやCSSの指定の正確な意味を調べたいときにも役立つので、学習の初めから終わりまで、辞書のように手元に開いておくとよい資料です。

書籍は新しいものを選ぶ

書籍で学ぶなら、出版から年数がたっていないものを選びます。HTMLとCSSは書き方の流行や推奨される方法が変わる分野で、古い書籍では、今では使われないレイアウトの方法が中心に書かれていることがあります。FlexboxやGridを使ったレイアウトを扱っているかどうかが、新しさを見分ける目安になります。

動画は手を動かしながら見る

動画の講座は、エディタの操作やブラウザでの確かめ方を目で見て覚えられるのが利点です。ただし、見ているだけだと分かった気になりやすいので、動画を止めて、自分の手で同じコードを書いてから先へ進みます。

模写コーディングの進め方

模写は、HTMLとCSSの独学で最も力がつく練習です。進め方を順に説明します。

見本のサイトを選ぶ

最初の見本は、構造が単純なサイトを選びます。1ページで完結していて、文章と画像が中心の、お店や事務所の紹介のページのようなものが向いています。動きの多いサイトや、ページ数の多い大きなサイトは、最初の見本には向きません。

画面を観察して構造を書き出す

コードを書き始める前に、見本の画面を観察し、どんな部分でできているかを書き出します。ページの上部の案内、大きな画像の部分、サービスの紹介の部分、問い合わせの部分、ページの下部、といった区切りです。それぞれの区切りの中に、見出し、文章、画像、ボタンがどう並んでいるかを紙に書いておくと、HTMLの構造を決めやすくなります。

見本のコードは最後に見る

ブラウザの機能を使えば、見本のサイトのコードを見ることができます。しかし、最初から見本のコードを見ながら書くと、写しただけで終わってしまいます。まず自分で組んでみて、どうしても再現できない部分だけを、最後に見本のコードで確かめます。自分の書き方と見本の書き方の違いから学ぶことが多くあります。

練習の範囲にとどめる

模写したコードや、見本のサイトの文章や画像は、他人が作ったものです。練習として手元で作るのにとどめ、自分の作品として公開したり、仕事に使ったりはしません。作品として公開するものは、文章も画像も自分で用意したオリジナルのページにします。

つまずきやすい点と抜け出し方

HTMLとCSSの独学で多くの人がつまずく点と、その抜け出し方を整理します。

思ったとおりの位置に並ばない

要素が横に並ばない、中央に寄らない、という悩みは、レイアウトの指定を、並べたい要素の親にあたる要素に書いているか、並べたい要素そのものに書いているかを取り違えていることがよくあります。Flexboxで横に並べたいときは、並べたい要素を包んでいる親の要素に指定します。どの要素が親で、どの要素が子かを、HTMLの構造で確かめる習慣をつけます。

余白が想定と違う

余白が思ったより大きい、または小さいときは、要素の内側の余白と外側の余白のどちらを指定しているか、要素の大きさに余白や枠線が含まれているかを確かめます。ブラウザがもともと要素に付けている余白が原因のこともあります。

指定したCSSが効かない

CSSを書いたのに見た目が変わらないときは、別の指定が優先されていることがほとんどです。CSSには、同じ要素に複数の指定が当たったとき、どれを優先するかの決まりがあります。より具体的に要素を指定した書き方や、後に書かれた指定が優先されます。どの指定が効いているかは、次の節の開発者ツールで確かめられます。

スマートフォンで崩れる

パソコンでは問題なく見えるのに、スマートフォンで崩れるのは、要素の幅を固定の数値で指定していることが原因の場合が多くあります。幅は画面に対する割合で指定する、画像は親の要素の幅を超えないようにする、といった書き方にすると、画面の幅が変わっても崩れにくくなります。

ブラウザの開発者ツールを使いこなす

HTMLとCSSの独学で、教材と同じくらい大切なのが、ブラウザに付いている開発者ツールです。多くのブラウザでは、ページの上で右クリックして「検証」などの項目を選ぶと開けます。

開発者ツールでできること

開発者ツールを開くと、ページのHTMLの構造と、選んだ要素に当たっているCSSの指定が一覧で表示されます。どの指定が効いていて、どの指定が別の指定に負けて打ち消されているかも分かります。要素の大きさ、内側の余白、外側の余白も図で表示されるので、余白の問題の原因を目で確かめられます。

その場で書き換えて試す

開発者ツールでは、表示されているCSSの値をその場で書き換えて、見た目がどう変わるかを試せます。書き換えはページを読み込み直すと元に戻るので、気軽に試せます。思ったとおりになる値が見つかったら、それを自分のファイルに書き写します。

スマートフォンの表示を確かめる

開発者ツールには、画面の幅をスマートフォンの大きさに切り替えて表示する機能もあります。いちいちスマートフォンで開かなくても、画面の幅ごとの表示を手早く確かめられます。ただし、実際の端末で見ると違って見えることもあるので、仕上げの段階では実物のスマートフォンでも確かめます。

在宅のコーディング案件の種類

HTMLとCSSを身につけると、在宅で受けられるコーディングの案件があります。案件の種類によって、求められる水準も違います。

案件の種類	内容	求められること
LP（ランディングページ）のコーディング	広告から人が訪れる1枚の縦長のページ	デザインどおりの再現、スマートフォン対応
既存サイトの修正	文言や画像の差し替え、表示の崩れの修正	他人が書いたコードを読んで直す力
ページの追加	既存のサイトに新しいページを足す	既存のデザインと書き方に合わせる力
メールの装飾	メールマガジンの見た目を整える	メールソフトごとの表示の違いへの対応

独学の人が最初に取り組みやすいのは、既存サイトの修正や、範囲のはっきりしたLPのコーディングです。LPのコーディングの仕事の内容と、求められる力はLP制作・HTML/CSSコーディングのお仕事で詳しく紹介しています。

在宅の案件で求められる水準

コーディングの案件で依頼主が求めるのは、「デザインの見本どおりに、どの環境でも崩れずに表示されるページ」です。具体的には、次のような点が見られます。

デザインの見本どおりに組めているか

文字の大きさ、行の間隔、余白、色が、デザインの見本と合っているかが見られます。見た目が「だいたい同じ」では足りず、見本と並べて比べたときに違いが分からない程度の正確さが求められます。

どの画面の幅でも崩れないか

パソコン、タブレット、スマートフォンのそれぞれの幅で、表示が崩れないことが求められます。デザインの見本がパソコン用とスマートフォン用の2つしか用意されていない場合でも、その間の幅で崩れないように組むのが仕事の水準です。

指定されたブラウザで確かめているか

依頼主から、表示を確かめるブラウザが指定されることがあります。指定されたブラウザすべてで表示を確かめ、問題がないことを伝えてから納品します。

コードが読みやすく、直しやすいか

納品したコードは、あとで依頼主や別の人が直すことがあります。字下げがそろっている、要素に付ける名前が内容を表している、使っていない指定が残っていない、といった読みやすさも評価されます。

画像の扱いと表示の速さ

大きすぎる画像をそのまま使うと、ページの表示が遅くなります。表示する大きさに合った画像を使う、適した形式で保存する、といった配慮も求められます。

誰にとっても見やすいか

見出しには見出しのタグを使う、画像には内容を表す説明の文を付ける、文字と背景の色の差を十分に取る、といった配慮は、目の不自由な人が読み上げの機能を使う場合や、さまざまな環境でページを見る人にとっての見やすさにつながります。

HTMLとCSSの次に学ぶもの

HTMLとCSSでデザインの見本どおりのページを組めるようになったら、次に何を学ぶかで受けられる案件の幅が変わります。代表的な2つの方向を紹介します。

JavaScriptで動きを付ける

メニューを開いたり閉じたりする、画像を切り替えて見せる、入力の内容を送る前に確かめる、といった動きは、JavaScriptで作ります。LPのコーディングの案件でも、簡単な動きを求められることが多く、HTMLとCSSに加えて基本的なJavaScriptが書けると、引き受けられる案件が増えます。進むタイミングの目安は、模写で実在のページと同じ見た目を組めるようになったときです。見た目を思いどおりに作れないうちに動きまで学ぼうとすると、どちらも中途半端になりがちです。

WordPressのサイトに対応する

小さな会社やお店のWebサイトには、WordPressという仕組みで作られたものが多くあります。WordPressは、管理画面から記事やページを追加できる仕組みで、見た目はHTMLとCSSで作られたテーマと呼ばれる部品で決まります。既存サイトの修正の案件では、WordPressのテーマの中のHTMLとCSSを直す仕事がよく出てきます。テーマの仕組みにはPHPという別の言語も使われているので、WordPressの案件を受けたい人は、HTMLとCSSのあとにPHPの基本と、WordPressのテーマの構造を学びます。

デザインのソフトを読めるようにする

仕事では、デザイナーが作ったデザインのファイルを受け取ってコーディングすることが多くあります。デザインのファイルから、文字の大きさや色、余白の数値を読み取る操作に慣れておくと、見本の画像だけを見て推測するよりも正確に、速く組めるようになります。依頼主によって使っているソフトが違うので、よく使われるものの基本の操作を確かめておきます。

HTML5プロフェッショナル認定試験という目印

HTMLとCSSの力を示す資格として、LPI-Japanが実施しているHTML5プロフェッショナル認定試験があります。公式サイトによると、HTML5、CSS3、JavaScriptなどのマークアップに関する技術力と知識を中立的な立場で認定する試験で、レベル1とレベル2の2つに分かれています。受験は、会場と日時を選べるコンピュータを使う方式（CBT）です。

独学の人にとっては、学ぶ範囲の抜けを確かめる目印として役立ちます。案件を受けるときに必須になることは多くありませんが、作品と合わせて示せば、基礎を体系的に学んだことの裏付けになります。試験の内容と仕事での使い道はHTML5プロフェッショナル認定試験で、副業での生かし方はHTML5プロフェッショナル認定試験でWeb制作の副業力アップで、それぞれ紹介しています。

作品の作り方

案件を受けるには、自分の力を示す作品が必要です。模写したページは練習にとどめ、作品は自分で用意した内容で作ります。

架空のお店や事務所のサイトを作る

架空のカフェ、美容室、士業の事務所などを設定し、その紹介のサイトを作ります。トップページ、サービスの紹介、問い合わせのページなど、3ページほどの構成にすると、ページをまたいだ作りの統一も見せられます。

作品の説明を添える

作品には、作るのにかかった時間、スマートフォンへの対応の有無、確かめたブラウザ、工夫した点を添えます。デザインも自分で作った場合は、その旨も書きます。依頼主は、作品の見た目と同じくらい、どれくらいの時間でどこまでできるのかを知りたがっています。

デザインの力も伸ばす

コーディングだけでなく、簡単なデザインもできると、受けられる案件の幅が広がります。デザインの仕事の報酬の目安はデザイナーの年収・単価相場で確かめられます。

案件を受けるときに確かめること

在宅のコーディング案件を受けるときは、作業を始める前に次のことを確かめておきます。

作るページの数と、スマートフォン対応の有無
デザインの見本の形式（画像か、デザインのファイルか）
表示を確かめるブラウザ
使う画像や文章の用意は誰がするか
納品の形（ファイルで渡すか、サーバーに上げるか）
修正を何回まで受けるか
納期と金額

特に、修正の回数と、デザインの見本にない部分（スマートフォン用の見本がない、ボタンを押したときの見た目がない、など）の扱いは、あとで食い違いが起きやすいところです。分からない部分は、作業を始める前に質問し、答えを文面で残しておきます。会社に勤めながら副業として受ける場合は、勤め先の就業規則で副業が認められているかも先に確かめます。

画像や文章の権利を確かめる

コーディングの案件では、依頼主から画像や文章を受け取ってページに組み込みます。受け取った素材を使ってよい範囲、たとえば有料の素材サイトの画像なら、その利用の条件に沿っているかは、依頼主の側で確かめるのが基本ですが、受ける側も気になる点があれば作業の前に尋ねます。自分で素材を探して使うよう頼まれた場合は、商用での利用が認められている素材を選び、出典や利用の条件を記録して依頼主に伝えます。

納品のあとの問い合わせに備える

納品したあとで、「スマートフォンのこの機種で表示が崩れる」といった問い合わせが来ることがあります。どこまでを無料の修正として受け、どこからを追加の作業とするかを、最初に決めておくと、あとで迷いません。納品の時点で、確かめたブラウザと画面の幅の一覧を依頼主に伝えておくと、問い合わせが来たときに、確かめた範囲の中の不具合なのか外なのかを判断しやすくなります。

独学からコーディングの仕事に届いた人に共通すること

在宅ワークとフリーランスの仲介に長く関わってきた運営者として見てきた限りでは、HTMLとCSSの独学から仕事に届いた人は、基本のタグを覚える段階で長くとどまらず、早い段階から模写と自分の作品づくりに移っています。そして、案件を受けてからも、デザインの見本と自分の画面を並べて、余白の1つまで見比べる丁寧さを持っています。

依頼する側と受ける側が直接つながり、仲介のマージンが乗らない手数料0%の取引なら、同じ予算で依頼主はより多くのページを頼め、受け手の手取りも厚くなります。正確なコーディングを積み重ねて信頼を得ることが、次の依頼につながる一番の近道です。Webの集客や広告の分野にも関心が広がった人は、AI・マーケティング・セキュリティのお仕事で、コーディングの力を生かせる周辺の仕事を見ておくとよいでしょう。