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 中級編
  • HTML & CSS 上級編

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

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

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

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

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

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

Progate

HTMLとCSSの独学に役立つ学習サイト【リファランス】

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

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

HTMLクイックリファレンス

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

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

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

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

スタイルシートリファレンス

サルワカ

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

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

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

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

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

サルワカ

Web Design Clip

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

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

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

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

Web Design Clip

HTMLとCSSの独学に役立つ参考書

僕は最初に色々な初心者向けの参考書を調べてから、本よりもオンラインの方がお得だったのでProgateで学習することにしました。

基礎学習で参考書を使わなかった理由は、Progateの基礎編とかぶる箇所が多かったからです(お金をかけてまで買う必要はないと思いました)。

ただ参考書が必要がないわけではなく、読んでおくとWEBの知識をつけるのに役立つものがあったので紹介します。

HTMLとCSSを独学で勉強する方は、WEB全般に関する本が役立つので読んで欲しいです。

Webデザイン必携


Webデザイン必携。 プロにまなぶ現場の制作ルール84

独学のWEB学習で不足する、イラストレーターやフォトショップの勉強に役立ちました

現場ではイラレやフォトショを使うのが一般的なので、そういった現場目線の学習ができます。

また「やるべきこと」と「やってはいけないこと」も明記されていて、終わったころにはWEBデザイナーとして一歩上のレベルになることができます。

Webディレクションの新・標準ルール


Webディレクションの新・標準ルール 現場の効率をアップする最新ワークフローとマネジメント

WEBディレクター向けの本になりますが、WEB全般の知識や現場でどんなことを意識してWEBサイトを作っているかの参考になりました。

WEBディレクターが考えていることがわかれば、実際の業務でも役立ちます。

Web業界の第一線で活躍する著者陣が執筆しているので、より実践的・具体的なことを学習できます。

沈黙のWebマーケティング


沈黙のWebマーケティング −Webマーケッター ボーンの逆襲− ディレクターズ・エディション

WEBサイトを作った後にどう運営していけばいいのか、さらにwebデザインの目的やどうやって広報していくかなどWEBマーケティングを勉強することができました。

WordPressテンプレート「賢威」を手がけている会社代表の著書で、ビジネス書として面白い本です。

あと、TwitterやFacebook、はてブなどのSNSを使った戦略はとても役立ちました。

WordPress標準デザイン講座


WordPress標準デザイン講座 20LESSONS【第2版】

WordPressについては、紹介しようか本当に迷いました。

ただ今のWEB制作はWordPressで作られているWEBサイトも多く、避けて通れないので紹介することにしました。

WordPressに関しては、奥が深く初心者の方には理解できないことも多いのですが、こういったCMSでWEB制作することも覚えておいてください。

内容的に一番わかりやすいWordPressのデザイン参考書ですが、難しかったら現場に出てから勉強してもいいと思います。

WEB制作会社でスキルアップ

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

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

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

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

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

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

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

スポンサードリンク