【初心者向け勉強方法】HTMLとCSSの学習ロードマップ

こんにちは！スタビジ編集部です！

最近は個人でWebサイトを運営したり、Webページに力を入れている企業が多いです。

そんなWebサイトの作成に必要なスキルが「HTML」と「CSS」です。

ただ、初めてHTMLやCSSを勉強する人の中には

という人も多いです。

HTMLとCSSが学べるサイトや本はいくつかあるため、どうすればいいのかわからなくなりますよね。

そこで今回はそんなHTML・CSSの初心者に向けて、以下の内容を解説します。

HTMLとCSSの役割とは？

HTMLとCSSの勉強の話をする前に簡単にHTMLとCSSの役割や特徴について押さえておきましょう。

HTMLとCSSは、Webページ全体のデザインを構成する役割があります。

実際はHTMLだけでWebページの構成を作成することは可能です。

ただし、CSSでデザインを組み込まないと、文字と背景の色味やデザイン性のない文字、変化のない配置で表示され、綺麗なWebページになりません。

HTMLの特徴

「HTML（Hyper Text Markup Language）」は、Webページのレイアウトを調整する際に使われるマークアップ言語です。

HTMLではタグを使って、Webページで何を表示させるかを命令します。

タグは「<要素名>」であらわされていて、タグで文字を囲むことで、HTMLの要素を表示できます。

<h1>見出し</h1>
<p>本文</p>

htmlファイルを作成し、上記のように記述して、ブラウザで表示してみましょう。

2種類の文字が表示されているのが確認できると思います。

タグにはリンクを付けたり、画像を表示したり様々な種類があります。

<html>
    <head>
    <title>HTMLテスト</title>
    HTMLテスト
    </head>
    <body bgcolor="#F2F2F2">
    <center>
    <h1>HTML基本</h1></center>
    <hr>
    <h3>基本的なタグだけでもHPを作ることができます</h3>
    ぜひ<B>HTMLの基礎</B>を習得しましょう！
    <p></p>
    <center>
    <font size="20"><a href="https://toukei-lab.com/">スタビジ</a></font>
    <p><img src="cat1.jpg" width="120" height="180"></p>
    </center>
</body>
    </html>

タグを組み合わせることでレイアウトを自由に調整できるので、いろいろ試してみましょう。

このようにHTMLは、Webページに指定した範囲に文章・画像が表示できるため、Webでのさまざまな場面で利用されています。

例えば、Webサイト・Eメール・アプリなどで、ソースコードを見ると文字や画像を構成する部分でHTMLが使われているのを見ることが可能です。

ソースコードが気になる方は、以下の方法でWebページのコードを見てみましょう。

画像は「Google Chrome」の例になります。

CSSの特徴

「CSS（Cascading Style Sheets）」は、Webページのスタイルを指定する言語です。

CSSには下記の特徴があり、主にサイトの文字や枠線などのデザインを管理できます。

CSSではデザインをまとめて変更できます。

下記の例では<p>タグで囲まれた文字を「フォント：20ピクセル、色：赤」と指定しています。

<html>
    <head>
    <title>HTMLテスト</title>
    <style type="text/css">
        p {font-size: 20px; color: red;}
    </style>
    <p>HTMLテスト</p>
    </head>
    <body>
    <center>
    <h1>HTML基本</h1>
    </center>
    <hr>
    <h3>基本的なタグだけでもHPを作ることができます</h3>
    <p>ぜひ<B>HTMLの基礎</B>を習得しましょう！</p>
    </body>
</html>

文字が変わっているのがわかりますね。

<link href="style.css" rel="stylesheet" type="text/css">

上記のようにCSS定義を別ファイルに書き込んでHTMLファイルで呼び出す方法もあります。

このようにCSSでデザインを統一することで、HTML内でタグごとに設定を書き込む必要がなくなるので記述量が少なくなり、Webサイトが軽量化できます。

また、CSSは、文字の色や大きさ以外にも行間・行揃え・背景設定・ボーダー・余白・アニメーションの挿入など様々な装飾ができます。

初心者におすすめの本・サイトで独学する4ステップ

HTMLとCSSの特徴について見ていきました。

ただ、初学者にとって下のような疑問がある方もいるではないでしょうか。

そこでHTMLとCSSの学習方法として、下記をおすすめします。

1.学習サイトや学習スクールを利用して基礎知識を学ぶ

まずは、実践・動画形式の学習サイトを併用して、基礎知識を脳に定着させながら学ぶことが大切です。

おすすめの実践・動画形式の学習サイトは、それぞれ以下になります。

「Udemy」で有名講師から学ぶ

Udemyは世界最大のオンライン学習プラットフォーム

それぞれの講座がしっかりレビューと共に評価されているので評判の良い講座と悪い講座は一目瞭然！

自分にピッタリの講座を見つけることが可能です。

また、日本事業ではベネッセがパートナーとなり展開してくれているのも非常に信頼性があって良いですね！

名実ともに信頼できる素晴らしいオンライン学習プラットフォームです。

Udemyは全てのコースが動画で完結します。

コースは買い切り制なので自分のペースで動画を進めていくことが可能なんです。

Udemyについては以下の記事でもっと詳しくまとめています！

【体験談】評判の良いUdemyを30コース以上受けている僕が徹底レビュー！当サイト【スタビジ】の本記事では、世界最大のオンライン学習プラットフォームであるUdemyのメリット・デメリット・評判・口コミについてまとめていきます！実際にプログラミングやデータサイエンス、Webマーケ関連のコースを30個以上受講している体験談をもとにお伝えしていきます。

例えば以下のUdemy講座が分かりやすくて非常にオススメです！

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

講師はWebエンジニア・UXデザイナーでありながら経営者であり、様々な書籍執筆や講演をこなす谷口さん。

実際に講演を聞いたこともあるのですが、非常に分かりやすくUXに対して熱い想いを持っているお方でした。

HTML/CSS/Javascriptは結果が分かりやすく返ってくるので、はじめに学ぶプログラミング言語として非常に最適なんです！

以下の記事でUdemyのプログラミングコースの中でオススメを紹介していますので是非チェックしてみてください！

Udemyのおすすめプログラミングコース8選！当サイト【スタビジ】の本記事では、世界最大の教育プラットフォーム「Udemy」のコースを大量に受講している僕が言語別のプログラミングオススメコースを紹介していきます！Udemyはプログラミングを学ぶのにうってつけのサービスです。たくさんのコースの中から厳選して紹介していきますよ！

「テックアカデミー」で挫折せず本気で学ぶ

公式サイト：https://techacademy.jp/

テックアカデミー は日本最大級のオンラインスクールです。

テックアカデミーのメンターさんは現役エンジニアの方なので非常に安心感があります。

完全オンラインなので不安な方も多いかもしれませんが、週2回のメンタリングの時間とSlackによる質問対応で疑問点などはすぐに解決することができます。

実務レベルの小話やノウハウも聞けるので非常に実践的な力が付きます！

週2回30分ほどメンタリングがあるのですが、そこで進捗チェックが行われます。

次回のメンタリングまでに終わらせるところを一緒に決めるので、学習を進めるモチベーションが上がります。

テックアカデミーは実際に知名度も高く評判も上々なので、非常にオススメできるオンラインスクールです。

不安な方は、無料体験をしてみることをオススメします！

私自身受講経験があり、以下の記事で体験談をより詳しくまとめていますので是非チェックしてみてください！

【体験談】テックアカデミー評判は？3か月本気受講してみたので徹底レビュー！当ブログ【スタビジ】では、様々なプログラミングスクールの中からテックアカデミーのメリット・デメリット・評判について3か月の体験談をもとに赤裸々にレビューしていきます。

プログラミングスクールはたくさん種類があります。ご自身にあったものを選びましょう！以下の記事で比較しています。

【言語・目的別】おすすめのプログラミングスクールを徹底比較！ここでは、プログラミングスクールについて徹底的にまとめています！色々あってどれがよいのかなかなか分かりづらいプログラミングスクール。言語別や様々な観点でおすすめのプログラミングスクールを比較していきますよー！

「Progate」でコーディングする

「Progate」は、わかりやすいイラストでの解説とブラウザのみでコードが入力できる実践形式の学習サイトです。

イラストで基礎知識を見て学んだあとに、実際にプログラムを書くため、バランスよくインプットとアウトプットできます。

簡単なものから難しいものまでレベルが分かれていて、自分の好きなものからマイペースで進めることができます。

「ドットインストール」で復習する

「ドットインストール」では、動画形式で講義を受けられます。

各コンテンツは3分以内で作られているため、Progateで学習した後の復習に利用したり、
通学や通勤のスキマ時間に勉強したりできます。

有料会員になるとさらに難しい内容の講義を受けられたり、ソースコードの閲覧などができるようになるので、学習を深めたい方は試しても良いです

ドットインストールの体験談については以下でまとめています！

【体験談】ドットインストールの評判は？道半ばで挫折した話当サイト【スタビジ】の本記事ではドットインストールの評判について主観的な観点と共にまとめていきます。ドットインストールはプログラミング学習サービスとして評判の良いサービス。ただ過去にドットインストールを受講してみて特に何も得られず終わってしまった過去があるので、その体験談について赤裸々に語っていきたいと思います。

2.参考書で応用を学ぶ

学習サイトで基礎知識を学んだ後は、参考書を使って応用の内容を学んでいきましょう。

学習におすすめな参考書もいくつか紹介します。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

こちらの参考書では、HTMLとCSSの基本が学べます。

学習サイトでは、詳しく学べなかったレスポンシブやFlexbox、CSSグリッドなどの最新の技術も学習できます。

HTML＆CSSとWebデザインが 1冊できちんと身につく本

こちらの参考書では、HTMLとCSSの他にWebデザインの基礎についても学べます。

レスポンシブデザインによるスマホ・PC・タブレットなどのマルチデバイス対応も理解することができます。

3.サイト模写でサイトデザインのスキルをつける

学習サイト・参考書での一通りHTML・CSSの知識を身に着けたら、次は「サイト模写」でサイトデザインのスキルをつけましょう。

サイト模写の手順は以下の通りです。

それぞれ手順の中身を見ていきましょう。

1.ルールを決める

サイト模写では、まず「ルールを決めること」が大切です。

上記の基本的なルールを守るだけでスキルアップしやすくなります。

まずは見た目をある程度合わせるようにするだけでもスキルは確実に上げられます。

2.模写するサイトを確認する

模写するサイトは、どのようなデザインをしているか確認しましょう。

以下のポイントで確認すると良いです。

デザインの部分でレイアウト・ページ構成を確認してHTMLの構造を把握します。

動きの部分ではポップアップが出てくる等、サイト内の挙動を確認していきます。

またレスポンシブ対応のサイトは、スマホ・PC・タブレットのどの機種にも対応できるような設計されているため、難易度が上がります。

ある程度模写に慣れてきたら、レスポンシブ対応のサイトにも挑戦し、どのデバイスからも同じデザインができるスキルを身に着けると良いです。

3.HTMLとCSSでコーディングする

実際にHTMLとCSSでソースコードを見ずにコーディングしていきます。

これまでのステップで学んだ知識を活かして、自力でコーディングしていきましょう。

わからない箇所があっても、とりあえず一通り完成させることを目指すことが大事になります。

4.デザインの動きとソースコードを確認する

最後にデザインの動きとソースコードを確認して、自分の書いたコードとの答え合わせをしましょう。

上記の2つを実践することが大切です。

まずデザインのレイアウトが同じか、スクロールやクリックしたときに同じ動きをしているかを確認しましょう。

違っている場合はソースコードを比較して確認します。

初めて見る記述方法があれば、都度調べて自分の知識とすることが大切です。

おすすめ模写サイト①「クナイプ」

HTML・CSSの基礎知識があれば、こなせるレベルの「クナイプ」は模写するサイトとしておすすめです。

オレンジの背景イラスト以外は、シンプルでコーディングしやすいため、ある程度応用レベルの知識がある方は、スムーズにできます。

おすすめ模写サイト2「iSARA」

「iSARA」は、多くのサイト制作者の間で人気が高い模写サイトです。

これまでのHTML・CSS学習の知識と「ググる」力、応用力があればこなせるレベルのサイトです！

ただ、ボリュームが多く、完成までに時間はかかるので根気よく作成していきましょう。

また、擬似クラスや擬似要素などわかりづらい部分も出てくるため、完成した頃にはコードの知識やデザインスキルが上達できる模写サイトです。

Webデザインの勉強法については以下の記事で詳しく解説していますのでこちらもあわせて参考にしてみてください。

webデザインの独学勉強法とは？必要スキル・サイト・本も紹介！当サイト【スタビジ】の本記事では、webデザインの独学勉強法についてまとめています！必要なスキルや勉強におすすめのサイト・本まで詳しく解説しているので、この記事を読んで、webデザインの一歩を踏み出していきましょう！

4.1からコーディングしてポートフォリオを制作する

最後に1からコーディングしてポートフォリオを制作しましょう。

自分で作ることで、サイト制作の実績としてアピールしたり、サイト制作の案件を獲得することにつながります。

ポートフォリオ制作は以下の手順で進めていきます。

まずは、作成したい「サイトの種類」を決めましょう。

デザイン性の高いサイトやおしゃれで見やすいサイトなど自分の好きなものを選んでください。

次にサイトのデザインをツールで作成します。

パワーポイントやPhotoshop、無料で使えるイラスト作成ツールなどを利用してサイトのデザインを作成しましょう。

デザインを作成したら実際にコーディングします。

今まで学習した本やサイトを参考に、今までやったこと知識を存分に活かしていきましょう。

HTML・CSSの勉強で大切なポイント5つ

HTML・CSSの勉強方法について見ていきました。

ただ、HTML・CSSの勉強は、がむしゃらに勉強をしたからといって身につくというわけではありません。

そこでHTML・CSSの勉強で大切なポイントを紹介していきます。

目標を決める

勉強を始める前には、必ず「目標」を決めましょう。

目標を決めない場合、今自分がどのレベルにいるのかが見えず、モチベーションも保ちにくいです。

例えば、以下のように具体的な期限を目標にすると日々の作業計画が立てやすくなります

また、SNSなどで自身の目標と日々の勉強を投稿するとプレッシャーが生まれてモチベーションを継続できます。

同じように勉強を頑張っている人たちとも繋がれるので、恥ずかしがらず積極的に発信していきましょう。

暗記して完璧に覚えようとしない

初学者に陥りがちなところとして、出てきたコードをすべて覚えようとするところがあります。

HTML・CSSは、すべてを暗記して完璧に覚えようとする必要はありません。

暗記しようとすると時間がかかってしまい、コーディングする時間が少なくなり、どうしても成長スピードが落ちてしまいます。

重要な構文は何回も出てくるため、量をこなして段々と覚えられるので、最初からすべてを覚えようとしないようにしましょう。

手を動かして慣れる

HTML・CSSの勉強は、実際に手を動かして慣れることが大切です。

見て覚えて終わりにするだけでなく、実際にコードを入力して動かすことで理解が深まります。

繰り返し手を動かしてコードを入力していると、わからない部分も慣れてきて、暗記よりも早く自然に脳に定着させられます。

以下の記事でプログラミングでつまずいた時の対処法を解説しているので、コードを書くことに慣れていない方は、チェックしてみてください。

【初心者向け】プログラミングが全く分からない・・・そんな時の解決方法当サイト【スタビジ】の本記事では、プログラミングが全く分からない時にどのように解決していけばよいのかお伝えしていきます。今までの経験を基に徹底的にお話ししていきますよー！ぜひ参考にしてみてくださいね！

参考書をみながら完成させる

知識やスキルが定着していない最初の内は、参考書をみながら完成させましょう。

なるべく自力でやりたいと思いますが、まずは形を完成させることが大事になります。

最初のうちは基本的な内容なので、手が止まってしまっても、参考書内で疑問点をわかりやすく解説してくれています。

勉強時間は1日3時間を目指す

HTML・CSSの勉強時間は、目標によって変わりますが、2週間〜1カ月ほどの学習が必要となるのが一般的とされています。

1日の目安としては最低でも3時間の勉強時間は確保するように心がけましょう。

平日は仕事などで勉強時間を作れない場合、他の日と調整しても良いですが、コードを見る等、1日1回はHTML・CSSに触れることが大切です

また、独学の場合、エラーやわからない部分を調べるのに多くの時間がかかってしまうこともあります。

そのため、早くスキルを上げたい方はプログラミングスクールに通うことをおすすめします。

以下の記事で主要なプログラミングスクールを比較しているので、興味がある方はチェックしてみてください。

【言語・目的別】おすすめのプログラミングスクールを徹底比較！ここでは、プログラミングスクールについて徹底的にまとめています！色々あってどれがよいのかなかなか分かりづらいプログラミングスクール。言語別や様々な観点でおすすめのプログラミングスクールを比較していきますよー！

HTML・CSS以外で勉強しておきたいスキル

HTML・CSS以外の他のスキルも学習することで、WebデザイナーやWebエンジニアなど、さらに広い分野で活躍することができるようになります。

HTML・CSSの学習者におすすめの勉強分野について紹介します。

PHP

「PHP」は、サーバーサイドで動的なWebサイトを作るための言語です。

サイト内のデータや掲示板の書き込み、検索ページなどユーザーがデータを入力・検索する際に使われます。

PHPを学習することで、サーバーサイドも扱えるため、HTML・CSSのスキルと組み泡褪せて、Webエンジニアとして活躍することができるようになります。

PHPの勉強法について以下の記事で詳しくまとめているので、チェックしてみてください。

【初心者向け】PHPのおすすめ独学学習手順8ステップを紹介！当サイト【スタビジ】の本記事では、初めてPHPを学ぼうとしている方に向けて、おすすめの学習手順と勉強にぴったりな本や学習サイトを紹介しています！この記事を読んでPHPの勉強を始めていきましょう！

JavaScript

「JavaScript」は、Web上での動きを表現するために使われるプログラミング言語です。

例えば、ページをスクロールした際に出てくるアニメーションやスライドショー、フォーム入力時の注意事項などサイトが動いているかのような表現ができます。

HTML・CSSと一緒にJavaScriptを利用することで、さらにデザイン性の高いWebサイトを作成することができるようになります。

以下の記事にJavaScriptの勉強法についてまとめているので、是非チェックしてみてください。

【JavaScript学習ロードマップ】独学おすすめ勉強法とおすすめサイトを紹介！当サイト【スタビジ】の本記事では、Javascriptsの独学勉強法を紹介していきます！Webサイト制作には欠かせないスキルなので、学習ロードマップに沿ってJavascriptをマスターしていきましょう！

Photoshop・Illustrator

「Photoshop」は画像編集アプリケーション、「Illustrator」はベクターイメージの編集アプリケーションです。

PhotoshopとIllustratorを利用することで以下のようなことが出来るようになります。

Webデザイナーを目指す方はぜひ学んでみてください。

HTML・CSS勉強　まとめ

HTML・CSSの勉強法と勉強におすすめなサイト・本を紹介しました。

HTMLとCSSの勉強では、わからないことが多く出てきますが、勉強する上での大切なポイントを意識して、コツコツと学習していきましょう。

以下にその他学習向けのコンテンツを紹介します。興味があるのがあればぜひチェックしてみてください。

・その他の言語(Python)の勉強法について

【Python独学勉強法】Python入門を３ヶ月で習得できる学習ロードマップ当サイト【スタビジ】の本記事では、過去僕自身がPythonを独学を駆使しながら習得した経験をもとにPythonを効率よく勉強する方法を具体的なコード付き実装例と合わせてまとめていきます。Pythonはできることが幅広いので自分のやりたいことを明確にして勉強法を選ぶことが大事です。

・システムエンジニアになるための勉強法について

【入門者向け】SE（システムエンジニア）になるための勉強方法！7つのステップ！当サイト【スタビジ】の本記事では、SE(システムエンジニア)になるために求められるスキルとそれを身に付けるための勉強法について徹底的にまとめていきます！入門者でも、SEになるために独学で出来ること、何から学べばいいのかを見ていきましょう！