【初心者必見】HTML/CSS入門サイト厳選7選

こんにちは!侍ブログ編集部です!

このブログを書くのにも使用されているHTML/CSS

ホームページを作りたい!

と思ったら、まず学習することになるマークアップ言語といわれるものです。プログラミング言語ではありませんが、ホームページを構成する言語として非常に有名です。とはいっても、

どこから入門すればいいのか分からない…

と、悩まれてる方も少なくないはず。

そこで今回は、「初心者が独学で学習しやすい」「HTML/CSSを駆使してどんなサイトを作るのか?」に焦点を置いて、まずHTML/CSSを扱う人に見てほしいサイトを7個ご紹介します!

HTML、CSSって何?

おすすめサイトを紹介する前に、HTML、CSSについて簡単に説明します。

HTMLとは?

HTMLとは、テキストボックス、文字、表、画像、リンクなど、WEBサイトに必要な部品を配置するための言語です。HTMLに関しては以下で詳しく説明していますので、ご興味ある方は↓こちらをぜひ御覧ください!

CSSとは?

上で話したHTMLの部品に対して、色、罫線、文字のサイズなど装飾を付けるのがCSSです。HTMLとCSSに関してもっと詳しく知りたい方は↓こちらをぜひ御覧ください!

HTML/CSS入門サイト厳選7選

次に、おすすめの学習サイトをご紹介したいと思います。独学で勉強するならまず、「動画」「スライド」で学ぶことをお勧めします!

その理由はコチラで詳しく解説していますので、↓こちらをご覧ください。

プログラミングの独学は無理?挫折する3つのポイントと対処法を伝授
更新日 : 2019年5月22日

1. ドットインストール

1

引用元:ドットインストール http://dotinstall.com/

こんな人におすすめ

  • WEBデザインなども学びたい
  • じっくりコースで体系だてられた動画授業を受講したい

いいところ・特徴とは?

初心者~上級者まで幅広い人を対象にしています。授業を一通り見てから授業で扱ったコードを実際に書いて試す…といった学習も可能です。

なお、980円(税込)/月を払うと女性のナレーションで動画授業を受けられるほか、テキスト化されたものをみることも可能です。特に「女性に声をかけられると頑張れちゃう!」と言う人は、ぜひ有料プランをお試しください

2. Schoo! Web Campus

2

引用元:schoo http://schoo.jp

こんな人におすすめ

  • WEBデザインなども学びたい
  • じっくりコースで体系だてられた動画授業を受講したい

いいところ・特徴とは?

こちらのサイトでは、WEBデザインの理論やCSSの書き方などをライブストリーミングの動画で提供しています。分からないことがあればチャットから授業中の講師に向けて質問をしたりメッセージを送ったりすることも可能です。

広告の制作などの話も授業として行われることがあり、単にHTMLを書く、といった以上のものを学ぶことができる、長期的に役立つWEBサイトです。980円(税込。2018年11月10日現在)を支払うことで、録画授業も視聴可能に。

なお、HTML/CSSを体系的に時間をかけて学習するコース「ターミナル」も使用可能になるので、じっくり・しっかりとHTMLを学びたいということはぜひ試してみてください。

3. paizaラーニング

paizaラーニング

引用元:paizaラーニング https://paiza.jp/works

こんな人におすすめ

  • 動画を見ることが好きな人
  • 自分の実力を確認しつつ、学んでいきたい人

いいところ・特徴とは?

ドットインストール、Schooと同様に動画で学習することができるWEBサービスです。スキルチェック機能があり、自分がどの程度実力があるのか確認しながら学習を進めることができます。

また、スキルチェックの結果はランクとなり、このランクを転職時のポートフォリオとしても利用できます。将来エンジニアやプログラマーを目指している方にもおすすめです!

4. ShareWis

3

引用元:Share Wis https://share-wis.com/

こんな人におすすめ

  • iPadやAndroidなどで学習する人
  • 出先でサクッとスキマ時間に学習を進めたい人

いいところ・特徴とは?

短い動画授業(5分程度)と、動画授業後の簡単な復習質問がセットになった動画授業アプリ。HTMLという慣れない言語の入門を楽しくしてくれること請け合いです。

5. Progate

progate

引用元:Progate https://prog-8.com/

こんな人におすすめ

  • とにかく楽しんでプログラミングをしたい人
  • アウトプットの達成感を感じながら継続したい人

いいところ・特徴とは?

パワーポイントのようなスライド形式で内容確認後、実際に手を動かして課題を解いていくため、とにかく楽しんでプログラミングを学ぶことに特化した学習サービスです。

アカウントにはレベルがあり、学習を進めていけばいくほどレベルが上がっていくためゲーム感覚で気づいたら知識が身についています。とても楽しく進めることができるのでおすすめです!

6. codeprep

codecrep1

引用元:codeprep https://codeprep.jp/

こんな人におすすめ

  • スライドを見ながら学習を進めたい方
  • 一問一答で着実に覚えていきたい方

いいところ・特徴とは?

今までご紹介させていただいたサービスとは異なり、穴埋めテスト形式でプログラミングを学習することができます。2018年3月でサービス終了予定でしたが、利用ユーザーから終了しないでほしいとの声が多く、2018年9月迄サービスが延期になったことで話題にもなりました。

そしてさらに、ユーザーからのラブコールに応えて無期限延長となったのです。いつでも見れるって最高ですね!自分の知識が定着しているか、確認しながら学習することができるのでとてもおすすめです!

7. HTMLクイックレファレンス

4

引用元:HTML クイックリファレンス http://www.htmq.com/

こんな人におすすめ

  • 具体的にタグの使い方を知りたい
  • どこがバグだかわからないがHPが動かない…という方

いいところ・特徴とは?

こちらのサイトは、HTML/CSSのタグを調べられる便利サイトです。リファレンス的な要素が強いですね。タグを書いたけど動かない、といった際にはぜひ活用してみることをお勧めします。

スペルミスであったり、使えないプロパティを設定していたりといったことがすぐにわかるはずです。HTMLを書き始める入門のタイミングには使えないかもしれませんが、慣れてきたら利用してみてください。

HTML/CSS初心者におすすめの本

WEBサービスやサイトはネット環境さえあればどこでも読めるため、とても便利ですよね。

ただ、本は重要な要素をまとめて読みやすくなっているケースが多いため、本を活用するのもおすすめです。HTMLの本に関しては、以下でまとめていますので興味がある方はぜひ!

HTMLを学ぶのに最適な本を5冊紹介する
更新日 : 2019年5月16日

最後に

まずはとにかく書くことからです。最初は、わからないことだらけで、苦労することが多いですが、「とにかく書くこと」でそのうち慣れてきます!

学び始める際には、まずは簡単なサンプルコードをまずは騙されたと思って書いてみることをお勧めします。比較的学習コストも低いほうなので、慣れてしまえば数か月で立派にHTML/CSSSを書いてHPを作れるようになります。

まずは、書くこと。これが重要です。

現役フリーランスエンジニアによる無料体験レッスン実施中!

もし、あなたが、

  • 経験、年齢、学歴に不安がある
  • 挫折しない学習方法が知りたい
  • アプリ開発で困っている
  • エンジニアの”生”の声が聞きたい!
  • 仕事獲得の仕方がわからない
  • エンジニアに転職したいが何をすればいいかわからない

など、プログラミング学習やキャリアのことでお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像から詳しいサービス内容をご確認ください。

cta_mtm3

LINEで送る
Pocket

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説