|
「Web制作を始めたい」 「まずはHTMLとCSSを勉強したい」 「ドットインストールという学習サイトで無料で始められるらしい」 |
今やWeb制作は人気の職業なので始めてみようと思う人が増えています。
ドットインストールという学習サイトも知られるようになり、気になる人も多いでしょう。
Web初心者がはじめてのHTML と CSS（無料）をやってみた感想です。参考にしてください。
はじめてのHTML と CSS
ドットインストールのレッスン一覧からドットインストールが提供する学習コースの一覧が見れます。
コース詳細はいずれまとめ記事に書くとして、「ウェブサイトを作れるようになろう」で学ぶHTMLとCSSのうち、無料で受けられる以下を受けてみました。
- 学習環境を整えよう（Mac）
- はじめてのHTML
- はじめてのCSS
レッスン内容
レッスンは動画です。
動画で解説されている通りに自分のPC環境でマネして学ぶスタイルです。
ドットインストールの特徴をまとめるとこんな感じです。
（利点）
- 開発環境の設定から実際現場で使用する開発環境で学習できる
- 動画の解説通りにマネすることで学習できる
- 1レッスンの動画の長さは平均2分と短いので集中できる。
- 他のユーザーの「質問と回答」を見れる
- レッスンに必要な素材は提供されている
- 分からないことを質問できる（有料）
初心者にやさしい学習サイトです。
最初のレッスンはプログラミング環境、デバッグ環境の設定です。
以下のツールをインストールします。
- Visual Studio Code（通称VS Code）
いろんなプログラミングができるコードエディタ - Google Chrome
最も人気のWebブラウザ。Web制作のデバッグやプレビューで使う。
VS Codeでコードを入力し、
Google Chromeで表示確認、パラメーター確認、デバッグ等を行います。
学習した項目は一覧で確認できます。
レッスンを完了したら手動で「完了」に設定します。
無料のHTMLとCSSのレッスンの以下ですが、Web制作”は”ほぼ初心者の僕がこのコースにかかった時間は3時間です。
- 学習環境を整えよう（Mac）
- はじめてのHTML
- はじめてのCSS
というのも、無料会員だと動画の速度を変更できません。
また、別の学習サイト、Progateでの解説と一部異なるコードの使用があったので、気になって調べたりしてたので時間がかかりました。
例えば、Progateだと項目の横並びにfloatを使いますが、ドットインストールだとflexboxを使うといった違いです。
最終的にはじめてのHTMLとCSSのレッスンでできることは以下までです。
学んだマークアップと手順はだいたいこんな感じです。
- 新規ドキュメントから基本のHTML構造、head、body
- body内に大グループ（header、selection、footer）
- header内にグループ（div）とクラス分け
- section内にグループ（section）
- イメージと文字列（img、p、h1）
- リンク作成（a href、img src）
- 要素と横並び（ul、li、display: flex）
- CSSでテキスト、背景を装飾
- CSSで各パーツの位置調整（padding、margin）
- CSSで円作成（border-radius）
Progateの初級と同程度の基本的な内容です。
次に「もっと詳しくHTML/CSSを学んでみよう」と進みます。
レッスン6から有料です。（2020年6月）
感想 はじめてのHTML と CSS
初心者にやさしい学習サイトです。
最初のレッスンで丁寧に開発環境のセットアップを解説してくれてるので、初心者でも一人でドットインストールでプログラミングを始められます。
これでも難しいと感じる人は超初心者向けの学習サイト、Progateで始めるといいでしょう。
ただ、現場と同じ開発環境、ツールに早くから慣れておくと以下のメリットがあります。
- ツールの使い方も覚えられる
- ショートカットキーを自然と覚えられる
- マークアップ作業を高速で出来るようになる
他サイトの口コミでは「ドットインストールは難しいからProgateから始めることをオススメ」といった意見もありますが、なるべく早く現場の開発環境、VS Code、Google Chromeで学習するのが良いです。
また、レッスン内容の分からない点を質問できるのも大きいなメリットです。
試しに「floatとflexboxの違い・使い分け」でも聞いてみようと思ったのですが、ググったら答えが出てきたのでやめました（基本的にググれば分かります）。
（有料会員になりますが）以下順番で学習を進めるのがおすすめです。
- ドットインストールで学習
- 不明点をドットインストールに質問して理解
- Progateの道場コース
- つまづいたらProgateも学習
解説動画でも説明されていたVS Codeの以下ショートカットキーは頻繁に使うでしょうから、早く使って体に覚えさせた方がいいです。
- [option] + “↑” or “↓”：選択範囲のコードをコピー
- [Shift] + [option] + “↑” or “↓”：選択範囲のコードを移動
- [Cmd] + “/”：コメント入力
なお、言うまでもないですが、このはじめてのHTML と CSSで学べる内容はWeb制作の勉強の入り口です。
まだ入門者のレベルなので、Web制作をきちんと学習するには有料版の登録が必須です。
なお、Web制作でAdobe製品（XD、Dreamweaver、Adobe Photoshop、Illustratorなど）を使う場合はAdobe Creative Cloudが必要です。
社会人やAdobeオンライン講座を受けたい場合はヒューマンアカデミーから購入するとお得です。
例えば、Dreamweaverのオンライン講座はこんな感じです。
たのまなの講座ではHTML & CSSの説明がないので、ドットインストールのHTML と CSSのコースと一緒に勉強するとDreamweaverでもWebサイト作成ができるようになるでしょう。
