【簡単】 HTML CSS 独学方法 ５選＋１！オススメコンテンツを紹介します 個人投資家のFIREへの旅路 第176夜
WEBデザイナーの仕事において、コーディングができることは強みです。
会社によっては、兼任であることも多いでしょう。
コーディングの基礎となるのが、HTML・CSSです。
HTMLってプログラミング？どこから始めればいいの？
英語と記号ばかりで意味がわからない！！
何を使って学ぶのが効率的なのかな？
こんな皆さん（昔の私）に向けて、HTML・CSSの独学方法と、概要を解説します！ 自分に合いそうな方法からまずは始めてみましょう！
【HTML CSS 独学方法 ５選】
独学のツールを紹介します。このツールが、HTMLに限らず、プログラミング全般に使える方法になります。
・アプリ
・書籍
・動画
・Google先生
・アウトプット
＋ 番外編
＜ アプリ ＞
スマホで気軽に学べて、隙間時間を有効活用できるのが、アプリでの学習です。
オススメ！「Progate」
Progate ：様々なプログラミング言語に対応していて、コードエディタのインストールなども不要でProgate上で、実際にコードが書けます。アプリ版では、虫食い問題のようになっていて、より気軽に学習できます。隙間時間を使って賢く学習できます。
メリット： 無料で学べる（無料レッスン１８コース） スマホアプリ版で隙間時間に学べる 取り組みやすいレベルから始められる
デメリット： 深く学びたい場合は有料になる あくまでも入門という位置付けである プロゲートのみで実案件に臨むのは難しい
初心者が通るプロへのゲートです！
無料で様々な言語の全体像を学ぶことができます。有料版では、さらに多くのレッスンが受けられます。月額1078円となっています。集中して1ヶ月でこなせば、1078円で完了ですね！笑
しかし、あくまでも、入門といったところです。Progateをひたすらクリアすることにハマる人もいますが、これは、時間が勿体無いです。サクッと基本を学ぶ、復習するようなイメージで使いもましょう！
＜ 書籍 ＞
腰を据えてじっくりと学べるのが書籍です。自分のレベルの合わせて書籍を選ぶことが大切です。
メリット： 正しい情報が得られる 順を追って体系的に学び進めることができる 手元に置いておくことで辞書的にも使える 持ち歩いて隙間時間でも勉強できる
デメリット： 不明点が出たときに自分で調べる必要がある 電子書籍の場合に読みにくい物もある 情報が古くなる 読むだけでは身になりにくい
オススメ！「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」
親みやすく、見やすいレイアウトで、WEBデザインの基本から、HTML・CSSの実装まで学ぶことができます。
前半で、基礎や、考え方を学び、後半で、実際に手を動かして本当の意味での学習ができます。
やはり、HTML・CSSの学習はコードを書いて実際に作ることが１番の学習となります。
＜ 動画 ＞
百聞は一見しかず。これにつきますね。実際に作業している様子を見ながら手を動かすことで、実践的な学習ができます。
メリット： 実際にコードを書く様子を見ながら学べる 無料のコンテンツも充実 動画の講師への質問が可能の場合もある
デメリット： 情報が古い物がある 一定の通信環境が必要となる 有料の教材が必ずしも良いとは限らない
オススメ！ 「Udemy」（有料）
数十時間に及ぶ学習コースがたくさん用意されています。プログラミングに限らず、様々なジャンルの学習コースがあります。網羅的に学べるものから、ひとつのテーマに沿ったもの、制作物の作りながら学ぶものなど、コースによって特徴があるので、じっくりと選びましょう。
通常価格は、24000円（10時間）などというコースが大半です。定期的にセールがありますので、その時に気になるコースをまとめ買いしましょう！セールで買えば、80%〜90%オフで買えちゃいます。もはや昔のミスド状態です。
＜POINT＞ 情報が古いコースもあるので、そのあたりもチェックしましょう！ 買ってから後悔のないように！！
オススメ！ 「YouTube」（無料）
・玉袋浩二の知恵袋ちゃんねる 初心者にオススメなのは、玉袋浩二さんの動画です。この玉袋さん自身も初 心者なので、初心者の気持ちがわかっているので、解説が丁寧です。そし て、何よりトークがおもろい！ これ重要です。ただただ解説だけだと眠くて耐えらないのは正直なところですから。
・アキユキ/ Webデザイナー戦略室 こちらでは、サーバーの仕組みや、デザインの概念、レイアウトの組み方など実際のデザイナーさんがどうやってWebサイトを作っていくところも公開されていて有益情報満載です。特に、WordPressの情報は超有料級と言えるでしょう。
東京フリーランス フリーランス集団、東京フリーランスのチャンネルです。有名なデイトラという有料の学習コンテンツも取り扱っています。ここでは、プログラミングの考え方や、エンジニアのリアルを知ることができる動画があります。特に、とだこうき氏の営業マンからエンジニアへの話はモチベ上がります。
たにぐちまことのともすたチャンネル Udemyの講師でもある、たにぐちまこと氏のチャンネルです。様々な言語に精通していて、ただただすごいなこの人って感じです。有料級の動画たくさんあり、Udemyのコースを受講しているかのようです。語り口が柔らかいので、優しい気持ちで学習が進みます。
動画は、無料でも有益な情報が豊富です。体系的に学ぶことも可能ですから、まずは、YouTubeで学ぶのも全然ありです。
＜ Google先生 ＞
これはもう、ググれ！ってことですね。
メリット： 検索力が上がる 自ら調べて答えを得たことは身に付く 応用力が付く
デメリット： 体系的な学びができない 答え発見までに時間を要することがある ジャストな情報がない可能性もある
この方法は、上記の３つの独学方法と組み合わせて使うと効果絶大です！
書籍にしろ、動画にしろ、やっぱりわからないところは出てきます。ここで、調べることが重要です。どういったワードを検索すれば、答えを得られるのか？こう考えることが、検索力アップに繋がります。
そして、ネットの情報は、必ずしも、自分のやりたいことにジャストな情報ではありません。ネットの情報を元にして、自分の場合はここのコードをこう書き換えると実装できそうだとか、考える必要があります。これが応用力につながります。
正直、コピペで完了！っていうコードがあったとしても、理解をした上で、コピペしないと思うようには動きません。どうやったらうまくいくのか、自分でググって、自分で考えて、実装すること！これが最高の学習となります。
＜ アウトプット ＞
学習は、アウトプットまでが学習です。
オススメ！ 「note」
メリット： 無料で利用可能 WEB制作、デザイン関連の記事も多数あり学習できる 継続させてくれる機能がたありアウトプットが楽しめる WEB制作での必要なライティングの力が付く
デメリット： noteの更新が目的となると本末転倒
重要なのは、アウトプットです。学んだことは、インプットには、アウトプットが内包されていると考えましょう！
アウトプットすることで、「わかったつもり」だったことに気付きます。本当に理解に近づくには、誰かに説明しみることが効果的です。自分が理解しいないことは、説明ができません。アウトプットする際に、理解しきれていないことは、復習することで、学習が身になるのです。
noteは、こういったアウトプットを楽しくしてくれる機能が満載です。しかも無料です。アウトプットツールに使いましょう。
【HTML CSS 独学 外伝 】 模写コーディング
５つの独学方法と、オススメのコンテンツを紹介しましたが、どれも「学習」をするツールです。
知識を入れたり、全体的に学んだり、ある制作物を作ることに特化していたりします。
これらの学習を通してまずは「知っている」状態になったので、
次は、「使える」状態に持っていくことが必要です！
そのための最強の方法は、「模写コーディング」です。
模写コーディング ：既存のWEBサイトのデザインをそのまま自分でコーディングする学習方法。
メリット： 実戦的なコーティングの力がつく 問題解決力がつく 応用力がつく レイアウト、デザインを体感で学ぶことができる
デメリット： わからないことが出てくると時間がかかる 模写するサイトの難易度が高すぎると挫折する
模写コーディングは、実際のWEBサイトを見ながら自分なりにコードを書いてきます。
いくつか必要なツールがあります。
＜模写コーデイングに必要なツール＞
・テキストエディター
・Google Chrome
・What Font
・Image Downloader
・Page Ruler
・Color Picker
＜テキストエディター＞
もう入っていると思いますが再度ご紹介。
推奨はVisual Studio Codeです。
・日本語対応
・コード予測変換
・多様な言語をカバー
・豊富なプラグイン
＜ Google Chrome ＞
こちらは、Visual Studio Codeで書いたHTMLファイルをテスト表示するためにも必要です。
そして、もっと重要なのが、拡張機能を使うために、GoogleChromeを推奨です！
＜ Google Chrome 拡張機能＞
Googleウェブストアから、様々な拡張機能をインストールすることができます。簡単に使えて、無料なので、まずは、インストールしてみれば、説明不要で使えるでしょう！
＜オススメ拡張機能＞
模写コーディングをする上で、模写するサイトの画像や、テキストのフォントなどの情報を取得できるツールは必須です！
・What Font
テキストのフォントを表示してくれます。
インストールしたら Google Chromeの右上あたりに拡張機能のアイコンが表示されます。表示されない場合は、「パズルのピース」のようなアイコンをクリックしてみてください。
↓ ①右上のアイコンをクリック
↓②テキストの上にマウスポインターを置くとフォント名が表示される
↓③さらにクリックすると詳細情報が表示されます
・Image Downloader
WEBサイトの画像ファイルをまとめてダウンロードできます。
↓①右上のアイコンをクリック
↓ ②Select allにチェックを入れれば一括でダウンロード完了！
・Page Ruler
要するに定規です！
↓①右上のアイコンをクリック
↓ ②上にバーが表示されます
↓ ③計測したい要素の範囲をビヨーンとドラッグすると、上のバーにwidthなどの数値が表示されます。
・Color Picker
色を情報を取得します。
↓ ① 左上のアイコンをクリック
↓ ② 色を調べたい要素にカーソルを持っていくと、色コードが表示される
＜拡張機能 まとめ＞
これらの拡張機能は一部なので、色々と試してみるのも楽しいですね。
非常に簡単に、欲しい情報が得られるので、使い倒しましょう！
【 模写コーディングのやり方 】
拡張機能を使いながら、必要な情報を得ながら、コードを書いていきましょう！
模写コーディングのポイント
・まずは自分なりにコード書いてみる
・わからないことが出てきたらググる
・ググってもダメなら、「検証」機能でコードを見る
＜自分で書く・調べる・答え合わせする！＞
模写コーディングは、「知っている」状態から、「使える」状態に持っていく学習です。
始めは、あれ？どうやるんやっけ？の連続です。
これで良いんです！
ここで、改めて調べることで、知識が上塗りされて、より分厚くなっていきます。そして、いつの間にか身になります。
わからないなりに手を動かし、なんとか形にしてみましょう！
コーティングには様々な手法があるので、目的達成の道のりは様々ということです。始めはキレイなコードは気にしすぎない方が良いと思います。
【HTML CSS 独学方法 まとめ】
HTML CSSの学習の流れをまとめます。
① Progateで基礎を知る！
② 書籍でデザインの概念や、HTML CSS知識を得る！
③ 動画で手を動かして真似してコードを書く！
これらに並行して、
④ Googleでわからないことは自分で調べる！
⑤ noteに学んだことを人に説明するようにアウトプットする！
なるべく早い段階から、
模写コーディングをやっていく！
こういった流れになります。
これで間違いなく、HTML 、CSSは身に付きます。
今は、訳のわからない文字の羅列が、WEBサイトの設計図に見えてくるようになります。
これは嫌でもそうなるので、安心ください！
必要なのは、「継続」「行動」です。
今日が人生で一番若い日です！今日始めるのが、人生で最速！まずはやってみよう！！
この記事が気に入ったらサポートをしてみませんか？