プログラミングスクールの情報サイト

TechSwitch プログラミングを学んでエンジニアに転身!

お役立ち情報 学習ツール

HTMLを学びたい!おすすめプログラミング学習方法

投稿日:2017/02/14 更新日:

HTMLを学びたい!おすすめプログラミング学習方法

そうだ。HTML、勉強しよう。
…と近畿地方へ旅行したくなるような始まり方ですが、こちらの記事ではこれからHTMLを勉強しようと考えている方に向けておすすめの学習方法をご紹介します!


最近人気のある職業の一つにWebデザイナーやエンジニアといった職業があります。現在IT人材の不足が深刻になっていて、2020年末には国内で30万人以上不足するといわれており、需要が高まっている職業でもあります。

なぜ、そこまで需要が高まっているのでしょうか?

世の中では新しいサービスができたり新しい技術が日常生活に浸透していくスピードが加速していることが理由の一つとして挙げられます。
スマートフォンでどこでもインターネットにつなぐことができたり、ネット通販で欲しい商品が翌日・さらには当日に家に届いたりと、便利な世の中になっている裏側では大勢のエンジニアやデザイナーの方たちが積み上げてきた技術がある訳です。
需要もあるしプログラミングの勉強をしよう!!と思っている方は多いかと思いますが「どうやって勉強すればいいんだろう・・・」「というか・・・そもそも何から勉強すれば・・・」なんてお悩みの方もいらっしゃると思います。
そこで簡単な概要と学習方法についてご説明していきたいと思います。

Webサイトってどうなっているの?

プログラミングを必要とするものは、Webサイト・スマホアプリ・ゲーム(家庭用ゲーム機も含む)など多種多様な場面で必要とされていますが、今回はWebサイトに注目してみましょう!
Webサイトとは、皆さんがネットで色々な会社のページや情報サイト・通販サイトをご覧になっているページです。
オシャレなページから官公庁のオフィシャルなページまで各サイトが工夫を凝らしてページ(サイト)をインターネット上に掲載しています。 オシャレなページもオフィシャルなページも、デザインの違いはあれど基本的には同じ構造でなりたっています。
基本的な構造を大きく分けると、
・パソコンやスマホの画面に表示させる「フロント側」
・会員登録データなど裏側で情報の管理や動作を行う「サーバー側」
です。
※さらにネットワーク回線などのインフラの深い領域に入っていくと複雑な構造がありますが割愛します

フロント側とサーバー側はエンジニアの中でも「フロントエンドエンジニア」「サーバーサイドエンジニア」なんて呼ばれていて、同じエンジニアの中でも区別されています。綿密に分けるとエンジニアの呼び方は色々あり、上記2つの呼び方以外にもあるので混乱するかもしれません。
今回のポイントとなっている「HTML」に関してはフロント側となるので、こちらにクローズアップしていきましょう。

フロント側ってなに?

フロント側とは、一言でいうと目に見える部分のことです。サイトを訪れた時に、おしゃれな写真やボタン・文章などのテキストが配置されていたり、写真が自動でスライドショーのようになっているモノすべてです。
フロント側を作ることでサイト自体が見れるようになりますが、サイトを作る時にいくつかの工程を経てフロント側が出来上がっています。

・写真や広告などの画像を作る
一般的に写真や広告の一枚の画像を作る作業はWebデザインと呼ばれる項目に分けられます。専用の画像加工ソフトを使って、写真を加工したりおしゃれな広告を作ったりします。
この作業ではHTMLは必要としません。逆にセンスや専用ソフトの操作技術が求められます。

・作った画像をページに載せたり、文章を配置する
この部分がHTMLを使って作業するメインの部分ですね。
インターネット上でページを作るには、ノートに切り貼りするように簡単にはいきません。HTMLという言語とCSSと呼ばれる言語を使って構築していく訳です。
この部分は後ほど詳しくご説明したいと思います!

・画像をスライドショーのように動かす
サイト内でスライドショーのように動きのある動作をする時には、JavaScriptという言語を使って動かします。ただし、あくまでもページに表示させるのはHTMLとCSSなので、JavaScriptと併せて使用することがほとんどです。
車に例えるならエンジンはJavaScript、車体やタイヤはHTMLとCSSというイメージですね。
最近では動きのある動作の一部をHTML・CSSで再現できるようになっているので、HTML・CSSの応用編として頭の片隅に残しておいてください。

HTMLとCSSってなに?

お待たせしました。ようやくHTMLについてお話をしていきたいと思います。
まずHTML(エイチ・ティー・エム・エル)とは「HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)」の略称です。
これだけ聞いても訳が分からないので、特に覚えなくても結構です。前述でもご説明していますが、実際にサイトに画像やテキストを表示させるための言語です。
基礎の基礎としてはHTMLだけでサイトに画像やテキストを表示することができます。
ここで一つ疑問が…。

さらっと話の中に加えていましたが、「CSSってなんなの?」という問題です。
HTMLだけでサイトに表示できるなら「CSSっていらないじゃん!」と思われるかもしれません。実際に昔はCSSなしでサイトが作られていた時代もありました。ここからCSSについてご説明していきましょう。

CSS(シー・エス・エス)とは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略称です。
もちろんこちらも正式名称は重要ではないので特に覚えなくても結構です。ただ、スタイルシートという名前がCSSの意味を表しています。
例えば、学校の授業でノートを取る時に、黒のボールペンでひたすら筆記したページと色付きボールペンで要点や見出しを色付けしたページではどちらが見やすいですか?
きっと後者だと思います。
文字に色付けすること自体はHTMLでもできる訳ですが、
赤色で書いた文字を一気に青色に変更できるとしたら?
各見出しの文字の大きさを一気に大きくできるとしたら?
超便利ですよね!!このように、ある程度決まった項目をCSSでまとめておくと、一気に変更ができる訳です。もちろん、この機能はCSSのほんの一部ですがCSSを使用することで、HTMLを構築する時にシンプルに分かりやすく作ることができます。
このようにHTMLとCSSは切っても切れない関係な訳ですね。
HTMLとCSSの概要が分かったところで、実際のおすすめ学習方法についてご説明しましょう。

HTMLとCSSのおすすめ学習方法

実際にHTMLとCSSこれから学習するにあたって大事なことは、
・実際にコードを書いてみる
・成功体験を繰り返す
の2点が大切です。
言語に関係なくプログラミングの勉強全般で言えることですが、実際にコードを書くことが習得への近道です。
参考書を読んだり授業動画を見ているだけで習得できるものではないので、実際にコードを書いて疑問に思ったことを解決していくことで構造を理解していきます。
そして、成功体験を繰り返すということです。
これはプログラミングに限らず勉強全般に言えることですが、勉強したことを形にして成功体験が生まれると意欲が湧くものです。
プログラミングの勉強で挫折してしまう大きな原因として「コードを書いたけどうまく表示されない・・・」「思い通りに動作しない・・・」などプログラムの動作に失敗してモチベーションが下がってしまうことです。
上手くいかない → 悩む → 解決できない → つまらなくなる → 挫折するという悪循環にとらわれてしまう訳です。
これを、上手くいく → 楽しい → さらに勉強する → 上手くいくという好循環に持っていくことで、スキルを習得するためのモチベーションを保つことができます。

おすすめの学習サイトの紹介

ドットインストール

ドットインストール

ドットインストール

3分動画で学べる初心者向け学習サイト

ドットインストールは1本の動画が3分構成になっており、気軽に学習できる学習サイトです。初級動画のほとんどは無料で公開されているので、まず始めてみたい方は受講してみてはいかがでしょうか??
※ちなみに中級者向け以上の動画は月額980円で観ることができます!

Udemy(ユーデミー)

ユーデミー

Udemy

気になる授業だけ購入できる!便利な学習サイト

Udemyは授業ごとに購入ができる学習サイトです。通常スクールはコースでカリキュラムが組まれていますが、「まずは冒頭だけ触れてみたい」「少しかじったので分からないところだけ勉強したい」など、各授業を個別に購入して動画学習ができるのでリーズナブルに学習することができます。

Progate(プロゲート)

progate(プロゲート)

Progate

イラスト中心で分かりやすいスライド式授業

Progateは初心者が分かりやすいように、イラスト中心で作成されたスライド式の授業を取り入れています。視覚的に分かりやすくスライドで順番に進めるので、自分のペースで学ぶことができます。
基礎12レッスンは無料で閲覧ができるので、まずは体験してみてはいかがでしょうか。

Qiita(キータ)

Qiita

プログラマー同士が情報を共有できるサービス

学習サイトとは少し異なりますが、プログラマー同士が改善方法やアドバイスを共有している情報サイトです。
サイト内検索が充実しているので、ピンポイントで分からないことや知りたいことを調べることができます。
より具体的な情報やポイントが知りたい方、まずは検索して情報収集してみてはいかがでしょう?

自分に合った学習方法があるので、自分に合った方法で勉強するのが一番の近道ですが、一朝一夕で習得できるものではないので学習サイトを利用して、効率的に勉強すると最短でゴールに近づけるかと思います。
まずは、プログラマーの一歩を踏み出してみてはいかがでしょうか?

-お役立ち情報, 学習ツール

執筆者:

関連記事

【徹底比較】オンラインのプログラミングスクール7選

世の中で人材不足といわれて需要が伸びているエンジニアという職業。エンジニア・プログラマーへ就職・転職したいと考えている方はたくさんいます。しかし、プログラミングというスキルは一朝一夕で習得できるもので …

【社会人向け】働きながら通えるプログラミングスクール10選

最近世の中ではエンジニアの需要が高まっており、プログラミングを勉強するためにスクールに通おうと考えている方が増えてきています。 でも社会人になると、昼間は通えなかったり残業で決まった時間に通えなかった …

未経験でIT業界に転職!実質0円でプログラミングを学べるテックアカデミー就職予備校

「IT・Web業界へ就職・転職したい!」 こんな思いを胸に秘めている方や、すでに決意されている皆さん。どのようにして就職・転職したら良いかお悩みではありませんか? 興味があっても、プログラミングやWE …

【徹底比較】おすすめのプログラミングスクール10選

プログラミングスクールに通おうと考えている皆さん!たくさんのプログラミングスクールがあって迷っている方もいらっしゃると思います。どのスクールが人気なんだろう?自分にはどのスクールが合っているのだろう? …

無料のプログラミングスクールに通うメリット・デメリット

プログラミングを学ぼうと考えている皆さん、受講料がすべて無料で学べるプログラミングスクールがあるのをごぞんじですか? 近年、エンジニアの需要がますます高まっておりプログラミングを学ぶ方が増えています。 …