HTMLとCSSの独学【初心者向け】2週間で基礎が学べる勉強法

本サイトにはプロモーション（広告）が含まれています。

HTMLとCSSを独学で覚えたい。効率よい勉強法や役に立つ参考書を教えてほしい。

システムエンジニアがこの悩みにお答えします。

この記事を書いている僕は、WEBコンサルタント兼SEとしてシステムやマーケティングを担当しています。僕がWEB制作会社に入社する時に、入社条件でHTMLとCSSが必須だったので2週間の独学で覚えました。

HTMLとCSSは一緒に覚えたほうが効率よく勉強できます。

最初はよくわからないと思いますが、自分で手を動かしてWEBサイトを作っていけば徐々に理解できるようになります。

今回は、僕が実際にやったHTMLとCSSの独学勉強法を紹介します。

HTMLとCSSの独学勉強法

HTMLとCSSの基礎を勉強する最も効率的な勉強法は、オンラインの「Progate」を使った学習です。

Progateはオンラインのプログラミング講座で、基礎講座なら無料登録で利用できます。

レベル別に学習できるので、全くの初心者でも無理なく勉強することができました。

HTMLの基礎であるタグから、CSSのプロパティまで段階的に覚えられるので参考書よりも理解度が高かったです。

最新の主流である、レスポンシブデザインの学習ができるのも役立ちました。

これだけで全てをマスターできるわけではありませんが、HTMLとCSSの基礎を理解するには十分です。

基礎ができたら、サンプルのソースを自分で修正してタグやプロパティを覚えると効率的です。色の変更や文字サイズの変更など、自分でコードを変えると早く覚えられます。

Progateで基礎はできますが、HTMLとCSSを使いこなすために参考書やリファランスのサイトも普段から利用するようにしましょう。

HTMLタグやCSSの基本的なプロパティは使っていけば覚えられるのですが、数が多いので調べるためのリファランスサイトをブックマークしておくと便利です。

僕が役立ったHTMLとCSSの学習サイトを紹介します。

HTMLとCSS辞典として参考になるのが、HTMLクイックリファレンスです。

タグやプロパティを目的やABC順に解説しているので、とても使いやすいです。

また、対応ブラウザについても記載されているので、実践でも役立つサイトになります。

HTMLやCSSでわからないことがあれば、とりあえずここで調べれば解決できます。

HTMLとCSSによる様々な要素のデザインサンプルが紹介されているサイトです。

とても綺麗なサイトで、吹き出しやボックスデザイン、見出しまで多数のサンプルがあるので初心者の方にも参考になるノウハウがたくさんあります。

デザインを見ると「CSSでここまで多様なことが出来るのか！」と思わず感嘆するに違いありません。

嬉しいことに、どのサンプルもコピペで使用可能です。

初心者向けというよりは、初中級者以上向けになりますが役立つことが多いのでチェックしてください。

Web Design Clipは、クリエイティブ性の高いWebサイトを集めたギャラリーサイトです。

HTMLとCSSの基礎ではないのですが、サイトデザインの参考になるのでピックアップしました。

自分が気に入ったサイトを「MyClip」として保存することもできるので、作ってみたいWEBサイトがあればチェックしておくと役立ちます。

僕はやったことはありませんが、自分で作ったサイトを提出することもできるそうです。

HTMLとCSSの独学からスキルアップするためには、実践的なデザインやコーディングが必要不可欠です。

独学でもスキルアップできますが、WEB制作会社に就職・転職してHTMLとCSSを使ったほうが効率的に実力を伸ばすことができます。

WEB制作の現場で仕事をすれば、3ヶ月～半年で自在にコーディングできるようになります。

デザインは日々の修練と時代の流れについていく必要がありますが、これも仕事で身につきます。

WEBデザイナーやコーダーは、中小のWEB企業で求人数も多いので基礎が理解できたら現場に出てみて下さい。最初は辛いですが、自分で作ったデザインが世界中の人に見てもらえると感動を覚えます。

IT業界は需要が高く、WEBを主体としている企業も多いので、早い段階からそういった企業でスキルアップするのが得策です。

現場でスキルアップすれば、将来的にフリーランスの道も選べますよ。