「プログラミングを独学できる無料サイトってないの？」
そんなアナタに。短い動画でプログラミングを学習できるサイト『ドットインストール』についてお伝えします。
動画で学べるサービス『ドットインストール』。初心者のプログラミング基礎学習にはうってつけのサービスです。
さっそく学んでみたので、どんな感じかお伝えします。
ドットインストールの勉強方法《無料動画で基礎を学ぼう》
『ドットインストール』は3分ほどの短い動画でプログラミングをコツコツと学んでゆけるサイトです。
いろんなプログラミング言語を学ぶことができます。レッスンの数は470もあり、7000本以上の動画があります。
カンタンな基礎は無料で用意されていて、じっくり学びたい場合は有料で学ぶ感じです。
『ドットインストール』を使ってみると、コードをマネして自分で書きながら学べるのがわかります。
サイトの見た目もわかりやすくて使いやすいし、初心者から基礎を学ぶには良さそうですね。
『ドットインストール』で独学してみた
無料で学べるということで、さっそく『ドットインストール』を試してみました。
結論からいうと有料会員（月額1,080円）にならないと、仕事できるようなプログラミングスキルは学べないです。
とはいえ、1,080円（税込）で1ヶ月間は学び放題。時間があるタイミングでガッツリ学んで退会するのもOK。また学びたい時は入り直せるので、コスパはいいですね。
無料で試した後、1ヶ月間の有料会員になって学んでみたいと思います↓
レッスン①Web制作の流れを体験しよう（無料動画）
まずはHTML/CSSのさわりだけ、無料動画で学べます↓
用意された動画の通りやってゆけば、簡単なプロフィールページを作ることができます。
いちばん初めに学ぶべき『HTML』と『CSS』のお試し、って感じですね。
初心者すぎて何だかよくわからなくても、言われた通りマネすれば同じものが作れることがわかります。
【学習ポイント】
●コードを書いてどう変わるか試してみよう
●いろいろなタグを知ろう
初めはあくまで「お試し」って感じですね。
レッスン②学習環境を整えよう（無料動画）
次に、これからプログラミング学習をする上での学習環境を整えます。
ここでコードを書くエディタも導入できます。
Windows編とmacOS編があります。ウィンドウズかマックか、それぞれ自分の環境に合った動画を見てマネしてくだけなので簡単ですね↓
無料で見れるのはここまで。これから『ドットインストール』でガッツリ学んでくなら有料のプレミアム会員になる必要があります。月額1,080円。
僕は『テックアカデミーの無料動画講座』を見ても『CSS講座』がよくわかりませんでした。なのでドットインストールの方でプレミアム会員になって勉強を進めます。
もっと詳しくHTML/CSSを学んでみよう（ここから有料）
プレミアム会員になったら、見れなかった次の講座へ進めます↓
＞＞＞詳解HTML 基本タグ編
あとは順番に見ていって、HTML/CSSの基礎を学んでいくだけです。
初めの『詳解HTML 基本タグ編』は27本の動画があって、学習内容はこんな感じ↓
- HTMLファイルの作り方
- 見出し・段落・字下げ・コメント
- 画像の入れ方
- リストと表の書き方
- リンクの貼り方
- セクションの区切り方
- 目次の作り方
- ヘッダーとフッター
- metaタグ・タイトル・ファビコンについて
- 他、いろいろなタグ
- HTMLの仕様を確認する方法
実際にやってみると、動画のマネをして手を動かしながらコードを書いてくので「自分でプログラミングしてる」感があっていいですね。
間違っていても、お手本のコードと自分の書いたコードを簡単に比べられます。一目で違う箇所がわかるので便利。
なるほど、初心者がプログラミングを学ぶなら「ドットインストールがいいよ」といわれるのも納得。どんどん学んでいける感じがしますね。
動画学習する前に、動画の操作は知っておいた方がいいですね。
画面左下にある再生ボタンは反応が悪いです。なので使わないようにしましょう。
再生・停止は画面をクリックか「Enterキー」&「Spaceキー」でもできます。
あと、「←キー」で5秒逆戻し。「→キー」で5秒早送りです。
この動画操作を知っておくと、めちゃめちゃ効率アップします。
同性の声の方が集中できる
プレミアム会員だと、男性の声か女性の声か選べます。
一度切り替えて女性の声にしてみました。良い声で聞き取りやすいのですが、かわいい印象すぎて…。気が散る感じがしたので、勉強に集中するために男性の声に戻しました。
同性の声を選んだ方が学ぶには良さそうですね。
動画スピードも変えられる
プレミアム会員なら動画再生スピードも変えることができます。
コードをマネして書きながらだとしょちゅう前のシーンに戻りながら見ることになるので、スピードを0.8倍くらいまで落として見るのがいいですね。
スピードを上げて見るのは確認の時くらいでしょう。
あとは順番にやってくだけ
引き続き、用意されたコースを順番にやっていきましょう。
1回見てわからなくても、2周3周してくうちに『HTML』と『CSS』が使えるようになってきます。基礎をじっくり学んでいきましょう↓
詳解HTML フォームタグ編の【学習内容】↓
- お問い合わせフォームの作り方
- チェックボックス・ラジオボタンの作り方
- ドロップダウンリスト・リストボックスの作り方
- ボタンの設置
- いろいろな入力部品を知っておこう
詳解CSS 基本スタイリング編の【学習内容】↓
- CSSの基本的な書き方
- ボックスモデルについて
- パディング・ボーダー・マージンの入れ方
- ボックスの丸め方・影のつけ方
- 親要素の継承について
- フォント指定について
- sectionの使い方
- CSSの仕様の調べ方
- 開発者ツールの見かた
詳解CSS 応用スタイリング編の【学習内容】↓
- ブロック要素とインライン要素
- classの使い方
- position指定
- さまざまなプロパティ
- リンク・ボタン・リストのスタイリング
- calcの使い方
- 単位のemとrem
- 色の指定とカラーピッカーついて
- まとめて指定できるCSS変数について
＞＞＞詳解CSS セレクター編
詳解CSS セレクター編の【学習内容】↓
- セレクターの種類
- 要素型セレクターとclassセレクター
- idセレクターと全称セレクター
- 属性セレクター
- セレクターを組み合わせて使う
- 疑似要素の使い方
- 疑似クラスの使い方
- 詳細度の仕組みによって優先されるスタイル
ここらへんから難しくなってくるので、必要になった時に見直すといいです。
詳解CSS フレックスボックス編の【学習内容】↓
- フレックスボックスのいろいろなプロパティと動作
- フレックスボックスを使ったレイアウト
一回見ただけでは理解できないので、必要になってきたら都度見直すと良さそうですね。
詳解CSS アニメーション編の【学習内容】↓
- Web上のアニメーション表現
- Chromeのデベロッパーツールでのアニメーションの調整
- 高度なアニメーションの作り方
詳解CSS レスポンシブウェブデザイン編の【学習内容】↓
- レスポンシブウェブデザインについて
- 画面サイズに合わせてレイアウトを変えるやり方
Webサイトをゼロから制作してみよう
ここからは学んだことを実践です。まずは自己紹介のポートフォリオサイトを作っていきます↓
次に、アプリの紹介ページを作りつつ「Emmet」で省略する書き方に慣れていきましょう↓
Webサイトを公開してみよう
ひとまずこれで『HTML』と『CSS』の基礎は終わりです。引き続き、興味あるプログラミング言語を学んでいきましょう。
ドットインストールの勉強方法 まとめ
プログラミングを始めるなら「まずはドットインストールの動画で勉強するのがいい」ということがわかりました。
無料動画だけではムリですが。有料会員といっても月1,080円。1日30円で有料動画見放題と思えば安いものです。
HTML/CSSを学んだ後は、そのままJavaScriptやPHPなど他のプログラミング言語もどんどん学んでいける。
まずは『ドットインストール』と『Progate』を両方やって基礎を固めるのがいいですね。毎日少しづつ進めていきましょう。
それに加え『テックアカデミーの無料動画講座』や、以下のようなエンジニアさんのYoutube解説も併せて見ればイヤでもわかるようになってきます↓
地道に学んでいけばいけそうな感じがしてきましたね。