プログラミング学習

【2021】プログラミング独学する方向け HTMLとCSSの独学方法

2021-07-16

こんにちは、高校生ブロガーの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で構築されています。

なおき
ここで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が簡単な理由は、プログラミング言語の中でイチバン習得が簡単だと言われています。プログラミングに慣れている方だと、数時間で習得可能です。

なおき
実際に僕は、2時間ほどでHTML&CSSを習得しました。

独学もとても簡単で、文法も簡単に覚えることができます。

HTMLとCSSの独学方法は?

大きく分けて二種類の学習方法があります。

HTML&CSSの独学方法の種類
  • 書籍を購入して写生する方法
  • ネットで学習する方法

それぞれ説明していきます。

書籍を購入して写生する方法

知識を高めたい場合に書籍からの学習方法は良い選択です。
「プログラミング言語を深く学びたい」「基礎をしっかり学んでおきたい」
という方にオススメですね。

実際、僕は書籍からC言語とC++を学習しました。

書籍にもメリットとデメリットがあります。

書籍で学習するメリットは?

書籍でプログラミング学習をするメリットはいくつかあります。

ポイント

  • より高度な知識が学べる
  • 動画やスクールに比べて数千円単位で学習可能
  • デバイスがなくても復習できるので、外出先でも便利
  • 作成に時間が書けられているので、内容が豊富

書籍学習のデメリット

ポイント

  • 動画と違い、一人でいちから学習する必要がある
  • 書籍で学習する際に、分厚さで本が閉じることがある
  • 本の内容が古くなっていることがある

という感じです。

なおき
ただ基礎知識を学ぶ方には、2年前の書籍でも9年前の書籍でも充分だと思います

ネットで学習する方法とは?

これは動画を視聴してプログラミングを学習する方法と、UdemyやProgateなどのオンライン講座を受講する方法があります。

ちなみにですが、Progateについての記事も書いています。

Progateについて説明

動画で学習することのメリット

ネットで学習する方法は、書籍からの学習と違って文字を読むのが苦手な方でも
簡単に学習を済ませることが可能です。

 

動画やオンライン講座だと、映像形式やテキスト形式で学習が可能です。講座を使うと、書籍よりは習得に時間が掛かります。
しかしネットの講座や動画はわかりやすくまとまってるので、簡単に理解が可能です。

文字だけの場合、発音だったり、ビミョーな言葉の使い方が出来ません。
その点、動画は微妙な言葉のニュアンスや専門用語の発音を正しく理解できます。

動画を見ながらだと、間違いにも気づきやすくなります。
講師の画面を見て「自分のここの文法が間違ってる...」と気づくこともあります。

スピーディーにプログラムが打てるのが動画形式の学び方です。

動画で学習することのデメリット

メモ

動画学習のデメリットは、じっくり考えることが不可能ということ。
動画は書籍と違って、自分がページを捲らなくとも講師の方がどんどん話していきます。

 

スピーディーに学べるという点でも動画学習はおすすめですが、
基礎をじっくり理解するというのが苦手なのも動画学習のデメリットです。

結局どんな学び方がオススメなの?

僕は初心者のうちはテキストで学習する方法をオススメしています。
テキスト学習だと自分のペースで進めることが可能です。

 

なおき
どうしても「動画とテキストが苦手...。」というあなたには、 プログラミングスクールで学習しましょう。

プログラミングスクールだと講師の方が教えてくれるので、人のサポートを受けながら学習が可能です。

プログラミングスクールだとCodegym ISAがオススメです。日本初の出世払いを採用しています。出世払いとは、就職したあとに給料から受講料が引かれる方式です。

Codegym ISAとは?

HTMLとCSSを本から学ぶならこちらがオススメ

1つ目『改訂版 高校生からはじめる プログラミング』

僕はこの本を買って読んだことがあります。基礎からわかりやすく解説しているので、まったくのプログラミング初心者にオススメの書籍です。

1ページに情報を詰め込みすぎることなく、適度な情報量で習得が可能です。
「プログラミングについて右も左も分からない...!」という方に作られている本なのかなと思いますね。

『改訂版 高校生からはじめる プログラミング』

2つ目『作りながら学ぶHTML/CSS』

本を読むだけでなく。実際に手を動かして学べるというのが特徴です。
基本的に学びと言うと受動的なイメージを浮かべる方が多いと思います。

 

実際インプットだけだと、記憶の忘却率が高くなると言われています。
有名なグラフは、エビングハウスの忘却曲線でしょうか?

実は学習の定着率もアウトプットをすることで上がります。

人に話す(90%)、自分で体験する(75%)です。

HTMLやCSSは手を動かさないと習得できません。

プログラミングは、使わないと忘れていきます。なので手を実際に動かして、
プログラミングを学習していきましょう。プログラミング学習で大切なことは、手を動かして次に進むことです。

『作りながら学ぶHTML/CSS』

なおき
今回は2つの書籍やプログラミングスクール、オンライン学習プラットフォームを紹介しました。習ったら手を動かして実践しましょう。プログラミングでは実践が大切です。

おすすめ記事

【プログラミング】プログラミングスクールに行く前にやるべきことは?

  • この記事を書いた人
  • 最新記事
ほわわな男の子jiro_rinchoの素材

なおき|Z世代ブロガー

副業フェスティバルでは、スキルを習得するためのお手伝いをしています。プログラミング学習、Webデザイン学習、ブログ運営など、これからのWeb時代を生き残れるような発信を心がけてます。

18歳のブロガー|シドニーに留学中。16歳の時にNoteを始める→900本近くの記事を投稿。趣味は新しい知識を習得すること。

-プログラミング学習
-, , , ,

/* LazyLoad for google adsense */