【サルでもわかる】HTMLとCSSの入門講座！勉強方法や独学の手順を解説！

「HTMLってどんな言語なの？」
「CSSを学ぶと何ができるの？」
「HTMLとCSSの勉強方法が知りたい」

WebデザインやWeb開発を学ぶための基礎になるのが HTMLとCSS です。

WebデザイナーやWebエンジニアを目指すなら、HTMLとCSSの知識は必要不可欠。最低限の書き方は覚えておきましょう。

この記事では、HTMLとCSSの基礎知識（特徴・できること・書き方）を初心者向けに解説。サンプルコードを記述しながら、HTMLとCSSのできることをまとめていきます。

この記事を読めば、HTMLとCSSの基本は理解できるでしょう。勉強後の学習ロードマップも紹介しているため、最後までお付き合いください。

【関連】プログラミング言語おすすめ５選
【関連】プログラミング学習の始め方＆独学勉強法

HTML とは

HTMLは、HyperText Markup Language（ハイパーテキストマークアップ言語）の略で、Web上の文書を記述するためのマークアップ言語です。

• 文字を挿入できる
• 画像を挿入できる
• 文字リンクを挿入できる
• 箇条書きを作れる
• 表の作成ができる

ページの要素や構造を指定できるため、文章に限らず、箇条書きや表、画像などさまざまな要素を表現できます。

HTMLの書き方

HTMLはタグを使って要素を指定します。

• <h2>…</h2>：見出しの要素
• <p>…</p>：文章の要素
• <img>…</img>：画像の要素

上記例のように「要素ごとに指定タグが決まっている」ため、HTMLを書くためには、要素の種類を覚える必要があります。

ちなみに『HTMLの書き方〜覚える必要があります』までを、HTML記述すると以下のようになります。

<h3>HTMLの書き方</h3>
<p>HTMLはタグを使って要素を指定します。</p>
<ul>
　<li>見出しの要素</li>
　<li>文章の要素</li>
　<li>画像の要素</li>
</ul>
<p>上記例のように「要素ごとに指定タグが決まっている」ため、HTMLを書くためには、要素の種類を覚える必要があります</p>

HTMLはプログラミング言語ではない

HTMLはプログラミング言語ではなく、マークアップ言語に分類されます。

• プログラミング言語：コンピュータに計算等の処理を命令する言語
• マークアップ言語：Webサイトを作成する際の文章構造を定義する言語

CSS とは

CSSとは、Cascading Style Sheets（カスケーディングスタイルシート）の略で、Webページをデザインするための言語です。

• 文字の色を変更できる
• 背景色を変更できる
• 箇条書きのデザインを変更できる
• 表のデザインを変更できる
• 枠の形を整えることができる

HTMLを使って指定した要素や構造を宣言することで、装飾を施すことができます。

CSSの書き方

CSSはタグを指定して装飾をしていきます。

• h2{ }：H2要素の装飾
• p{ }：P要素の装飾
• p .name{ }：クラスnameのP要素の装飾

上記例のように「要素を指定する必要がある」ため、HTMLとCSSを同時に勉強するのが効率的なんです。

CSSの書き方参考例をまとめました。

h2{
 color: red;
 background-color: lightgrey;
}

H2要素（見出し）の『文字色は赤色、背景色は薄い灰色』を指定しています。

HTMLとCSSを使えば簡単なWEBサイトが作れる

基本的な要素（見出し・文字・表）が作れる HTML と、作った要素に装飾を加えられる CSS を使えば、簡単なWEBサイトが作れるようになります。

覚えることは『HTMLの書き方』と『CSSの書き方』のみ。

初心者でも1時間勉強すれば、シンプルなWebサイトがHTMLとCSSを使って簡単に作れます。

プログラミング学習は HTMLとCSS を学んだ後から始まる！

HTMLとCSSを学んで、Webサイトが作れるようになったらチュートリアル終了です。

Webサイトの土台に様々な動作や機能を付け加えることで、本格的なWebアプリケーションを作っていきます。

• スクロールと同時に写真を動かす
• ポップアップウィンドウを出す
• 会員登録 / ログイン機能をつける
• お問い合わせフォームを作る

プログラミングは学べば学ぶほど、できることが増えていくため楽しんで勉強していきましょう！

HTMLとCSSの初心者向け勉強方法

HTMLとCSSはWeb制作の基礎言語になるため、初心者の方でも簡単に覚えることができます。

HTMLとCSSを覚えるために、有料講座を申し込むのはナンセンス。まずは無料動画や無料講座を駆使して、基礎を学んでいきましょう。

1. 勉強法①：Youtube動画を使って学ぶ
2. 勉強法②：オンライン学習サイトを使って学ぶ
3. 勉強法③：本や参考書はおすすめしない

勉強法①：Youtube動画を使って学ぶ

「HTMLとCSSの良い教材はないかな？」と探していたところ、YoutubeにHTMLとCSSの基礎が学べる動画講座を見つけました。

HTMLの無料学習動画

CSSの無料学習動画

どちらもプログラミングスクール『テックアカデミー』が公開している無料動画。

HTMLとCSSの役割や書き方、サンプルコードの写経が用意されており、初心者にかなりおすすめです。

勉強法②：オンライン学習サイトを使って学ぶ

実際に書いて覚えたい方には、無料で学べるプログラミング学習サイトがおすすめです。

特におすすめなのが、Progate（プロゲート）。HTMLとCSSに限らず、13種類のプログラミング言語を無料で学べます。

Progateが終わった後の学習ステップ も公開しているため、勉強の順番に悩んだ方にもおすすめです。

勉強法③：本や参考書はおすすめしない

本や参考書もHTMLとCSSを手軽に学べるアイテムですが、効率良く勉強する点においては、余りおすすめできません。

勉強と言えば『本や参考書を読んでから、問題を解く』のが一般的ですが、プログラミング学習においては『触りながら覚える』方が効率的です。

プログラミング関連の本や参考書は、大体1冊3,000円〜4,000円の書籍代がかかるため、本に投資するなら、オンライン学習講座や、プログラミングスクールの方がコスパが良いです。

HTMLとCSSに関していえば、無料で学べる学習サイトが多いため本の購入は避けておきましょう。

【必読】プログラミング初心者に本はいらない３つの理由【おすすめ３冊も紹介】

HTMLとCSS を学んだ後の学習ロードマップ

HTMLとCSSを学んで、Webサイトが作れるようになったらチュートリアル終了です。

Webサイトの土台に様々な動作や機能を付け加えることで、本格的なWebアプリケーションを作っていきます。

• スクロールと同時に写真を動かす
• ポップアップウィンドウを出す
• 会員登録 / ログイン機能をつける
• お問い合わせフォームを作る

プログラミングは学べば学ぶほど、できることが増えていくため楽しんで勉強していきましょう！

①：javaScript を覚えよう

動きのあるWEBサイトが作りたい方は「javaScript」に挑戦してみましょう。

②：Ruby / PHP を覚えよう

機能的なWEBアプリケーションを作りたい方は「Ruby」もしくは「PHP」に挑戦してみましょう。

③：Python を覚えよう

人工知能・機械学習を活用したい方は「Python」に挑戦してみましょう。

④：Swift / Java を覚えよう

iOSアプリ開発に挑戦したい方は『Swift』、Androidアプリ開発に挑戦したい方は『Java』を学びましょう。

HTML CSSと比較されるプログラミング言語一覧