【HTMLとCSSの独学】初心者が2週間でWEB制作できるようになれる勉強法

HTMLとCSSは、WEB制作で最も基本となるスキルになります。

WEB初心者でもHTMLとCSS覚えやすいので、独学でも習得可能です。
HTMLとCSSはWEBでは独学で最も習得しやすいスキルで、プログラミング言語に比べて勉強法も簡単です。
HTMLとCSSの勉強法はシンプルで、参考書やWEBサイトの解説書を使えば独学でも簡単に習得できます。

今回は、これからHTMLとCSSを勉強したいという初心者から、HTMLとCSSを独学で勉強中で仕事に活かしていきたい人向けの勉強法を紹介します。

目安として、全くのWEB初心者が1週間~2週間で簡単なWEBページを作ることを想定しています。

スポンサードリンク

HTMLとCSSを独学で勉強する初心者が覚えておくべきこと

HTMLとCSSを独学で勉強する時に覚えておいて欲しいことに、これらの2つはセットで勉強したほうが効率がいいことです。
多くの参考書でもHTMLとCSSはセットで勉強するのが一般的です。
初心者の方には少し理解しにくいでしょうが、HTMLで作ったページの見た目を装飾するためにはCSSが必要不可欠になるからです。

ただ一度に全てを勉強するのは難しいので、初心者の方はまずHTMLとは何かについて覚えるところから始めましょう。

HTMLがわかってきたら、そこからステップアップするためにCSSを勉強するのがおすすめです。

一つ一つのスキルをしっかりと習得してから、次のステップに進むことで挫折を防ぐことができます。

HTMLとCSSはコードの書き方が違うので、初心者の方は一度に両方覚えず一つ一つしっかりと理解することから始めましょう。

最初は暗記の要素もありますが、覚えることは限られているので心配いりません。

HTMLとCSSを独学で始める勉強法【環境構築の方法】

HTMLとCSSの独学で最初に必要になることは、WEBページを見ることができる環境をつくることになります。
HTMLタグなどは参考書で読んで独学で覚えることもできますが、実際に手を動かしながら覚えたほうが効率が圧倒的に良くなります。
そのため、最優先でHTMLとCSSを動かせる環境を作るところから始めましょう。

環境を作るといっても、はっきりいって誰でもできるので心配しないでください。

HTMLを動かす環境構築の方法について、いくつか紹介するので参考にして下さい。

パソコン(ローカル上)で動かす

おすすめ:★★★★★

HTMLは、あなたが普段使っているパソコン上で簡単に実行することができます。

HTMLという拡張子(.html)のファイルを作って、HTMLタグを書いていけばWEBページを作ることができます。

CSSも同じで、やり方としてはHTMLファイルに直接書いたり、CSSという拡張子(.css)のファイルを作ってHTMLに読み込む方法があります。

この辺りは参考書や後ほど紹介するWEBサイトで詳しく説明するので参考にして下さい。

ローカルで動かす場合は、WindowsやMacの違いもないので初心者の方でも簡単にHTMLを動かすことができます。
面倒な作業もなくお金もかからないので、初心者の方に一番おすすめの方法になります。
初心者向けの参考書であれば、HTMLを動かすフローがかいてあります。

独学でも難しくないので、まずは自分のパソコンのローカル上で動かしてみましょう。

レンタルサーバーを借りる

おすすめ:★★★

お金がかかるのでハードルは上がりますが、将来的にWEBの仕事をしたいのであればおすすめしたい方法になります。

レンタルサーバーは、中小企業のWEB制作会社が良く使うホームページ公開用のサーバーになります。

HTMLとCSSの勉強だけであれば、正直に言うと無理にレンタルサーバーを借りる必要はありませんがメリットもあります。
レンタルサーバーを使うことでWEBの仕組みが理解できるようになるので、就職や転職に必ず役に立ちます。
実際にインターネット経由でHTMLの動き確認ができるので、ただパソコンで勉強するよりもためになることが多いです。

一緒にFTPの使い方などを覚えれば、より実践的なWEBの勉強ができます。

今はコストが安いレンタルサーバーも多く、個人で借りてブログを作っているWEBデザイナーも増えています。

スポンサードリンク

HTMLとCSSの独学におすすめの学習サイト【入門レベル】

HTMLとCSSの独学は、参考書を使っての勉強かネットの学習サイトを使っての勉強がおすすめです。

最近はネットの学習サイトも動画を使ったわかりやすいものも多いので、初心者の方はそういったサイトを利用しながら勉強してみて下さい。

独学でもできるHTMLとCSSの初心者におすすめの学習サイトと参考書を紹介します。

HTMLとCSSは基礎がわかれば、独学でも学習スピードを一気に伸ばすことができます。

ドットインストール

3分の動画でマスターできるが売り言葉の、体系立てられたWEB学習サイトです。

HTMLとCSS関連の講義は充実しており、ただHTMLとCSSを学ぶだけでなく、実際に制作物を作ることを目標としています。

そのため、より実践的な技術を身に着けたい人におすすめと言えます。

実際に制作物を作ることで、HTMLとCSSのスキルを上げることができます。

しかし、HTMLやCSSでどんなものを作れば良いかわからない人も多いでしょう。

そんな制作物の例が浮かばない初心者の方にも、ドットインストールは便利です。

ドットインストール

ほんっとにはじめてのHTML5とCSS3

HTMLとCSSについての根本的な仕組みから解説しているサイトです。

HTMLやCSSのファイルを置いておく場所や、その呼出の仕方など事細かく解説されており、かゆいところに手の届くサイトと言えます。

あまり使わないテクニックもありますが、全体的に初心者向けに良くまとまっているHTMLとCSSのサイトです。

ほんっとにはじめてのHTML5とCSS3

サルワカ

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

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

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

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

サルワカ

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

ウェブ上のCSS辞典として参考になるのが、スタイルシートリファレンスです。

ほとんどすべてのプロパティを解説しており、どのブラウザが対応していないかまで掲載されています。

擬似クラスなどの解説もあり、使いこなせればデザインの幅は大きく広がるでしょう。

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

Progate

ステップ形式で、実際に自分でコードを書きながら進めていくことができるのがProgateです。

映像や本だと集中力が続きにくい人でもProgateなら実際に制作物が完成していく過程を楽しみながらコードが書けるので、飽きっぽい人におすすめと言えます。

HTMLの講義はCSSとセットとなっており、HTMLと同時にCSSのスキルが身に着く点も便利です。

レスポンシブ化まで対応していることから、スマホに対応することも考えたうえでサイト制作をしたい人におすすめです。

Progate

Schoo

こちらは有料のサイトです。

こちらも映像授業形式なので、本だと理解するのが苦手という人でも理解しやすいでしょう。

HTML以外にもRubyやPHPなど様々な講義が用意されており、HTMLだけの簡単なサイトだけでなく、様々な講義を観ることで色々な言語のスキルを身に着けることができます。

SEO対策用の講義もあり、ホームページ運用に必要なスキルを身に着けたい人におすすめです。

Schoo

w3chools.com

少し難易度を上げて、よりHTMLについて深く知りたいという人におすすめなのがw3chools.comです。

HTMLは使用するブラウザによって使用できるタグが異なることがあります。

ブラウザごとの仕様についても解説されているので、HTMLスキルを身に着けた後でも辞書のような感覚で使えます。

その他のスキルも紹介しているので、HTMLしか使っていないシンプルなサイトから、よりスタイリッシュなサイトを目指したい時に便利です。

w3chools.com

HTMLとCSS入門レベルの初心者の独学におすすめの参考書

初心者の方がHTMLとCSSを独学で勉強するなら、参考書を使った方が効率的に勉強できます。

ネットの学習サイトで勉強しても良いのですが、サンプルなどを一から作る必要があるので少し大変です。

参考書であれば、サンプルデータが付属していることも多く、WEB未経験でも挫折せずにHTMLとCSSを勉強できると思います。

HTMLとCSSの本(参考書)は数が多いので、初心者向けの良書を紹介します。
HTMLとCSSは、基礎がわかれば後は実践することがレベルアップに繋がります。
あまりに古い情報だと今の主流についていけないので、最新のものからピックアップしています。

まずは基礎を覚えることと、HTMLCSSの基本的な使い方を覚えることが大事になります。

初心者の方は、基礎を覚えたらどんどん自分でデザインやコーディングすると実力が伸びますよ。

それではHTMLとCSSの本(参考書)を比較して、おすすめを選んでいきます。

あと補足をしておくと、ほとんどの参考書の最初にはWEBの概要について書いていますが、これは飛ばして良いと思います。

初心者には理解しにくいですし、説明がわかりにくいので勉強の弊害になることが多いからです。

そういった内容は、HTMLやCSSの基礎ができてから読むことをおすすめします。

初心者からちゃんとしたプロになる Webデザイン基礎入門


初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉

HTMLとCSSを、「1日30分からはじめる」をテーマに丁寧に解説している参考書です。

初学者の方が、Webデザイナーを目指す上で必要となる基本的な知識や技術を学習できる本の中ではピカイチです。

理論(読むパート)と実践(作るパート)のバランスが良いので、知識と実践力が身に着きます。

最新の書籍になるので、今のWEBで必須のレスポンシブル対応についても説明されています。

最初の1冊としておすすめできる良書です。

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書


世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

WEB制作が全くの未経験でも、わかりやすい構成になっているHTMLとCSSの参考書です。

説明も丁寧で、初心者でも無理なく理解できる内容になっています。

実際に説明した内容を、ファイルをダウンロードして手を動かしながら覚えられるもの評価ポイントになります。

ただ最初の概要については、初心者にはわかりにくいので飛ばしていいと思います。

すこし理解しにくいこともありますが、WEBについても勉強できる初心者向け参考書の中ではおすすめになります。

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典


今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

HTML5の要素とCSS3のプロパティに関する情報をまとめた、リファレンスの使い方ができる参考書です。

HTMLタグやCSSのプロパティを全て暗記するのは効率的ではなく、プロでもネットやリファレンスを見ながら作業しています。

慣れればネットでも良いのですが、初心者の内はこうした参考書を持っておくと便利です。

最新のブラウザ対応状況が確認できるのも、本書のおすすめポイントになります。

HTMLとCSSの初級者がステップアップするためには

HTMLとCSSの初心者向けのおすすめのサイトと参考書を紹介しました。

HTMLとCSSの独学で初級者がステップアップするためには、より「実践的な実力」をつけることが必要です。

一番良いのはWEB制作の現場で仕事をすることになります。

特にデザイン力は実践で身につけるのが一番なので、基礎が理解できたら仕事で鍛えるのがおすすめです。

WEBデザイナーやコーダーは、中小企業であれば求人数もそれなりに多い職種になります。

できればJavaScriptもできると良いのですが、今はjQueryというライブラリを使えば簡単に動きのあるホームページが作れるので仕事で覚えるのも良いでしょう。

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

IT系の転職サイトと転職エージェントおすすめ!

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

プログラミングスクールで効率よくHTMLとCSSを勉強する

HTMLとCSSは独学でも学習できますが、将来的に仕事までつなげたいのであればプログラミングスクールもおすすめです。

正直、HTMLとCSSの勉強だけでプログラミングスクールに行くのは、お金がもったいないのでおすすめしません。

ですがプログラミングスクールであれば、難易度が上がるJavaScriptなどのスキルも勉強することができます。

仕事をしながら覚えるのも良いのですが、思っている以上にWEB系のスピード感は早く仕事をしながらプログラミングスキルをつけるのは簡単ではありません。

時間がある時に、プログラミングスクールでJavaScriptやサーバサイドの勉強をしておけば、必ず仕事で役に立ちます。

今はデザインを学べるプログラミングスクールもあるので、そういったプロのスキルを学んでおくことで就職や転職の時のアピール材料にもなります。

未経験からフリーランスになれたエンジニアがおすすめするオンラインプログラミングスクール

プログラミングスクールは通学型とオンラインがありますが、自宅で学習できるオンラインの方が柔軟に勉強できるのでおすすめです。

もしWEB制作の仕事を目指しているのであれば、効率よくWEBについて学べるプログラミングスクールも検討しましょう。

スポンサードリンク