独学でHTML&CSSを初めて勉強する方におすすめの学習手順

独学 HTML&CSS 手順
  • ※本記事はアフィリエイトリンクを含みます

Webサイト制作に興味を持ち、勉強しようかと思うけどオンラインスクールは敷居が高い…

でも独学だと何から勉強したらいいのかわからない…

本を買うのがいいのか?なにかサイトで勉強できるのか?どのくらいの期間がかかるのか?

など、始めるにあたって悩むことが多いかと思います。

私は完全に独学でHTML&CSSを学び、簡単なサイトが作れるようになるまでは1ヶ月程で出来るようになりました。

ここからは私が実際にHTML&CSSの基礎を学んだ手順をお伝えしつつ、どんな事を勉強したらよかったのかを書いていきます。

目次

最初の勉強方法は?基礎中の基礎!(プロゲート・ドットインストール・無料教材)

学習について

まず私はHTML&CSSはなんぞや?というところから勉強していきました。

簡単に説明すると、

HTMLはネット上で表示する言語でHTMLとして打ち込んだコードが表示される。

CSSはHTMLを装飾する言語で様々な効果をつけることができる。

と、本当にざっくりと理解しました。

それをもっとしっかり無料で勉強できるおすすめサイト2つを紹介します。

プロゲート

プロゲートは「初心者から、創れる人を生み出す」をテーマに初心者でも独学で、挫折せずに学びやすく学習できるサイトです。

スライド形式で学び、すぐに復習として実際のコードを選択して穴埋め問題を解いていきます。

とてもわかりやすい上にスラスラ進むので、初心者の方でも学習しやすいかと思います!

最終的には簡単なサイトを作れるところまでステップがありますので、達成感もあります。

アプリ版もありますので、出先とパパっと勉強できます。

※後半になるとコードが増えるので、アプリ版だと少し見にくくなります。その為、PC版で全部の画面を見ながらの学習がおすすめです。

ドットインストール

ドットインストールは「3分動画でマスターできるプログラミング学習サービス」です。

全ての動画が3分以内となっており、すきま時間で学習することができます。

短い動画ながらもわかりやすくなっているので、まずは動画で学習したい方にはおすすめです!

どっちがいいの?

個人的な意見も含みますが、両方にいいところがありますので両方触れる方がおすすめです!

家ではプロゲートをPCで利用しコードに慣れていき、外出先ではドットインストールで動画を見て学習。というスタイルで私は学習しました。

どちらも有料メニューがありますが、まずは無料の部分をしっかり学習するだけで基礎的な知識は身についてくると思います。

専門的な知識はすぐに覚えて実践できる訳ではありませんので、全部理解せずとも次々と進みましょう!

わからなくて止まってしまうとやる気が続かなくなります!

実際に何度もコードを書くようになると、わからなかった部分についてわかるようになってきますので安心して下さい!

2つのサイトの欠点

この2つのサイトには個人的に欠点が1つだけあります。

それは、

「実際にコードを書くことがないので、わかりにくいところがある!!!」

ということです。

先述したとおり、自分でエディターを使ってコードを書くようになるとエディターで補完してくれる部分もかなりありますので、選択式のプロゲートでは「あれ?何が変なの?」と逆にわからなくなることがあります…

その為、あくまでも実際にコードを書くことの方がはるかに重要ですので、行き詰ってもどんどん進むのがいいです。

無料でもらえる教材を活用して必要な知識を手に入れる!

プロゲートとドットインストールでは、基礎知識を学ぶことが出来ますが最低限の基礎知識を学ぶとすぐにサイト制作の方法へと進んでしまいます。

私は、学習を進めると基礎的な部分で分からない部分などがあると前の章に戻っては再確認することが多かったです。

そこでTechAcademyさんが無料で提供してくれている教材を参考にしながら学習を進めました!

1週間分の無料体験ができ、課題を出してもらいますが質問しながら学ぶことが出来ます。最終的には課題を提出して評価してもらえます!

独学で勉強している時は正解がわからなくて悩むことが多いので、本当に助かりました。

TechAcademyの無料体験の良いところ!

  • 名前とメールアドレスを入力するだけですぐに始められる
  • 無料体験のカリキュラムはWeb制作の基礎から学べる
  • カリキュラムのまとめとして課題を提出するとメンター(指導者)から評価がもらえる
  • その場でチャットが質問できて返信も早い
  • 30分の無料メンタリングでは、Web制作だけじゃなく職業の相談もできる

基礎が分かったらサイトを作ってみる!(書籍購入)

書籍を読んで勉強

プロゲート・ドットインストール・無料教材である程度は基礎的な知識が身についたかと思います。

そうしたら、実際にエディターソフトを使いながらサイトを作っていきましょう!

ちなみに私はこの位の理解度でこの作業を行っていました。

  • HTMLでのidやclassの付け方がわかる
  • 画像の付け方がわかる
  • リストの作り方がわかる
  • 表は作れません。
  • Headはタイトルと説明とCSSの読み込みができればいいよね?
  • CSSで色の変更や背景色の変更ができる
  • CSSで大きさの変更ができる

など、本当にサイトにちょっと反映できる位でした。なので、「なんとなくだけどサイト作れそうだぞ…?」という段階で全く問題ありません。

サイトを作る4つのステップ

最初にサイトを作る流れを紹介します。

  1. サイトデザインを決める(デザインカンプ)
  2. デザインを元にHTML&CSSでコーディング
  3. サイトをネット上にアップロード(サーバー・ドメイン契約)
  4. アップロード後にしっかりとサイトが反映されているか確認・修正

という4つのステップでサイトを制作していきます。

難しそうなサイト制作ですがまとめてみると結構すっきりしていますね。

今回はHTML&CSSの学習なのでデザインについては省略します。

初心者が買うべき最初の1冊!

私は当初、基礎的な学習の後はどんどんサイトを作って経験を積んでいこうと思っていました。

模写コーディングと言われる「作れそうなサイトのデザインを模写してコーディングする」という方法です。

ですが、

「作れそうなサイト」が見つからない。という壁にぶつかりました…

基礎的な学習だけでは「見たまま」にCSSでサイトを組み上げることが出来なかったんです。

そんな私でしたが、これから紹介する本で一気にサイト制作の理解が深まりました!!

それがこちらです!

この「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」は読みながら同じようにコードを打ち込んでいくだけで数パターンのサイトが出来上がる1冊となっています。

章としては、基本的な知識・HTML・CSS・サイト制作と順を追って学ぶことが出来るので理解度が格段に上がります!

そして、なにより一番ありがたかったのは「制作順序をしっかり学ぶことが出来る」ことでした。

本当に読んでよかった一冊です。

エディターソフト「VSCode」を使ってコーディング

サイトの構成や作り方が分かってきたら、次にコーディングをするためのエディターソフトを使用していきます。

個人的におすすめなのは「VSCode」です。

動作が軽くプラグインを導入することで様々な拡張機能を使うことが出来ます。

このVSCodeではコードの予測変換的なことができ、効率よくコーディングが出来ます。

VSCodeのダウンロードはこちらから

私がある程度エディターソフトを覚えることができたなと実感できたのはこの手順です。

STEP
VSCodeの拡張機能を導入

そのままVSCodeを使い始めても不便なところがあるので、拡張機能を導入して使いやすくしました。

その際に導入した機能はこちらです。

・Japanese Language Pack for Visual Studio Code

 日本語化してくれる機能です。

・prettier code formatter

 入力したコードを自動整形してくれる機能です。

・indent-rainbow

 コードの色分けをしてくれる機能です。

・Code Spell Checker

 コードの入力ミスをチェックしてくれる機能です。

・Path Autocomplete

 ファイルの指定先を候補で挙げてくれる機能です。

・zenkaku

 全角の時に色を付けて教えてくれる機能です。コードは半角しか適用されない為、全角には注意が必要です。

・Auto Rename Tag

 HTMLのタグの閉じを自動で付けてくれる機能です。

・Live Server

 書いているコードをローカルブラウザ上で確認できる機能です。

拡張機能について詳しくこちらでまとめています!

STEP
VSCodeの拡張機能を導入して1つでもサイト制作をしてみる

1冊ですべて身につくHTML & CSSとWebデザイン入門講座」で制作できるサイトをVSCodeで作りコードに少しずつ慣れます。

STEP
サイトのレイアウトについて学び、コードのイメージが出来るようにする

少しずつ慣れてくると「この場合にはこのコードをよく使っているなぁ。」と場面に応じてのコードが分かるようになってきます。

分からない部分があれば、ネットで検索すると大抵は調べることが出来るので活用します。

STEP
デモサイトor模写コーディングをしてスピード・精度を高める

コードのイメージが出来るようになってくると、デザインの段階で出来ることが分かったり、模写コーディングの際にイメージが出来るのでどんどん作れるようになります。

そこから入力ミスを減らすこととスピードを速くすることを意識していきます。

STEP
STEP3と4を繰り返す

今度は覚えたコードを次にも使えるようにストックしていきます。そうすることで同じレイアウトに転用できるのでスピードと精度が高まります。

コードを覚えるとサイト制作が楽しくなります!

独学で勉強していて挫折する一番の理由は「コードの正解が分からず、サイトが出来上がらない」ことだと思っています。

私も模写コーディングをしようとして、イメージが浮かばなかった時は挫折しかけました…

その時はレイアウト毎・パーツ毎にコードのストックを貯めていくことによって、サイトを見てコードがイメージできるようになりました。

コードを覚えると楽しくなってきますので、行き詰った時はコードのストックを貯めるという事をやってみてください!

サーバー契約をしてサイトをアップロードしてみる

homepage-discription

サイトを制作した後はネット上で表示できるようにアップロードをしなければいけません。

その際には、

  • レンタルサーバー契約・ドメイン取得
  • FTPソフトでのアップロード

が必要になります。

サーバーは土地

ドメインは住所

サイトは家

でイメージしてもらえると分かりやすいかと思います!

レンタルサーバーは無料で2つドメインがもらえる「ConoHa WING」を契約

レンタルサーバーについてですが、「ConoHa WING」がおすすめです。

理由としては先程説明した通りアップロードする為には、サーバー契約ドメイン取得が必要になりますが、「ConoHa WING」ならサーバー契約だけで済みますので、簡単になります。

また、ConoHa WINGならWordPressの導入も出来ますので、制作物の紹介サイトやブログを簡単に作ることが出来ます!

料金もよほどアクセスが集中するサイトでない限り安いベーシックプランで全く問題ありませんし、アクセスが増えてからのプラン変更も簡単に出来ます!

私はWINGパックのベーシックプランの2年契約で月683円の契約をしています!

ConoHa WINGについてまとめた記事はこちらです!契約方法や注意点を紹介しています!

FTPソフトでサイトをアップロードする

まず、FTPについてです。

FTPとは「File Transfer Protocol」のことであり、ファイルを転送するための通信規格です。

FTP通信にはFTPソフトとサーバーが必要になり、両者間でデータがやり取りされるという仕組みです。

ということで、FTPを使うことで制作したサイトデータをアップロード出来ますよってことですね。

各サーバーサイト自体にもFTP機能があり、データをアップロードすることが出来ますが、FTPソフトを使う方がたくさんのファイルを転送するには速くて楽な点とデータのバックアップや復元する際にはFTPソフトの方が有利となります。

また、サイト上でエラーが起きた場合やログインできない場合でもFTPソフトがあれば作業できるのでFTPソフトの利用がおすすめです。

代表的なFTPソフトで使いやすかったソフトは「Win SCP」です。

  • 簡単設定でサーバーとファイルのやり取りが可能
  • フリーソフト
  • 画面が左右で分割していてわかりやすい

このソフトはサーバーと接続が簡単で直感的にファイルのやり取りができます。

また画面が左がローカル(パソコン上のデータ)と右側がサーバー上のデータとなっていて画面が見やすく、左右画面へのドラッグでファイルをダウンロード・アップロードすることが可能です。

こちらからダウンロード可能です。

模写コーディングコーディングに慣れる

コーディング

サイトを一度アップロード出来るようになったら、あとはサイト制作のコーディングに慣れていくだけです!

改めて模写コーディングに挑戦しました!

独学でコーディングに慣れるには模写コーディングが最適だと判断しました。

模写は独学最強の味方!

なぜ模写は独学最強の味方なのか!

ずばり、模写は問題と解答になるからです!

模写したいサイトを「問題」だとして、GoogleChromeのデベロッパーツールを使う事で「解答」を見ることが出来るんです!

最初は知らなかったのですが、デベロッパーツールを使いこなせるようになると模写は格段にやりやすくなります。

デベロッパーツールは「F12」で起動することができ、選択した要素のHTML&CSSが確認できます。

デベロッパーツールの超基本的な使い方
調べたい要素を選択する「選択モード」

ツールボックス左上のアイコンをクリックすると調べたい要素にカーソルを合わせることで選択できるようになります。

選択モード
「Elements」でHTMLを確認する

上部のElementsのタブではHTMLを調べることができます。

設定されているクラスなどを確認できます。

Elements
「Styles」でCSSを確認する

下部のStylesのタブではCSSを見ることが出来ます。

Styles
最終的にはHTML&CSSをコピーすれば模写できる…

HTMLとCSSが分かるということは両方コピーするとそのまま反映できるので、どうしても模写できなかった場合には解答を見ることができます。

模写に慣れたらXDでデザインカンプを模写してコーディング

次に必要になるのは、サイトの設計図であるデザインカンプを作れるようになることです。

デザインカンプが作れないと実務でデザインカンプからコーディング出来ないので作れるようになった方がいいです。

デザインカンプを作るにはAdobeソフトの「XD」を使用します。

個人で使う分には無料で利用できますが、共有などは出来ないので注意が必要です。

XDはワイヤーフレーム・デザインカンプ・プロトタイプ作成に必要な機能がまとめられた、UI/UXデザインツールとなっていて、デザインカンプ制作の主流となっています。

模写コーディングについては「Codestep」さんの記事を参考に勉強させていただきましたので、こちらを見ていただいた方が分かりやすいです!

模写コーディング練習におすすめのサイト!

まとめ-あとは数をこなす!-

まとめ

今回は私が独学でHTML&CSSを学習した手順を紹介しました。

まずは基礎知識を無料で学んで、実践してみるのが一番かと思います。

そして独学で一番の壁は「正解が分からなくて行き詰ってしまう」ことだと思います。

本当にその時には「コードのストックを作ること」をやってみてください。

あとはデモサイト制作や模写をして勉強すると良いので、数をこなしていってください!

最後までお読みいただきありがとうございました。

みなさんの参考になれば嬉しいです。

ヨメ

最後までお読みいただきありがとうございました。
みなさんの参考になれば嬉しいです。

当サイトでは自分の制作物の他にWebサイト制作で実際に行った学習や悩んだこと、WordPressのカスタマイズについてなども発信していますので、今後も読んで参考にしていただければと思います。

独学 HTML&CSS 手順

この記事が気に入ったら
いいね または フォローしてね!

シェアしていただけると喜びます!
  • URLをコピーしました!

コメント

コメントする

目次