HTML、CSS の勉強方法教えます【元エンジニアも独学】

※この記事は「2023年8月3日」に更新しました。

タカフミ
HTML、CSS の勉強方法を紹介します。

なぜ、このような記事を書こうと思ったというと、私も独学して習得したからです。

以前、エンジニアから転職して、仕事で Web制作をすることになったときのことです。

この時点で HTML、CSS の知識はありませんでした。

当時、Amazon(アマゾン)で本を買って、勉強したのを覚えています。
  • 元々、プログラミングをやっていたから独学できたんじゃないの?
  • パソコンが苦手なので自信がない
タカフミ
このように思う方もいるかもしれません。

確かに、向き不向きはあります。

HTML、CSS は、厳密に言うとプログラミング言語ではありません(マークアップ言語、スタイルシート)。

その頃、Web制作の経験もなかったので、未経験者とほとんど同じ条件です。

実際に、独学した管理人が勉強方法を解説します。

タカフミ
記事を書いている管理人の経歴は、以下の通りです。
  • 基本情報技術者資格所有者(ソフト開発の国家資格)
  • WordPress歴、10年以上
  • Withマーケ会員(2022年10月入会)

HTML、CSS を勉強する前に

HTML、CSS を勉強する前に、以下の点に注意して下さい。

  • HTML、CSS で完璧を目指す必要はない
  • 実際にコードを書いて覚える
HTML、CSS の学習難易度はやさしめなので、初心者でも独学可能です。

しかし、完璧を目指すとなると話は変わってきます。

Webデザイナー、フロントエンジニアなど、幅広い方に利用されていますが、100%理解している方はほとんどいません。

書き方の基礎、考え方などを理解して、調べながら Web制作できるレベルを目指しましょう。

タカフミ
そこから先は、仕事で覚えた方が良いです。

あと、実際にコードを書いて覚えるようにしましょう。

全て打ち込む必要はありませんが、自分が書いたコードが実際にどのように表示されるか確認しながら、覚えていくと習得は早いです。



HTML、CSS の勉強方法

HTML、CSS の勉強方法

それでは、HTML、CSS の勉強方法を紹介します。

Progate(プロゲート)を利用する

Progate(プロゲート)は、ブラウザ上でプログラミングを学習できるサイトです。

最大の特徴は、開発環境を用意しなくても、勉強することができるというところです。

実際にコードを書いて覚えるのにも向いています。

タカフミ
まず、初心者はここで感覚をつかみましょう。

入門書(本)で勉強する

次に、入門書(本)を使って勉強します。

タカフミ
理由は、基礎を確立させるためです。

ネットで勉強しても良いのですが、知識がないと以下のような判断ができません。

  • 必要な情報が網羅的に解説されているか?
  • 情報に誤りがないか?

本の場合、Amazon(アマゾン)などで、よく売れていて、評価も高いものを選べば、まず失敗しません。

というのも、HTML、CSS の入門レベルがそこまで難しいものではなく、優れた書籍が充実しているからです。

入門書というのがポイントで、いきなり難しいものや、特定の分野に特化したものを選ばないようにしましょう。

人によって合う合わないがあるので、比較して良さそうなものを選びましょう。

ちなみに私が見ていて良さそうだと思ったのが、スラスラわかるHTML&CSSのきほん です。

スラスラわかるHTML&CSSのきほん 第2版

新品価格
¥2,178から
(2021/12/6 16:43時点)

サイトを制作してみる

Progate、入門書で基礎が確立されたら、実際にサイトを制作してみましょう。

タカフミ
ここから先は、勉強している方のレベルによっても変わってきます。

参考サイトを模写できそうなら、ブラウザの開発者ツール(F12)でコードを見て、模写していくのも良いです(ブロガーはここまでしなくても良いかもしれません)。

まだ難しそうなら、以下のような書籍を購入して、実際に参考サイトを制作してみましょう。

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方

新品価格
¥2,653から
(2021/12/6 16:45時点)

HTML、CSS を甘く見てはいけない

HTML、CSS を甘く見てはいけない

今まで簡単だと言ってきましたが、HTML、CSS は簡単だからこそ、甘く見てはいけません。

  • フロントエンジニア
  • Webデザイナー
  • ブロガー

このように、Web制作に関わる、ほとんどの方が知っておくべき内容です。

例えば、PHP というプログラミング言語は、HTML といっしょに書くことができます。

タカフミ
PHP を理解している人は HTML も最低限理解しています。
  • HTML は検索エンジンに正しく内容を伝えるために必要
  • CSS はユーザーにわかりやすく内容を伝えるために必要

これらのことから、知識がないと 戦略的に SEO対策ができないことも推測できます。

ただ、プロが制作するものと基礎レベルを学習したものが制作するものでは、かなりの差があることも理解しておきましょう。

最後に

今回は、HTML、CSS の勉強方法について、解説しました。

プログラミング言語と違って、そこまで難しいものではありませんし、トライアンドエラーも簡単にできます。

Web制作に興味のある方は、まず独学してみることをおすすめします。