オンラインカウンセリング実施中

HTML・CSSの勉強法|初心者が独学でスキルを学ぶには?

私たちがインターネット上で閲覧するWebページのほとんどは、HTMLやCSSによって構成されており、これらのファイルをブラウザが解釈することで内容が表示される仕組みになっています。そのため、HTMLとCSSは、Web開発に携わるエンジニアには必須とも言えるスキルです。ここでは、HTMLやCSSを習得するための方法をご紹介します。

HTML案件を提案してもらう

目次

HTMLとは
HTML・CSS初心者におすすめの勉強方法
HTML・CSSの勉強時間
HTML・CSSをマスターしよう

フリーランスの収入見込みをチェック

 

簡単60秒! 無料登録

HTMLとは

私たちが普段ブラウザから見ているページの多くは、HTMLという「マークアップ言語」で記述されています。

HTMLとは「HyperText Markup Language」(ハイパーテキスト・マークアップ・ランゲージ)の頭文字をとったものです。マークアップ(目印をつける)と呼ばれるように、文書内の各要素に「HTMLタグ」で目印をつけて、コンテンツの構造化と記述を行います。

HTMLタグには「ページのタイトル」「見出し」「本文」「セクション」などの種類があり、タグをつけることでそれぞれの要素に役割が与えられます。タグがつけられたHTMLファイルからコンピュータがコンテンツの役割を理解し、指定されたタグに従ってブラウザに表示します。要素に正しくタグがつけられていれば、検索エンジンがそのWebページの情報を収集することができ、検索結果に表示されやすくなります。

このHTMLタグの役割は世界で標準化されているため、国内外に関わらずWebエンジニアは、正しいHTMLの記述をマスターしておくことが非常に重要になります。しかし、HTMLは他のプログラミング言語のように計算したり動きをつけたりすることはできないため、習得までの難易度は低めです。

CSSとは

私たちが普段ブラウザからで見ているページは、HTMLだけで記述されているわけではありません。見栄えの良いデザインのWebページを作るには、CSSも必要です。CSSとは「Cascading Style Sheets」(カスケーディング・スタイル・シート)の頭文字をとったもので、スタイルシートとも呼ばれます。

HTMLがWebページの構造化をするための言語であるのに対して、CSSは見た目やレイアウトといったデザインを実装する役割を担っています。例えば、文字のサイズや色、ページや文章などの背景色、ページの余白、コンテンツの位置などをCSSで指定することが可能です。

CSSでは、HTMLタグで囲まれた要素に対してスタイルを指定しますが、指定する要素によっては優先されるCSSが変わります。そのため、競合などにより意図していないところでスタイルが適用されないように注意が必要です。

最近はスマートフォンやタブレットなど、閲覧する端末によってWebページのレイアウトが変わることがあります。このようなデザインは「レスポンシブデザイン」と呼ばれ、あらかじめCSSで端末の画面サイズに応じたレイアウトパターンをいくつか作っておき、ブラウザが最適なCSSを読み込んでいるのです。

なお、HTML同様にプログラミング言語のような高度な処理はできないため難易度は低めですが、Webエンジニアを目指すならやはり習得は必須と言えます。

HTMLとCSSを一緒に学ぶのがおすすめな理由

HTMLだけでも文字や画像などを表示することは可能ですが、装飾やレイアウトを指定することはできません。そのため、真っ白な背景に文字や画像が上から順に並ぶようなページになってしまいます。また、CSSはHTMLタグを生成することができないため、希望する場所に希望どおりの要素を表示することができません。そのため、どちらか一方だけを学ぶのではなく、一緒に学習するのがおすすめです。

HTMLタグだけでもスタイルを指定することは可能ですが、この方式では同じような設定をしたい要素が他にもあれば、すべての箇所に一つひとつ記述をしなければなりません。たとえば、小見出しの色を変更する場合、HTMLでスタイルを指定する場合は、すべての小見出しにHTMLタグを追記する必要があります。

その点、CSSで設定すれば、ページ全体に対して一括で指定することができるため、管理やメンテナンスが効率よく行えます。このように、HTMLで文章の構造を記述し、CSSでスタイルを記述する、というように両方を学んで使い分けることが大切です。

関連記事 : HTMLコーダーの仕事とは|未経験からのなり方やきついといわれる理由も解説

HTML案件を提案してもらう

HTML・CSS初心者におすすめの勉強方法

これからHTMLを初めて学習する方におすすめの勉強法を5つ紹介します。人によって勉強に充てられる時間や向いている方法は異なるので、それぞれの特徴を見てから勉強方法を検討してみましょう。

  • 学習サイト
  • スクール
  • 動画
  • 勉強会

本は書籍や問題集などを利用するため自分のレベルに合わせやすい独学方法です。学習サイトや動画は、変化や効果などを確認しながら勉強進められます。スクールでは体系的に学習でき、勉強会では最新テクニックなども学べます。

独学で新しいことを学習する際に、本は教材として手に取りやすいでしょう。

本を選ぶ際は、まずは、最後まで一通り読み切れる本を選ぶことが重要です。図解の豊富さや、手順通りに進めることでWebサイトが作成できるようになっているかなどの観点から選ぶと良いでしょう。本にサンプルデータがついているものを選ぶと完成した状態を確認できるので、より理解を深められます。

版数が上がっている書籍は人気が高い、最新のHTMLに準拠しているなど、内容が更新されている場合もあるので、最新版かどうかも確認しましょう。

HTML入門用として人気が高い本には、以下が挙げられます。

狩野祐東『スラスラわかるHTML&CSSのきほん 第2版』(2018年、SBクリエイティブ)
これからWeb制作を始める人でも、この一冊で最新のパソコンとスマートフォンに対応したWebサイト作りを学べます。

株式会社デジカル『いきなりできます! 最新ホームページ作り&HTML超入門 第3版』(2015年、SBクリエイティブ)
図解も多く、HTMLをこれから始めたいという人でも本の通り進めていけば、ホームページを公開するまでの流れを学べます。

本で勉強するメリット

本を活用しての学習するメリットは主に3つあります。

  • 入手手段が容易である
  • 自分のペースで進められる
  • 後日も活用できる

本の場合、勉強を開始したいと思ったタイミングで購入し、すぐに学習を開始できます。近くの書店になくても、インターネットで容易に購入できるのがポイントです。

また、書籍であれば、自身の理解に合わせて学習を進めることができます。理解が不十分な箇所は何度でも読み返すことができますし、先へ進めても簡単に戻って見直すことできるのもメリットです。

中~上級者向けの書籍であれば、見栄えの良いページ作りのテクニックなども紹介されており、リファレンス代わりに役立つものもあります。

本で勉強するデメリット

本を用いて勉強を始める際のデメリットには、以下の点が挙げられます。

  • 自分のレベルに合った本を探すのが難しい
  • 情報が古い場合がある
  • モチベーションの維持が難しい

「初心者向け」と書かれている本でも自分には内容が難しかったり、逆によく読んでみるとすでに習得している内容が多かったりすることがあります。レビューなどの口コミ情報などを参考にしたうえで、実際に手に取って中身を確認し、自分が最後まで読み続けられるかを判断しましょう。

HTMLではタグが廃止されることもあります。しかし、古い本ではそのようなタグを用いて解説している場合があるため、最新の版があるか、あるならいつ出版されたのかを確認しましょう。

本で学習する際の問題点として、自身のモチベーションの維持があります。書かれている内容が難しかったり、本の通りに進められなかったりすると、学習の継続が難しくなることもあり得るでしょう。興味のある箇所から読んでみる、別の本を読んでみる、などで気持ちを切り替えるなどの工夫が重要です。

学習サイト

インターネット上の学習サイトでは、実際にコードを入力したり、解説動画を見たりしながら学習を進めることができます。

HTMLやCSSの基本的な記述方法を学べる講座から、実例を踏まえてWebサイトの作り方を説明するような講座、プログラミング言語を学べる講座など様々な種類があるのが特徴です。

講座によってはITエンジニアが講師を務めていることもあり、実践的な現場の知識を学ぶこともできます。

学習サイトで勉強するメリット

学習サイトを活用して学習するメリットは主に3つあります。

  • 自分のペースで進められる
  • コードを書きながら学べる
  • 学習サイトによっては無料で利用できる

学習サイトの多くはWebサイトで学習する形式をとっており、自分の空いた時間で学習を進めることができます。学習サイトによってコンテンツの難易度や勉強の進め方は異なりますが、問題が出されて正解すると次のステップへ進む、といった学習サイトも見られます。多くの場合、同じステップに再挑戦することもできるので復習もしやすいでしょう。

学習サイトでは、ただ解説動画を見るだけではなく、実際にコードを入力しながら学習を進める形式があります。正しく入力できたか、どのような結果になるのかをその場ですぐに確認できるので理解が進みやすいでしょう。

このような学習サイトは、無料で利用できるものも少なくありません。無料で利用できるコンテンツを一通り進めたあと、有料のサイトや一部有料のコンテンツでさらに勉強を進めると良いでしょう。

学習サイトで勉強するデメリット

学習サイトを用いて勉強を始める際のデメリットとしては、以下の点が挙げられます。

  • 自分が希望する内容を学べるとは限らない
  • 無料学習サイトでも有料コンテンツがあることも

多くの学習サイトは1つのWebページを作り上げるというよりは、機能を一通り学ぶためのコースが多いため「自分でひとつのWebサイトを完成させたい」「レスポンシブデザインを極めたい」など、深く掘り下げる勉強をしたい人には向かないかもしれません。

学習サイトには、無料で利用できるサイトと会員限定の有料サイトが存在します。初歩的な内容は無料で受けられますが、上級コースを学ぶには有料会員にならなければならないこともあるようです。

無料の学習サイトの場合、受講中の内容に対して問合せできないケースなどもあるので、サービス内容を見極めて選びましょう。

スクール

HTML・CSSを学べるスクールには、パソコン教室やプログラミングスクールなどが挙げられます。東京、大阪、名古屋、福岡などの都市圏をはじめ全国展開をしているスクールもあり、自分の生活圏内でもスクールを見つけることができるでしょう。

スクールによっては、通学方式だけでなくマンツーマン形式や通信学習方式を用意している場合があります。通いやすいスクールを見つけられない場合は、オンラインでの受講が可能なスクールを探してみましょう。

また、公共職業訓練や求職者支援訓練においても、WebデザインやHTML・CSSなどを学べるスクールが開催されています。これらは専門学校や企業が国からの委託を受けて開催しているもので、テキスト代などは必要ですが、受講料は無料となる場合があります。

スクールで勉強するメリット

スクールでの学習には、本や学習サイトなどにはない3つのメリットがあります。

  • 質問がしやすい
  • より実践的な学習もできる
  • 転職・就職に強い

まず、スクールでの学習の特徴に、講師から直接学べるというメリットが挙げられます。通学形式やマンツーマン形式であれば講師が目の前にいるので、困ったことがあればすぐに質問することができます。通信学習形式ではチャットサポートなどで質問することができ、比較的早く回答を得ることが可能です。通学・通信教育のいずれにおいても、つまずいたまま先に進めずに挫折してしまうことは少なくなるでしょう。

スクール講師の中には、現役エンジニアあるいはエンジニア経験がある人も少なくありません。IT業界は常に新しい技術が求められる業界なので、現役エンジニアである講師がいれば現場で使用されている実用的な技術を学ぶことができるでしょう。

公共職業訓練や求職者支援訓練以外のスクールにおいても、転職・就職のサポートを実施していることがあります。そのようなスクールでは、HTML・CSSのスキルだけでなく転職活動に必要なノウハウなどもあわせて学ぶことが可能です。

スクールで勉強するデメリット

スクールで学ぶ場合のデメリットでは、以下のような点が考えられます。

  • 自分が通いやすいスクールがあるとは限らない
  • 講師によって授業の質が異なる

通学型のスクールで学習を希望する場合は、営業日時や通える場所にスクールがあるのかを確認する必要があります。転職などを理由に学習する場合、仕事帰りに「ちょっと寄って勉強したい」と考えたとき、通えるところにスクールがあるかどうかは重要な問題です。オンラインでの受講を選べば、時間や場所を気にする必要がないので、受講を継続しやすいでしょう。

スクール選びでは講師の質もしっかりと確認しましょう。同じスクールの講師でも、知識・スキルのレベルやWeb制作の実務経験の有無などが異なります。申し込んでから「別の講師が良かった」ということがないように、事前に講師陣のキャリアやスキルレベルを確認しておくとよいでしょう。

動画

YouTubeなどの動画サービスでもHTMLやCSSについて無料で解説している動画があり、学習サイトやスクールが公開しているケースや、エンジニアが個人で投稿しているケースなどが見られます。

内容では初心者向けの基本もありますが、トップページやレスポンシブデザインの実装なども見ることができます。動画を見ながら実際にコードを入力して動作を確認することで学習を進められるでしょう。

動画で勉強するメリット

動画で勉強するメリットには以下の点が挙げられます。

  • 金銭的負担が少ない
  • 実践的な内容を習得できる
  • 自分のペースで進められる

無料動画を活用しての学習は、金銭的負担が少ないという点が大きなメリットです。学習を始めるのに必要なのはブラウザとテキストエディタだけでよいので、すぐに学習に取りかかることが可能です。

コンテンツの内容は動画クリエーターの知識によるものですが、大手企業のWebエンジニアを経験している人が動画を投稿している場合もあり、現場でも使用されるような実践的な内容を学ぶことができます。

また、生放送で配信される動画でない限りは、空いた時間を使って自分のペースで学習を進めることが可能です。

動画で勉強するデメリット

動画で勉強する際のデメリットとしては、以下のものが挙げられます。

  • 動画の内容が正しいとは限らない
  • 質問をするのは難しい場合がある

無料動画を用いて勉強する際、コンテンツは玉石混交である点には注意しなければなりません。コンテンツの内容は動画クリエーターの知識によるものなので、内容が古いあるいは誤っている可能性もあります。内容の誤りについてはコメント欄などで指摘されている場合があるので、コメント欄もチェックしましょう。また、閲覧する前に投稿された年月日を確認し、あまり古いものは避けたほうが賢明です。

また、スクールのようなリアルタイムのようなやり取りが難しいため、質問や問合せをしても回答が返ってくるとは限りません。わからない箇所があった場合は、必要に応じて本などを見ることをおすすめします。

勉強会

HTML・CSSを学ぶには、勉強会やセミナーを受講する方法があります。Webエンジニアなどから直接業界知識や技術を学ぶことができます。スクールでの学習に似ていますが、実施回数が4~5回程度で終了するものが多く、初心者向けに2時間程度で終了する勉強会も少なくありません。

以前は企業が主体となって会場を設け、参加者が会場に向かう形式が多くありましたが、近年はオンラインで参加できる勉強会も見られるようになっています。料金は全く無料のケースもあれば、教材費などは有料となるケースもあるようです。

また、IT系サークルなどの同じ趣味を持つ人たちが集まって行われる勉強会もあります。こちらは、初心者向けというより、すでに高度な技術を持ったメンバーによる技術情報の交換が主な目的となっているようです。

勉強会で学ぶメリット

勉強会での学習には3つのメリットがあります。

  • 質問がしやすい
  • 費用が少ない
  • より実践的な学習もできる

勉強会での学習もスクールと同様に講師との距離が近くなります。会場での実施では10人程度、オンラインでは5人程度の少人数で行われている場合もあり、気軽に質問しやすいでしょう。

無料で行われる勉強会が多いですが、有料の勉強会でも参加費用は数千円程度が目安とされており、それほど高額ではないのが一般的です。会場で実施されるケースでも企業主体で行われる場合があり、宣伝の一部を担っているため安い費用で開催されることがあるのです。

勉強会もスクールと同様に、講師の中には現職で開発現場を経験している人もいます。そのため、現場で得たノウハウや最新技術などを間近で学ぶことが可能です。

勉強会で学ぶデメリット

勉強会は、スクールと大きく2つの点で異なります。

  • 必ず参加できるとは限らない
  • 1回の学習範囲が限られる

勉強会は毎週定期的に行われるとは限らないため、開催日時によっては都合がつかずに参加できないこともあるでしょう。また、定員がすでに埋まって受付終了になってしまった、あるいは予定人数集まらず中止になる、という場合もあるため、必ず希望の勉強会に参加できるとは限りません。

勉強会は1回の開催時間に制限があることから、ひとつのテーマを数回に分けて勉強することがあります。そのような場合は1回の学習範囲は限られてしまいます。そのため、自分は時間があるからといってまとめて一度に勉強することができません。短期間で勉強したい場合はできる限り近い日取りでそのテーマの勉強会を予約すると良いでしょう。

関連記事 : プログラミングを独学で学習できる無料サービス12選

HTML・CSSの勉強時間

HTML・CSSの習得では、基礎的な知識から実践的な技術まで幅広く学ぶ必要があります。HTML・CSSを学ぶのに必要な勉強時間は一概には言えませんが、厚生労働省が認可している求職者支援訓練のカリキュラムを参考に考えてみましょう。

参照 : 厚生労働省「求職者支援制度のご案内」

あるWebデザイナー・ディレクター養成コースでは、HTML5の実習で35時間、CSS3の実習で30時間、HTMLとCSSを用いたスマートフォンサイト制作として15時間のカリキュラムがとられています。合計すると80時間です。

上記のような基礎的な内容の学習であれば、スクール形式の場合、50~100時間ほどが目安と言えるでしょう。独学であればもっと時間を短縮することも可能となります。

ただし、IT技術は常に進化しているので、技術習得後も日々、新しい知識を取り入れていく必要があります。それらも含めると、勉強時間は上記にあげた時間数よりも増える可能性があります。

関連記事 : Webエンジニアになるための勉強法と学んでおきたい10のこと

HTML・CSSをマスターしよう

HTMLやCSSを学習する方法はさまざまです。独学では、本・無料動画・学習サイトを活用する方法があり、自分のペースやレベルに合わせた学習ができます。一方、スクールや勉強会などでは、体系的な学習や新しい技術の習得などが可能です。

自分のスタイルに合った学習方法を選んで、HTML・CSSをマスターしてみてはいかがでしょうか。

関連記事 : JavaScriptの勉強法|入門におすすめの独学方法と学習のロードマップ

最後に

簡単4ステップ!スキルや経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します!

※相場算出に個人情報の取得はおこないません。

HTML案件を提案してもらう

  • このエントリーをはてなブックマークに追加
いきなり相談するのは不安な方へ フリーランスになった時にどんな案件を提案されるのかメールでわかる! 詳しくはこちらから

関連案件

もっとHTMLの案件を見る

プライバシーマーク

© 2014-2021 Levtech Co., Ltd.