こんにちは、高校生ブロガーのnaokiです。
こんな疑問に答えます。
こんな方におすすめ
- 「HTMLって何?」
- 「CSSって何?HTMLとなにが違うの?」
- 「HTML&CSSの学習方法を教えてほしい」
メモ
結論から言うと、HTML&CSSの学習にはProgateがオススメです。ちなみにHTMLとCSSはプログラミング言語ではありません。一般的にマークアップ言語と呼ばれています。
ポイント
マークアップ言語は、Webサイトに文章を記述・修飾するための言語です。
本記事では、HTMLとCSSで何ができるのか?独学方法や無料で学習する方法について説明していきます。
この記事を書いている僕は、CとC++言語を独学で基礎学習をし、HTML&CSSを2時間でマスターした経験があります。
HTMLとは何か?
「HTMLが何に使われているのか?」から明確にしたいと思います。世界中のWebサイトは、ほとんどがHTMLとCSSで構築されています。
PHPという言語もありますが、HTMLは非常に簡単なマークアップ言語だと言えます。
HTMLを簡単に説明すると、コンピューターが理解できるようにわかりやすく記述した言語です。
HTMLではコンピューターに文章構成を示すコードを使います。コンピューターは人間の文字や段落を認識できません。なので、見出しタグはh1, h2, h3...。文章タグはpタグで、画像タグのimgタグ、情報源のaタグなどで囲む必要があります。
つまりコンピューターが文字を識別できるようにするのがHTMLです。
いま見ている僕のページもHTMLで構築されています。

と進んでいくと、ページのソースが表示されます。この記事だとこんな感じです。
CSSとは何?
HTMLは、webサイトに文章を記述するための言語です。
CSSは、webサイトの見た目を整えたり、動きをつけることが可能です。簡単に言うと、HTMLより拡張性があるのがCSSです。
CSSのメリットは、Webサイトのデザイン性がとても高いということです。HTMLとCSSの2つがあってこそ、ホンモノのWebサイトが作成することが可能です。しかし、CSSだとHTMLと違ってと違って見出しの配置や文章のタグを記述することができません。
分かりにくいと思うので、2つを係りに表してみます。
- HTMLは文章の記述係り
- CSSは装飾係り
こんな感じですね。

HTMLとCSSの独学は可能
「プログラミング言語」や「マークアップ言語」と言うと難しいイメージがあると思います。HTMLとCSSの独学は実は簡単です。
HTMLとCSSが簡単な理由は、プログラミング言語の中でイチバン習得が簡単だと言われています。プログラミングに慣れている方だと、数時間で習得可能です。

独学もとても簡単で、文法も簡単に覚えることができます。
HTMLとCSSの独学方法は?
大きく分けて二種類の学習方法があります。
- 書籍を購入して写生する方法
- ネットで学習する方法
それぞれ説明していきます。
書籍を購入して写生する方法
知識を高めたい場合に書籍からの学習方法は良い選択です。
「プログラミング言語を深く学びたい」「基礎をしっかり学んでおきたい」
という方にオススメですね。
実際、僕は書籍からC言語とC++を学習しました。
書籍にもメリットとデメリットがあります。
書籍で学習するメリットは?
書籍でプログラミング学習をするメリットはいくつかあります。
ポイント
- より高度な知識が学べる
- 動画やスクールに比べて数千円単位で学習可能
- デバイスがなくても復習できるので、外出先でも便利
- 作成に時間が書けられているので、内容が豊富
書籍学習のデメリット
ポイント
- 動画と違い、一人でいちから学習する必要がある
- 書籍で学習する際に、分厚さで本が閉じることがある
- 本の内容が古くなっていることがある
という感じです。

ネットで学習する方法とは?
これは動画を視聴してプログラミングを学習する方法と、UdemyやProgateなどのオンライン講座を受講する方法があります。
ちなみにですが、Progateについての記事も書いています。
動画で学習することのメリット
ネットで学習する方法は、書籍からの学習と違って文字を読むのが苦手な方でも
簡単に学習を済ませることが可能です。
動画やオンライン講座だと、映像形式やテキスト形式で学習が可能です。講座を使うと、書籍よりは習得に時間が掛かります。
しかしネットの講座や動画はわかりやすくまとまってるので、簡単に理解が可能です。
文字だけの場合、発音だったり、ビミョーな言葉の使い方が出来ません。
その点、動画は微妙な言葉のニュアンスや専門用語の発音を正しく理解できます。
動画を見ながらだと、間違いにも気づきやすくなります。
講師の画面を見て「自分のここの文法が間違ってる...」と気づくこともあります。
スピーディーにプログラムが打てるのが動画形式の学び方です。
動画で学習することのデメリット
メモ
動画学習のデメリットは、じっくり考えることが不可能ということ。
動画は書籍と違って、自分がページを捲らなくとも講師の方がどんどん話していきます。
スピーディーに学べるという点でも動画学習はおすすめですが、
基礎をじっくり理解するというのが苦手なのも動画学習のデメリットです。
結局どんな学び方がオススメなの?
僕は初心者のうちはテキストで学習する方法をオススメしています。
テキスト学習だと自分のペースで進めることが可能です。

プログラミングスクールだと講師の方が教えてくれるので、人のサポートを受けながら学習が可能です。
プログラミングスクールだとCodegym ISAがオススメです。日本初の出世払いを採用しています。出世払いとは、就職したあとに給料から受講料が引かれる方式です。
Codegym ISAとは?
HTMLとCSSを本から学ぶならこちらがオススメ
1つ目『改訂版 高校生からはじめる プログラミング』
僕はこの本を買って読んだことがあります。基礎からわかりやすく解説しているので、まったくのプログラミング初心者にオススメの書籍です。
1ページに情報を詰め込みすぎることなく、適度な情報量で習得が可能です。
「プログラミングについて右も左も分からない...!」という方に作られている本なのかなと思いますね。
2つ目『作りながら学ぶHTML/CSS』
本を読むだけでなく。実際に手を動かして学べるというのが特徴です。
基本的に学びと言うと受動的なイメージを浮かべる方が多いと思います。
実際インプットだけだと、記憶の忘却率が高くなると言われています。
有名なグラフは、エビングハウスの忘却曲線でしょうか?
人に話す(90%)、自分で体験する(75%)です。
HTMLやCSSは手を動かさないと習得できません。
プログラミングは、使わないと忘れていきます。なので手を実際に動かして、
プログラミングを学習していきましょう。プログラミング学習で大切なことは、手を動かして次に進むことです。

おすすめ記事