HTML/CSSの学習に役立つ初心者向けのサイト・オンラインサービスを紹介します。
とりあえずHTML/CSSを触ってみたいという人は、下で紹介する無料のオンラインサービス「Progate（プロゲート）」や「ドットインストール」をやってみるのがおすすめです。
HTML/CSSを独学で体系的に学びたい人は、有料サービスですが「Udemy」や「Schoo」がおすすめです。
ここで紹介しているサービスをすでに知っていて、物足りなかった人や、すぐに就職・転職できるくらい実践力をしっかりつけたい人は、Webデザインスクールに通うのがプロへの最短距離となります。
（無料）初心者向けHTML/CSS解説サイト
「HTML/CSSをとりあえず触ってみたい」「どんなことができるのか知りたい」という場合に便利な解説サイト・サービスを4つ紹介します。
Progate（プロゲート）
Progate（プロゲート）は登録が必要ですが、パソコンとネット環境があればソフトをダウンロードすることなく、HTML/CSSをさわれるのが便利です。
スライド学習をしてからWeb上のエディターにコードを書いて学習します。スマホ・タブレットで動くアプリ版は、コードを打ち込まないで学習できるので、場所も時間も選びません。
ただ、無料版で受講できる講義は限られており、全講義を受けるには有料登録が必要（980円/月）です。
CODE PREP（コードプレップ）
Codeprep（コードプレップ）もブックと呼ばれるスライドを読みながら手を動かす形式のプログラミング学習サイトです。2018年9月30日(日) にサービス提供中止予定でしたが、無期限延長公開されており、今でも利用できます。
（Codeprepのブック）
利用には登録が必要です。コード入力にエディターを必要としないのはProgateと同じですが、Codeprepはスマホ・タブレットには対応していません。
有料登録はなく、全てのブック（講義スライド）を無料で学ぶことができます。
ドットインストール
ドットインストールは、動画をみながら手を動かすタイプのHTML/CSS学習サービスです。有料会員と無料会員の区別がありますが、登録しなくても動画閲覧はできます。
コードを書くエディターなどの学習環境は自分で用意する必要があります。
無料会員になると、講義画面にメモを取れるようになり、有料会員（プレミアム会員）になると、中・上級者向けのレッスンを閲覧できるようになります。文字起こしやソースコードのダウンロードが可能になるのも有料会員です。
Tech Academy YouTubeチャンネル
https://www.youtube.com/channel/UC7WHt6e6SnAAeCrSyNDZ5Iw
オンラインプログラミングスクールTechAcademy（テックアカデミー）のYouTubeチャンネル。再生リストを表示するとHTML/CSS学習動画のリストがあります。
動画を見ながらの学習になるので、エディターなどの学習環境は自分で用意する必要があります。
再生速度の変更は0.25倍から2倍まで変更が可能です。字幕の利用も可能ですが、自動生成字幕なので動画とズレが生じる場合があります。
（有料）スクールより安いのに充実度がすごいおすすめサービス
HTML/CSSを部分的な知識ではなく、体系的に学びたいという人は、こちらで紹介する有料サービスがおすすめです。
当然ですが、無料サービスより質は高いです。
Schoo
https://schoo.jp/class/category/web_design/
Schoo（スクー）は、オンライン予備校のような動画学習サービス。各分野のエキスパートが行う講義を閲覧することができます。
利用には登録が必要です。無料会員登録でも、生放送授業の閲覧が可能です。有料会員登録（980円/月：初月無料）すると、プレミアム会員専用の生放送授業の閲覧と録画授業の閲覧ができます。
udemy
https://support.udemy.com/hc/ja
Udemyは動画学習サービスです。オンラインの大学講義を単体で購入できるようなイメージです。各分野の専門家が講師となって動画を販売しています。
Udemyは、自分の興味のあるスキル・知識をピンポイントで学習できるのが最大のメリットです。Webデザイン系なら、HTML/CSSはもちろん、WordPress、グラフィックツールの使い方、各プログラミング言語などが学べます。
1講義2万円以上するものもありますが、年に数度のセールで格安で購入することができます。
知っていると学習がはかどるHTML/CSS参考サイト
HTML/CSSの学習時に知っていると便利な参考サイトを3つ紹介します。独学でもスクールに通う場合でも、この3つのサイトを知っているとかなり重宝しますよ。
HTMLクイックリファレンス
HTMLクイックリファレンスは、HTMLコードの辞書的なサイトです。
アルファベット順にタグを検索できるので便利です。ただし、参考コードが書いてあるわけではありません。慣れるまでは使いづらいかもしれないですね。
teratail（テラテイル）
teratail（テラテイル）は、プログラマーのためのYahoo知恵袋のようなサイトです。プログラミングに関する疑問や困りごとを書き込むと、teratailに登録しているプログラマーから回答がきます。
質問・回答の書き込みには登録が必要ですが、過去の質問に対する回答は登録なしでも閲覧が可能です。
W3C（ダブリューサンシー）
https://validator.w3.org/
https://jigsaw.w3.org/css-validator/validator.html.ja
W3C（ダブリューサンシー）は、HTMLとCSSのコードチェックをしてくれるサイトです。
「あっているはずなのに動かない！」ときは、<div>が閉じていなかったり基本的なコードミスの場合がほとんど。定期的にチェックするとストレスが減りますよ。
CSS HappyLife
http://css-happylife.com/archives/2012/0108_0000.php
CSS HappyLifeは、「Web制作者のためのSassの教科書」の著者のサイト。
HTML/CSSの学習を進めるとSassという記述方式を知ることになりますが、このSassの記述に悩んだら開くといいでしょう。行き詰ったときに参考書かわりに利用するといいですよ。
本気でWebデザイナー目指すならスクールがおすすめ
私は、スクールも独学も経験しました。上で紹介したHTML/CSS学習サービスも利用しましたが、独学だとどうしても時間がかかります。
効率よく実践力を身に付けたいなら、やはりWebデザインスクールでプロに習うのがおすすめです。
現役Webデザイナー講師に現場で使うテクニックも学べる
初心者向けの学習サイトは趣味レベルなら最適ですが、これを続けてもWebデザイナーになれません。
本気でWebデザイナーを目指すなら、基礎力プラス現場で使えるテクニックを身につけ、実績を積み重ねることが重要です。
Webデザインスクールでは現役プロの講師が「今現場で使っているテクニック」「実績を重ねるための学習方法」をしっかり教えてくれます。
独学でも実績を重ねることはできますが、スクールに通った方が、あなたの「なりたい」道への道筋がハッキリしやすいです。独学だと、自分のやっていることが正しいのか、実践と繋がっているのか、が見えませんよね。
「余計な寄り道をせずにWebデザイナーになりたい」と考えているなら、Webデザインスクールの利用を検討したほうがいいです。
ほとんどのスクールがオンライン講座に対応していますし、無料体験できたり、現役エンジニアからアドバイスをもらえたりします。就職・転職サポートもあるので利用価値は高いです。
コメントを残す