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

> 当サイト【スタビジ】の本記事では、初学者に向けたHTMLとCSSの勉強法と勉強の際のポイントについてまとめています！Webサイトを作成に必要となる「HTML・CSS」を学習ロードマップに沿って勉強していきましょう！

- URL: https://toukei-lab.com/html_css_study
- 公開: 2022.11.29 / 更新: 2025.04.16
- サイト: スタビジ（https://toukei-lab.com）

:::talk{who="umatan"}
当サイト【スタビジ】の本記事では、初学者に向けたHTMLとCSSの勉強法と勉強の際のポイントについてまとめています！Webサイトを作成に必要となる「HTML・CSS」を学習ロードマップに沿って勉強していきましょう！
:::

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

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

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

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

:::talk{who="man" side="left"}
サイトを作れるようになるまでに何を勉強すればいい？
:::

:::talk{who="woman"}
独学で学習を継続できるおすすめの本やサイトが知りたい
:::

という人も多いです。

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

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

:::box
**・HTMLとCSSの役割\
・初心者におすすめの本・サイトで独学する4ステップ\
・HTML・CSSの勉強で大切なポイント**
:::

:::talk{who="umatan"}
学習フェーズにあわせてサイト・本を紹介するよ！

自分の学習レベルの勉強法を学んで効率よくHTML・CSSをマスターしていこう！
:::

## HTMLとCSSの役割とは？

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

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

:::box
- **HTML**：見出し・本文・文字・ボタン・段落・表・画像の要素を表示させる
- **CSS**：HTMLの要素に色・大きさ・配置などのデザインの設定を加える
:::

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

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

:::talk{who="umatan"}
HTMLで構成を表示、そこにCSSでデザインの設定を加える、両方の役割を活かすことで、見やすいWebページを作成できるよ！
:::

### HTMLの特徴

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

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

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

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

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

![html_css_study](/wp-content/uploads/2022/08/html_study1-min.jpg)

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

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

```text
<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_css_study](/wp-content/uploads/2022/08/html_study2-min.jpg)

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

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

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

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

:::box
**・Windowsの場合：【Ctrl + U】を押す\
・Macの場合：【⌘ + Option + U】を押す\
・Google Chromeの右上にある3点リーダーアイコン（⋮）→\[その他のツール] → \[[デベロッパーツール](/developper-tool)]をクリックし、Elementsを見る**
:::

![html_css_study](/wp-content/uploads/2022/08/html_study3-min.jpg) ![html_css_study](/wp-content/uploads/2022/08/html_study4-min.jpg)

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

:::talk{who="umatan"}
実際のHPで見やすいサイトだなと思ったら、HTMLを見て、記述方法を参考にしてみよう！
:::

### CSSの特徴

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

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

:::box
**・デザインをまとめて変更できる**\
**・言語量を抑えてWebサイトを軽量化できる\
・さまざまな装飾を追加できる**
:::

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

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

```text
<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>
```

![html_css_study](/wp-content/uploads/2022/08/html_study10-min.jpg)

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

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

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

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

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

:::talk{who="umatan"}
CSSを駆使することでWebサイトをより見やすくて読みやすいものにデザインできるよ！
:::

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

![html_css_study](/wp-content/uploads/2022/08/html_study5-min.jpg)

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

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

:::talk{who="man" side="left"}
HTMLとCSSについて理解できたけど、何から手をつけていいのかわからない、、、
:::

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

:::box
**Step1：**__学習サイト：__**基礎レベルの知識を学ぶ**\
**Step2：参考書：応用レベルの知識を学ぶ**\
**Step3：サイト模写：サイトデザインのスキルを学ぶ**\
**Step4：すべて自分の力で1からコーディングしてポートフォリオを制作する**
:::

:::talk{who="umatan"}
いきなりカッコいいサイトを作ろうとコーディングをしても、内容を理解できないため、まずは基礎レベルの内容から学習しよう！
:::

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

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

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

:::box
- **世界中の有名講師から学べる**：「[Udemy](https://trk.udemy.com/kOqmZL)」
- **挫折せず本気で学べる**：「[テックアカデミー](https://techacademy.jp/)」
- **実践形式のサイト**：「[Progate](https://prog-8.com/)」
- **動画形式**：「[ドットインストール](https://dotinstall.com/)」
:::

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

[![Udemy コース](/wp-content/uploads/2020/03/udemy-course-min.jpg)](https://trk.udemy.com/kOqmZL)

[Udemy](https://trk.udemy.com/kOqmZL)は世界最大のオンライン学習プラットフォーム

:::talk{who="umatan"}
全ての講座にしっかりレビューが入っているから選びやすいんだ！
:::

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

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

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

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

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

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

::button[Udemyのプログラミングコースをチェック]{href="https://trk.udemy.com/kOqmZLcourses%2Fdevelopment%2Fprogramming-languages%2F" note="＼30日以内なら返金無料／"}

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

<https://toukei-lab.com/udemy-review>

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

[**\[HTML/CSS/JavaScript\] フロントエンドエンジニアになりたい人の Webプログラミング入門**](https://trk.udemy.com/09NeqM)

[![Udemy　フロントエンド](/wp-content/uploads/2020/08/Udemy-fe-min.jpg)](https://trk.udemy.com/jeLv6Z)

<table class="table">
<tbody>
<tr>
<th>【オススメ度】</th>
<td><span class="stars" role="img" aria-label="5点中4.5点" data-value="4.5"></span></td>
</tr>
<tr>
<th>【講師】</th>
<td><span>Webエンジニア兼経営者</span></td>
</tr>
<tr>
<th>【時間】</th>
<td><span>9時間</span></td>
</tr>
<tr>
<th>【レベル】</th>
<td><span>初級</span></td>
</tr>
</tbody>
</table>

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

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

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

::button[このコースを見てみる]{href="https://trk.udemy.com/09NeqM" note="＼30日以内なら返金無料／"}

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

<https://toukei-lab.com/udemy-recommend-programming>

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

[![テックアカデミートップページ](/wp-content/uploads/2019/10/ccf2e2d6b257f0e31dafaf31b44c3999.jpg)](https://techacademy.jp/)公式サイト：[https://techacademy.jp/](https://techacademy.jp/)

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

[テックアカデミー](https://techacademy.jp/)のメンターさんは<mark>現役エンジニアの方なので非常に安心感があります。</mark>

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

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

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

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

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

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

::button[テックアカデミーの公式サイトはこちら]{href="https://techacademy.jp/" note="＼今すぐ試す／"}

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

<https://toukei-lab.com/techacademy-review>

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

<https://toukei-lab.com/recommend-programming-school>

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

[![english](/wp-content/uploads/2022/06/english1-min.jpg)](https://prog-8.com/)

「[Progate](https://prog-8.com/)」は、わかりやすいイラストでの解説とブラウザのみでコードが入力できる<mark>実践形式の学習サイトです。</mark>

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

![html_css_study](/wp-content/uploads/2022/08/html_study6-min.jpg)

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

:::talk{who="umatan"}
無料でも学習できるけど、HTMLとCSSを応用レベルまで使えるようになりたい場合は、有料プランの利用がおすすめ！

月1000円程だから、期間を決めて集中して勉強しよう！
:::

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

[![english](/wp-content/uploads/2022/06/english3-min.jpg)](https://dotinstall.com/)

「[ドットインストール](https://dotinstall.com/)」では、動画形式で講義を受けられます。

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

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

:::talk{who="umatan"}
講師が動画で重要な部分をわかりやすく解説してくれるから、HTML・CSSを理解が捗る！

Progateでコーディングした内容の知識の復習や補足に使うと良い！
:::

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

<https://toukei-lab.com/dotinstall-reputation>

### 2.参考書で応用を学ぶ

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

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

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

::product[1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座]{url="https://www.amazon.co.jp/dp/B07PS1ZJN6?tag=statistic08-22&linkCode=ogi&th=1&psc=1" image="https://m.media-amazon.com/images/I/41a8QSuhu7L._SL160_.jpg" amazon="https://www.amazon.co.jp/dp/B07PS1ZJN6?tag=statistic08-22&linkCode=ogi&th=1&psc=1" kindle="https://www.amazon.co.jp/dp/B07PS1ZJN6?tag=statistic08-22&linkCode=ogi&th=1&psc=1" rakuten="https://af.moshimo.com/af/c/click?a_id=858168&p_id=54&pc_id=54&pl_id=616&url=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F1%25E5%2586%258A%25E3%2581%25A7%25E3%2581%2599%25E3%2581%25B9%25E3%2581%25A6%25E8%25BA%25AB%25E3%2581%25AB%25E3%2581%25A4%25E3%2581%258FHTML%2B%2526%2BCSS%25E3%2581%25A8Web%25E3%2583%2587%25E3%2582%25B6%25E3%2582%25A4%25E3%2583%25B3%25E5%2585%25A5%25E9%2596%2580%25E8%25AC%259B%25E5%25BA%25A7%2F%3Ff%3D1%26grp%3Dproduct"}

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

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

:::talk{who="umatan"}
現場で役立つような応用レベルのコードの知識・デザインを学べる！

すべてを進められればスキルアップは間違いなし！
:::

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

::product[HTML＆CSSとWebデザインが1冊できちんと身につく本［増補改訂版］]{url="https://www.amazon.co.jp/dp/B09PQHT3GC?tag=statistic08-22&linkCode=ogi&th=1&psc=1" image="https://m.media-amazon.com/images/I/51GwRggsxcL._SL160_.jpg" amazon="https://www.amazon.co.jp/dp/B09PQHT3GC?tag=statistic08-22&linkCode=ogi&th=1&psc=1" kindle="https://www.amazon.co.jp/dp/B09PQHT3GC?tag=statistic08-22&linkCode=ogi&th=1&psc=1" rakuten="https://af.moshimo.com/af/c/click?a_id=858168&p_id=54&pc_id=54&pl_id=616&url=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FHTML%25EF%25BC%2586CSS%25E3%2581%25A8Web%25E3%2583%2587%25E3%2582%25B6%25E3%2582%25A4%25E3%2583%25B3%25E3%2581%258C%2B1%25E5%2586%258A%25E3%2581%25A7%25E3%2581%258D%25E3%2581%25A1%25E3%2582%2593%25E3%2581%25A8%25E8%25BA%25AB%25E3%2581%25AB%25E3%2581%25A4%25E3%2581%258F%25E6%259C%25AC%2F%3Ff%3D1%26grp%3Dproduct"}

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

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

:::talk{who="umatan"}
学習サイトでの学習を終えた方におすすめ！未経験からWebデザイナーを目指す際に見ておきたい本！
:::

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

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

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

:::box
**1.ルールを決める**\
**2.模写するサイトを確認する**\
**3.HTMLとCSSでコーディングする**\
**4.デザインの動きとソースコードを確認する**
:::

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

#### 1.ルールを決める

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

:::box
**・カラーやイメージの種類にこだわらない**\
⇒スキルアップに繋がらないため

**・マージンやパディングにこだわらない**\
⇒細かく合わせると時間がかかりすぎてしまうため

**・ソースコードは見ない**\
⇒コードを考えるスキルを上げるため
:::

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

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

:::talk{who="umatan"}
ルールを決めて、諦めずに最後までやり遂げることが大切！
:::

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

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

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

:::box
・**デザイン**：レイアウト・ページの構成\
・**動き**：マウスオーバー・スクロールしたときのページの動き\
・**レスポンシブ対応**：スマホ・PC・タブレットの画面サイズに変更したときのデザイン
:::

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

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

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

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

:::talk{who="umatan"}
見やすいページを作成するためにマネしたいポイントを押さえるのが大切！
:::

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

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

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

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

:::talk{who="umatan"}
もし途中で調べてもわからないところが出てきたら、忘れずにメモしておこう！
:::

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

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

:::box
**・デザインの動きが模写サイトと同じ動きをしているか**\
**・ソースコードとの違いを確認し参考になる部分は復習する**
:::

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

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

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

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

:::talk{who="umatan"}
ソースコードを比較して参考になるところは、ぜひ今後のコーディングで使っていこう！
:::

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

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

![html_css_study](/wp-content/uploads/2022/08/html_study7-min.jpg)

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

:::talk{who="umatan"}
「クナイプ」を模写できれば、プログラミング中級者に近いレベル！
:::

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

「[**iSARA**](https://isara.life/)」は、多くのサイト制作者の間で人気が高い模写サイトです。

![html_css_study](/wp-content/uploads/2022/08/html_study8-min.jpg)

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

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

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

:::talk{who="umatan"}
「[iSARA](https://isara.life/)」を模写できれば、上級レベルのHTML・CSSマスターに！
:::

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

<https://toukei-lab.com/webdesign_learn>

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

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

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

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

:::box
**1.作成してみたいサイトの種類を決める\
2.サイトのデザインをツールで作成する\
3.コーディングする**
:::

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

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

![html_css_study](/wp-content/uploads/2022/08/html_study7-min-300x154.jpg) ![html_css_study](/wp-content/uploads/2022/08/html_study8-min-300x148.jpg)

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

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

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

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

:::talk{who="umatan"}
Web制作の知識やスキルをつけて1からコーディングできるようになれば、実務もこなせるレベルに！

完成したポートフォリオを副業などで積極的にアピールしていこう！
:::

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

![html_css_study](/wp-content/uploads/2022/08/html_study12-min.jpg)

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

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

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

### 目標を決める

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

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

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

:::box
**・来月までにサイト作成ができるレベルまで到達したい\
・あと半年でポートフォリオ作成までこなして案件を獲得したい**
:::

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

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

:::talk{who="umatan"}
目標を決めるのと決めないのでは、知識やスキルに大きな差が生まれる可能性がある！

小さな目標でも具体的に決めてから勉強を始めよう！
:::

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

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

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

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

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

:::talk{who="umatan"}
HTML・CSSを勉強する際には、どの構文がどんな働きをしたのか、毎回確認することが大事！

最初からコードを覚えようとしないようにしよう！
:::

### 手を動かして慣れる

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

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

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

:::talk{who="umatan"}
「書いて覚える」はどんなことでも共通だね！
:::

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

<https://toukei-lab.com/programming-understand>

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

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

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

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

:::talk{who="umatan"}
勉強の時は、常に手にとって見られる位置に置いておこう！
:::

::product[1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座]{url="https://www.amazon.co.jp/dp/B07PS1ZJN6?tag=statistic08-22&linkCode=ogi&th=1&psc=1" image="https://m.media-amazon.com/images/I/41a8QSuhu7L._SL160_.jpg" amazon="https://www.amazon.co.jp/dp/B07PS1ZJN6?tag=statistic08-22&linkCode=ogi&th=1&psc=1" kindle="https://www.amazon.co.jp/dp/B07PS1ZJN6?tag=statistic08-22&linkCode=ogi&th=1&psc=1" rakuten="https://af.moshimo.com/af/c/click?a_id=858168&p_id=54&pc_id=54&pl_id=616&url=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F1%25E5%2586%258A%25E3%2581%25A7%25E3%2581%2599%25E3%2581%25B9%25E3%2581%25A6%25E8%25BA%25AB%25E3%2581%25AB%25E3%2581%25A4%25E3%2581%258FHTML%2B%2526%2BCSS%25E3%2581%25A8Web%25E3%2583%2587%25E3%2582%25B6%25E3%2582%25A4%25E3%2583%25B3%25E5%2585%25A5%25E9%2596%2580%25E8%25AC%259B%25E5%25BA%25A7%2F%3Ff%3D1%26grp%3Dproduct"}

::product[HTML＆CSSとWebデザインが1冊できちんと身につく本［増補改訂版］]{url="https://www.amazon.co.jp/dp/B09PQHT3GC?tag=statistic08-22&linkCode=ogi&th=1&psc=1" image="https://m.media-amazon.com/images/I/51GwRggsxcL._SL160_.jpg" amazon="https://www.amazon.co.jp/dp/B09PQHT3GC?tag=statistic08-22&linkCode=ogi&th=1&psc=1" kindle="https://www.amazon.co.jp/dp/B09PQHT3GC?tag=statistic08-22&linkCode=ogi&th=1&psc=1" rakuten="https://af.moshimo.com/af/c/click?a_id=858168&p_id=54&pc_id=54&pl_id=616&url=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FHTML%25EF%25BC%2586CSS%25E3%2581%25A8Web%25E3%2583%2587%25E3%2582%25B6%25E3%2582%25A4%25E3%2583%25B3%25E3%2581%258C%2B1%25E5%2586%258A%25E3%2581%25A7%25E3%2581%258D%25E3%2581%25A1%25E3%2582%2593%25E3%2581%25A8%25E8%25BA%25AB%25E3%2581%25AB%25E3%2581%25A4%25E3%2581%258F%25E6%259C%25AC%2F%3Ff%3D1%26grp%3Dproduct"}

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

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

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

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

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

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

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

<https://toukei-lab.com/recommend-programming-school>

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

![html_css_study](/wp-content/uploads/2022/08/html_study13-min.jpg)

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

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

### PHP

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

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

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

:::talk{who="umatan"}
シンプルで覚えやすい構文が多いため、難易度は低いので、

<mark>

余裕があれば一緒に勉強してみよう！

</mark>
:::

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

<https://toukei-lab.com/php_learn>

### JavaScript

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

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

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

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

<https://toukei-lab.com/javascript_learn>

### Photoshop・Illustrator

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

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

:::box
**・レイアウトのデザインを作成\
・撮った写真を綺麗に編集**\
**・一つの画像を見やすいデザインに変更してリンクとして配置**
:::

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

## HTML・CSS勉強　まとめ

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

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

:::talk{who="umatan"}
手を動かしながら、学習した知識を活かしてまずは一つ成果物を作ってみよう！
:::

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

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

<https://toukei-lab.com/python-learn>

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

<https://toukei-lab.com/se_study>