なにやら猫田さんが、聞いたことのない歌を歌っています。
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
ドットー ドットー ドット、インストロール♪ ドットー ドットー ドット、インストロール♪
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
なんですか、その変な歌は
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
さっき作ったドットインストロールの歌だよ
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
えっ、まさか猫田さん、抜け駆けをしてドットインストールに入会したんですか?
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
ふっふっふ、その「まさか」だよ
二人がとりとめのない会話をしていると、キャニット先生がやってきました。
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
とうとう猫田さんが、ドットインストールに入会したそうで。やはり基本のHTMLを学ぶのなら、ドットインストールは便利ですからね
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
やはりそうか! そんな気がしたんだよなー でも、どうしてHTMLを学ぶのならドットインストールがいいの?
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
では今回はドットインストールでHTMLを学ぶメリットを紹介しましょうか
というわけで、今回はドットインストールでHTMLを学ぶメリットについてのお話です。
ドットインストールは無料でスタートできる
![ドットインストール](https://www.canit.jp/wp-content/uploads/2020/12/a57bbdeffaf22202f5ae8b98b3cfa951-1024x717.jpg)
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
本格的なプログラミングを学ぶ前に、まずはHTMLとCSSを抑えておくのが基本です。そして、一般的にCSSはHTMLの次に学ぶものなので、最初に学ぶのはやはりHTMLなんですよ。二人ともここまではいいですね?
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
大丈夫です!
今は、プログラミングがちょっとしたブームなので、とても多くの人が学び始めるのですが……やはり大半の人が挫折してしまいます。もしも挫折してしまったら、学習にかけた費用は無駄になってしまうでしょう。
だから、まずは無料で学び「学習を続けられそうかどうか」と適性をチェックしたほうが良いんですよ。
適性チェックは無料部分で十分
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
でも、無料で学べるのって一部ですよね。少しかじったくらいで適性なんてわかるものなんですか?
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
牛山くん、君はなにもわかっていないなぁ。 ほれっ、これを見てごらんなさい
猫田さんがドヤ顔で出してきたのは、とある資料……いや、ただのスクショです。
![ドットインストール](https://www.canit.jp/wp-content/uploads/2021/05/5f9e14d41b93fcdb5e1578efc758d484.jpg)
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
このプレミアムって書いてあるのが有料の部分なのよ。書いていないのは無料ね。つまり、HTMLの1/3くらいは無料で学べてしまうってわけ
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
なるほど。 全体の1/3も知れば、少なくても「明らかに向いていなそう」と思える人は気付きますね。たしかに、適性チェックには十分です
ドットインストールでのHTML学習:3つの特徴
![女性 学習](https://www.canit.jp/wp-content/uploads/2021/05/4192885_s.jpg)
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
では続いて、ドットインストールの特徴を紹介しましょう。紹介したい特徴は3つです
- 1つのレッスンが短い
- 開発構築から学ぶ
- HTML以外の言語もたくさん学べる
ドットインストールの特徴①:1つのレッスンが短い
ドットインストールのレッスンは長くても3分程度で終わります。
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
そうそう! 短いのが最高にいいよね
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
なんで短いといいんですか?
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
たいしてやってないのに、やった気になるじゃん
猫田さんの言い分は置いておいて……レッスン時間が短いメリットは多いです。2~3分程度ならばさすがに集中力が続きますし、自分なりのペースで区切りの良いところまで進める使い方にも合っています。隙間時間での学習にも向いていますね。
これが1レッスン30分や60分だと、途中で飽きてしまう人やまとまった時間が取れずに学習が進まない人も出てきてしまいます。
ドットインストールの特徴②:開発構築から学ぶ
基本的には、プログラミングを行う前に環境を整えなければなりません。この環境構築を丁寧に教えてくれるのは大きいです。
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
具体的には、どのようなことをやるんですか?
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
レッスン内容を見てもらったほうが早いと思うので、こちらをどうぞ
![ドットインストール](https://www.canit.jp/wp-content/uploads/2021/05/6756a0574a67df5020e5b63bf74c1393-1024x666.jpg)
こちらの5つのレッスンをこなすと開発するための環境が整います。ちなみにドットインストールで使用するのはGoogleChromeとVS Codeです。また、WindowsとMacでは開発構築が若干異なるので、それぞれに対応したレッスンが用意されています。
ドットインストールの特徴③:HTML以外の言語もたくさん学べる
HTMLを学習した流れで他の言語への学習にシフトしやすいのも、ドットインストールの大きな特徴です。
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
他の言語への学習にもシフトしやすいって、どういうことですか?
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
どの言語の学習も同じシステムを使いますし、同レッスンの流れもほぼ同じです。だから、HTMLの学習の延長のようにして他の言語の習得もしやすいですよ
ドットインストール:HTML学習の流れ
![パソコン](https://www.canit.jp/wp-content/uploads/2021/05/4929815_s.jpg)
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
肝心の学習の流れを知りたくなってきました
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
ドットインストールでの学習は、全て動画です。動画を見ながら、講師と同じコードをVScodeに打ち込んでいく感じですね
- 動画を見る
- VScodeでコードを書く
- 実際にコードが反映されているかGoogleChromeでチェック
この1〜3までの流れを繰り返しながら、HTMLを学習していきます。VScodeに打ち込むのは、このようなコードです。一例として表示しておきますね。
![HTML](https://www.canit.jp/wp-content/uploads/2021/05/b61867299d936758dd807c4acf380705.jpg)
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
おおー なんか本格的ですね
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
そうそう、本格的なのよ
有料版が気になる方へ
![パソコン学習](https://www.canit.jp/wp-content/uploads/2021/05/4241505_s.jpg)
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
ここまで良さげだと、有料版がどうなっているのか気になりますね
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
有料版のことは、無料版を試してから考えればいいんじゃない?
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
猫田さんの言うことももっともですが、簡単に有料版の説明もしておきましょうか
- 会費は月に1,000円
- メンターにチャットで質問できるようになる
- HTMLの応用篇はもちろん、たくさんの言語が学習できる
他にも色々な機能が追加されますが、今はこれだけ知っておけば十分でしょう。
HTMLをドットインストールで学ぼう:まとめ
![プログラマー](https://www.canit.jp/wp-content/uploads/2021/03/programming-593312_640.jpg)
では、この辺でドットインストールでのHTML学習の情報はおしまいです。
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
どうでしたか? ドットインストールに興味が湧いてきたでしょう
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
俄然、興味が沸きました! さっそく無料会員で登録してみます
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
牛山くん、ドットインストールに入会したら例の歌を歌わないとダメなんだよ
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
嘘でしょー?
![猫田さん](https://canit.jp/wp-content/uploads/2021/01/canit-character2.jpg)
ドットー ドットー ドット、インストロール♪ ドットー ドットー ドット、インストロール♪ はい!
![牛山くん](https://canit.jp/wp-content/uploads/2021/01/canit-character3.jpg)
ドットー ドットー ドット、インストロール♪ ドットー ドットー ドット、インストロール♪
![CANIT先生](https://canit.jp/wp-content/uploads/2021/01/canit-character.jpg)
・・・・・・