HTML/CSSを学ぶためにプログラミングスクールに通う人はたくさんいますが、もちろん独学でも学べます。しかし実際には正しい学習の流れがわからず、独学に失敗してしまうケースは多いものです。
これから独学を始めるなら正しい学習方法を押さえてから、学び始めることをおすすめします。本記事ではHTML/CSSの独学の正しい進め方についてロードマップ形式で解説していきます。独学の正しい流れを把握して、最短でスキルを身につけられるようにしましょう。
- HTMLとCSSを独学で身につけたい人
- 効率的な独学の流れを知りたい人
- 独学をサポートしてくれる書籍や学習サービスを知りたい人
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
HTMLとCSSは独学でも習得できる？
HTMLとCSSは独学でも習得できますが、挫折する人が非常に多いのが実情です。
挫折の主な要因としては、正しい方法を知らずに学習に取り組んでしまうケースが挙げられます。たとえばコードを丸暗記しようとしたり100％理解するまで次に進もうとしなかったりと、完璧主義が裏目に出て学習に失敗してしまうわけです。一方で、正しい独学の方法をつかんでから学べば、成功につながりやすくなります。
HTML・CSSの基礎知識
この章では学習方法を理解するために重要な「HTML/CSSの基礎知識」について解説します。
HTMLとはWebサイトの要素・構造を作るための言語
HTMLはWebサイトの要素や構造を作るためのマークアップ言語です。テキストや画像など、Webサイトの見た目を構成する要素はHTMLに記述することでブラウザへ表示されます。
HTMLの文法の特徴として、タグと呼ばれる「検索エンジンに要素や構造を伝える目印」を使って記述します。タグは100種類以上あるため、よく使うタグから少しずつ覚えていくことがおすすめです。
関連記事【初心者必見】よく使うHTMLタグ22選！正しく使いこなす必要性も解説
CSSとは
CSSは、HTMLで作成した要素の見た目を効率よく変化させるためのスタイルシート言語です。たとえばテキストの色や大きさを変更できます。
CSSの文法の特徴は「プロパティ」と呼ばれるコードを記述する点です。たとえばテキストの大きさを変えるには「font-size」を、色を変えるには「color」を使います。プロパティの種類はHTMLのタグ以上に膨大なため、全て覚えようとしてもキリがありません。よく使うものから覚えるように意識しましょう。
HTML/CSSの独学を効率よく進める方法3選
HTML/CSSの独学を効率よく進めるコツを3種類紹介します。
- アウトプットを意識する
- 暗記しようとしない
- 継続的に学習する
暗記しようとしない
HTMLとCSSの学習では暗記はあまり必要ありません。特にHTMLタグやCSSプロパティをかたっぱしから覚えようとする学習方法は非効率です。
「忘れてしまったら調べる」くらいの気楽な姿勢で学習を進めると、よく使うタグやプロパティから自然と身に付きます。暗記に注力すると先に進めなくなってしまうため避けましょう。
「忘れる→調べる→思い出す→忘れる→調べる→思い出す」を繰り返して自然と覚えてしまうくらいな感じがいいです！
引っ越したばかりの時の住所を書くときと同じような感じですね！
アウトプットを意識する
HTML/CSSの学習ではアウトプットに時間をかけましょう。アウトプットとは本や学習サイトで学んだ知識を使って、実際にWebサイトを作ってみることを指します。一方で、本やWebサービスで知識を取り入れる学習は、インプットと呼びます。
インプットとアウトプットの比率は3：7程度が理想的です。ところが独学に失敗する人はインプットの時間を取り過ぎていて、アウトプットにあまり取り組めていない傾向にあります。
独学において大切なのは知識を頭に詰め込むことではなく、Webサイトを作れる状態を最短で目指すことです。よってインプットよりもアウトプットを重視して学ぶことが推奨されます。
この見た目を実装（アウトプット）するために、必要な知識を調べる（インプット）ような感じがいいと思います！
継続的に学習する
学習する日としない日を作らず、継続的に学ぶ意識が重要です。学習しない日が何日も続くと、せっかく身に付いていたことも忘れてしまう可能性があります。これにより学習意欲が下がり、挫折につながりやすくなってしまうのです。
プログラミング学習を継続するためには、目標設定をうまく活用すると効果的です。多くの場合、HTML/CSSの独学のゴールは「Webサイトを作れるようになること」でしょう。しかし、大きな目標だけでは独学を成功させるためには不十分で、現在地点から距離が離れすぎているため、たどり着くまでに挫折してしまいます。
独学のコツは「今週でHTMLの書き方を覚えて、来週はCSSの書き方を覚える」といった具合に、小さな目標を立てることです。達成しやすい地点に目標を置くことでこまめに成長を実感できるため、継続的に学習に向かうモチベーションが維持されます。
僕も独学経験があるのですが、毎日5分だけでもいいからPCに触れるというのをやっていました！とりあえず勉強机に座る！とかでもいいかもですね！
あなただけの成功ロードマップを専属メンターと作ろう！
もうプログラミング学習であなたを迷わせません！
HTMLとCSSの独学で身につけるべき5つの技術
HTML/CSSの独学を進めるうえで、優先的に習得を目指したい技術は以下の5種類です。
Webサイトを作成するために必要な技術としては、主に以下の5つがあります。
- 要素の表示形式
- レイアウトモード
- レスポンシブ対応
- 検証ツール
- CSS設計
それぞれ解説していきます。
要素について学習する
Webサイトを構成する要素には、テキスト・ボタン・画像など様々な種類があります。それぞれの要素は以下の3つの表示形式のうち、いずれかに該当します。
- ブロックレベル要素
- インライン要素
- インラインブロック要素
表示形式の違いによって以下の図のように性質が全く異なるため、違いを押さえておく必要があります。
それぞれの表示形式の性質を知っておくことで、Webサイトを柔軟に作れるようになります。
関連記事
【CSS】inline・block・inline-blockの違いとは？使い分けを解説
またCSSを使って要素を表示させる「擬似要素」も押さえておくと、表現の幅が広がるため便利です
関連記事
【CSS】擬似要素を作成するbefore/afterの使い方を解説
本格的にWebサイトを作っていくためにはこちらは必須の知識ですね！徐々に理解を深めておきましょう〜！
レイアウトについて学習する
レイアウトモードとは要素を横並びにしたり、格子状に並べたりする手法です。レイアウトモードは使う頻度の高い技術のため、習得しておく必要があります。以下の2つの技術を優先的に学びましょう。
- Flexbox
- Grid
これらはWebサイトを作成するために、欠かせない技術です。
関連記事
【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説
CSS Gridの使い方を丁寧に解説！爆速でレイアウトを完結させよう！
独学は無理じゃない…けど、やっぱり大変
無料でエンジニアに質問できるサービス。利用するしかないでしょ
独学より “劇的に”、効率的な学習ができる！
レスポンシブ対応
表示するデバイスによってレイアウトを変える技術を「レスポンシブ対応」と呼びます。ユーザーがWebサイトを閲覧するときの主なデバイスは以下の3種類です。
- PC
- タブレット
- スマートフォン
現代では特にスマートフォンでWebサイトが閲覧される傾向にあります。そのため、スマートフォンの画面に合わせて、適切にページを表示させる技術は必須です。レスポンシブ対応をするためには「メディアクエリ」の書き方を覚える必要があります。
関連記事メディアクエリの使い方を解説-SEO対策されたレスポンシブサイトを作ろう
まずはスマホかPCかどちらかの画面で正確にコーディングできるようにするのを目指すといいと思いますが、ゆくゆくは必ず必要な能力になってきます！
検証ツール（デベロッパーツール）
検証ツール（デベロッパーツール）とは、ブラウザに表示されているWebページのHTML/CSSを確認できるツールです。検証ツールを活用できるとコーディングを効率的に進められます。
たとえばWebサイトがうまく表示されていないときに、検証ツールを使って原因を探ると問題が突き止めやすくなります。また、参考にしているサイトがどのようなコードで書かれているか確認する場合にも、検証ツールは役立ちます。
検証ツールを学ぶのにおすすめなタイミングは、模写というトレーニングに取り組む際です。模写は見本のサイトをコードを見ずに複製する訓練法です。思うようにブラウザでWebサイトが表示されない場合には、検証ツールを見てコードに問題がないか確認しなければなりません。
学習に不可欠になる段階で、検証ツールの使い方を学ぶことがもっとも身につきやすいため、ぜひお試しください。
関連記事HTML/CSSコーディング練習サイト8選！初心者から中級者までレベル別に紹介
それくらい重宝している機能なので、ぜひマスターしちゃいましょう！！
CSS設計について学習する
CSS設計は現場で働くうえで、ぜひとも学習しておきたい技術です。
要素にCSSのスタイルを反映させるためには、HTMLのタグごとにクラス名を付ける必要があります。CSS設計とはクラス名にルール（命名規則）を設けて、管理するテクニックです。ルールに則ってコーディングをすることで、読みやすく保守しやすいコードを書けます。
初心者のうちは自分で分かるようなクラス名を付ければ問題はありません。しかし、制作現場では業務の効率化のため、CSS設計に則ってコードを書かなければならないケースがあります。そのため独学の段階からCSS設計を学んでおくことが、後に役立つのです。
CSS設計にはいくつかの流派があります。
- BEM
- OOCSS
- SMACSS
- FLOCSS
このうち初めに学ぶなら、比較的ルールがシンプルでわかりやすい「BEM」がおすすめです。しかし、いずれの流派を選ぶにしろ、CSS設計はかなり理解が難しい概念ですので、ある程度Webサイトを作れるようになってきた段階で取り組みましょう。
おすすめの書籍「CSS設計完全ガイド ~詳細解説+実践的モジュール集」
CSS設計は非常に難しい概念のため、はじめは理解に苦しむかもしれません。その点、この書籍では豊富な具体例を基にして、CSS設計が丁寧に解説されています。具体例に沿ってコードを書いてみることで、CSS設計のルールを少しずつ身に付けられます。
独学でWebサイトを作れるようになるまでのロードマップ
HTMLとCSSを独学するときの流れは、以下のとおりです。
- テキストエディタを用意する
- HTMLとCSSの基本的な書き方を学ぶ
- 写経を行う
- 模写を行う
- ポートフォリオサイトを作る
STEP1．テキストエディタを用意する
HTML/CSSの学習を始める際の準備としてテキストエディタをパソコンにインストールする必要があります。テキストエディタとはコードを編集するためのツールです。
テキストエディタはいくつか種類がありますが、本記事では初心者が扱いやすい「Visual Studio Code（VScode）」の導入をおすすめします。
よほどなことがない限りはこちらを導入しちゃいましょう！
STEP2．HTMLとCSSの基本的な書き方を学ぶ
テキストエディタがインストールできたら書籍や学習サイトを活用して、HTML/CSSの基本的な書き方を学んでいきましょう。
読書に慣れ親しんでいるなら本を活用すれば良いですし、手を動かしながら学習したい人は学習サイトを活用するのがおすすめです。また書籍と学習サイトを併用する方法も効果的です。このとき以下の技術について重点的に学ぶことを推奨します。
- 要素の表示形式（ブロック・インライン・インラインブロック要素）
- 擬似要素
- レイアウトモード（flexbox Grid）
- レスポンシブ対応
またこの段階で利用できる書籍とサービスを紹介します。
おすすめの書籍1「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」
HTML/CSSに関するトピックが網羅的にまとめられた書籍で、初めて手に取る一冊に適しています。冒頭、サイト制作の手順やWebデザインに関する話題に触れられているのも特徴です。コーディングの基礎を習得したあとで、Web制作の全体像をつかむ教材としても活用できます。
おすすめの書籍2「これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本」
かわいいイラストが満載で、楽しくHTML/CSSを学べる書籍です。Amazonでは説明が分かりやすいと評判で、Flexboxやレスポンシブなど初心者がつまづきやすい技術もスムーズに身に付けられるようです。技術面の解説のみならず学習のコツも解説しているので、効率よくスキルを磨くための助けになる一冊です。
おすすめの学習サイト「Progate」
ブラウザとアプリで、気軽にコーディングに触れられます。カリキュラムを進めるとアカウントがレベルアップするため、ロールプレイングゲームのように、楽しく学べるサービスです。
注意点として無料版では学習できる教材が限られており、応用編まで学ぶには有料版（※1）に登録する必要があります。
※1：有料版の料金｜税込990円/月〜 （2024年9月1日現在）
STEP3．写経を行う
HTMLとCSSの基本的な書き方がつかめてきたら写経に挑戦しましょう。写経とは見本のコードにならって、同じようにコードを書く練習方法です。写経にはWebサイトのコードを書く感覚を、構造的に理解できるメリットがあります。正しい文法を身に付けられる点も強みです。
しかし、誤った文法で書かれたコードの写経を行うと当然、誤った文法が身についてしまうため、教材選びは慎重に行わねばなりません。以下に写経の教材としておすすめのサービスを2種類紹介します。
おすすめの学習サイト1「ドットインストール」
動画でHTML/CSSを学べる学習サービスです。プロのコードを見本にして写経に取り組めます。注意点はProgateと同様に、無料で学べる教材の種類には限りがあることです。一方、有料版（※2）を利用すれば全ての教材を視聴でき、加えて月に5回まで講師へと質問もできます。
※2 ：有料版（プレミアムプラン）の料金｜税込1,280円/月〜（2024年9月1日現在）
おすすめの学習サイト2「ZeroPlus Gate」
30日間、HTML/CSSを集中的に学べるサービスです。豊富な動画教材で写経に取り組めます。全教材が完全無料で視聴できるため、費用をかけたくない人にもおすすめできる学習サービスです。
また個々の利用者に専属のメンターが付き、学習方法について相談できる点も、独学を行う人にとっての強みといえます。
本を読んでも、無料の教材をやってもわからないことというのは必ず出てくるかなと思います。
その中で、「質問できる」という点はかなりアツいです！！僕も質問の回答をさせていただくこともあるので、このアイコンをチェックしておいてください！笑
STEP4．模写を行う
写経に慣れてきたら模写に取り組みましょう。模写とはコードを見ずに、見本のWebサイトを複製するトレーニング方法で、主に2種類の方法があります。
模写の方法1．ブラウザに見本サイトを写して模写
初めて模写に挑戦する場合におすすめの方法です。模写をうまく進められない場合に、検証ツールを使って見本サイトのコードを確認できます。「見本コードをカンニングしてもよいの？」と、思うかもしれませんが、もちろん検証ツールを使ってコードを見たとしても一向に構いません。
初めからコードを見ないルールを設けると模写がなかなか進まず、ついには挫折してしまう可能性があります。むしろ見本のコードを見ながらでも模写を進めていくことで、HTML/CSSの理解が深まるとともに検証ツールの使い方も身に付くため、一石二鳥です。
模写の方法2．デザインデータから模写
Web制作を仕事にしたいと考えるなら、デザインデータから模写する技術を身につける必要があります。デザインデータとは「デザインツールを使って作成されたWebサイトの見本データ」のことです。
現場ではデザインデータを確認しながら、コーディング担当がWebサイトを作成する流れが取られています。そのためデザインツールから的確に情報を読み取りコーディングする技術が必要になるわけです。デザインデータからの模写は、HTML/CSSを学習するうえの仕上げの訓練と捉えることができます。
模写に取り組む際には、見本にするサイト選びが重要です。質の悪い見本を選ぶと誤ったスキルが身についてしまいます。以下の記事では模写を行う際におすすめのサイトを紹介しているため、ぜひ参考にしてみてください。
HTML/CSSコーディング練習サイト8選！初心者から中級者までレベル別に紹介
いずれの練習サイトもプロのエンジニアが監修しているため、安心して模写に取り組めます。
5．作成したサイトをポートフォリオにまとめる
ポートフォリオサイトとは「自身の経歴や制作実績を掲載するためのオリジナルWebサイト」を指します。
ポートフォリオサイトに掲載するような制作実績がない場合があるかもしれませんが、模写したサイトを実績として掲載できる場合もあります。掲載して良いかどうかは、必ず学習サービスの運営者に確認してください。
またポートフォリオサイト自体も自分の作品になるため、質の高いものを作りましょう。見た目の部分を作り込むのはもちろんのこと、内部のコードが正しく書かれているかも評価の対象になる場合があります。
こうした観点からCSS設計に則って作られたポートフォリオサイトが有利です。そのためポートフォリオの作成前にはCSS設計を学ぶことが推奨されます。
ある程度のサイトが作れるようになったらポートフォリオの作成を行いましょう！
独学のロードマップまとめ
独学のロードマップを以下にまとめておりますので、ご確認ください。
独学の手順 | 身につけるべき技術 | |
STEP1 | テキストエディタを用意する |
|
STEP2 | HTMLとCSSの基本的な書き方を学ぶ |
|
STEP3 | 写経を行う |
|
STEP4 | 模写を行う |
|
STEP5 | ポートフォリオサイトを作成する |
|
HTMLとCSSを学習した後に身につけるべきスキル
HTMLとCSSをある程度学んだ後は、Webサイトの制作に必要なスキルを身につけましょう。特に重要なスキルは以下の3つです。
- JavaScript
- WordPress
- Webデザイン
JavaScript
JavaScriptは、Webサイトに動きをつけるプログラミング言語です。HTMLとCSSだけでは見た目と構造しか作成できませんが、JavaScriptを加えることによってユーザーの見やすさや体験を向上する機能を追加できます。
JavaScriptを学習するときは、以下のような機能を実装できるようになることを目標にするとよいでしょう。
- スライドショー
- カルーセルパネル
- アコーディオンメニュー
上記の実装は、Webサイトの作成でよく使用される機能です。Webサイトでよく見る機能を自分でも実装できるようになれれば、成長を実感しながら楽しく学習を進められるでしょう。
よく見るような機能かなと思います！
WordPress
WordPressは、サイトの公開作業や運用を簡単にするためのシステムです。このようなシステムのことを「CMS」といい、WordPressは世界の6割が使用しています。WordPressでサイトの運用をしたいと考えている人も多いため、Webサイト制作を仕事にしたい人にはWordPressの知識が必須です。
WordPressの学習では、以下のことができるようになるのを目指すとよいでしょう。
- WordPress化
- カスタム投稿
- カスタムフィールド
- カスタムタクソノミー
上記の実装ができれば、活躍できる案件の幅も広がります。
Webサイト制作を学びたいなら、WordPressの学習も大切です。
Webデザイン
Webサイトの作成には、デザインの知識も欠かせません。特にHTMLとCSSのコーディングはデザインデータをもとに行うので、Webデザインの知識も身につけておくとよいでしょう。特にWebデザイナーを目指す人には、デザインツールの操作スキルも必要です。
コーディング作業は、デザインカンプから行うことがほとんどです。そのためデザインツールの操作もある程度できるようになっておくと、仕事をするときにスムーズに進められるでしょう。
Webサイト制作の学習の進め方について、もう少し詳しく知りたい方はこちらの記事も併せてお読みください。初心者を脱却してWebサイト制作を仕事にするまでの道のりを解説しています。
初学者が最速でWeb制作者になるために必要なスキルと学習ロードマップ
まとめ：HTMLとCSSは独学でも身につけられる！
HTMLとCSSは独学でも十分に身につけられます。効率よく学習を進めるためには、目的を決めて学習計画を立てることが大切です。
HTMLとCSSを独学するなら、以下の手順で学びましょう。
独学の手順 | 身につけるべき技術 | |
STEP1 | テキストエディタを用意する | ・VS Codeのインストール方法 ・VS Codeの使用方法 |
STEP2 | HTMLとCSSの基本的な書き方を学ぶ | ・HTMLとCSSの基本文法 ・要素の表示形式 ・擬似要素 ・レスポンシブ対応 ・レイアウトモード |
STEP3 | 写経を行う | ・Webサイトのコーディングに対する構造的な理解 |
STEP4 | 模写を行う | ・自分で考えてコーディングする技術 ・検証モードの使用方法 ・デザインツールを使用して情報を読み取る技術 |
STEP5 | ポートフォリオサイトを作成する | ・CSS設計 ・自由な発想でWebサイトを制作する技術 |
上記の手順で学ぶと効率的にWebサイトを作れるようになります。またHTMLとCSSの学習がある程度進んできたら、JavaScriptやWordPress、Webデザインなどの学習も行っていきましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
