※この記事は「2023年8月3日」に更新しました。
なぜ、このような記事を書こうと思ったというと、私も独学して習得したからです。
以前、エンジニアから転職して、仕事で Web制作をすることになったときのことです。
この時点で HTML、CSS の知識はありませんでした。
- 元々、プログラミングをやっていたから独学できたんじゃないの？
- パソコンが苦手なので自信がない
確かに、向き不向きはあります。
HTML、CSS は、厳密に言うとプログラミング言語ではありません（マークアップ言語、スタイルシート）。
その頃、Web制作の経験もなかったので、未経験者とほとんど同じ条件です。
実際に、独学した管理人が勉強方法を解説します。
- 基本情報技術者資格所有者（ソフト開発の国家資格）
- WordPress歴、10年以上
- Withマーケ会員（2022年10月入会）
目次
HTML、CSS を勉強する前に
HTML、CSS を勉強する前に、以下の点に注意して下さい。
- HTML、CSS で完璧を目指す必要はない
- 実際にコードを書いて覚える
しかし、完璧を目指すとなると話は変わってきます。
Webデザイナー、フロントエンジニアなど、幅広い方に利用されていますが、100％理解している方はほとんどいません。
書き方の基礎、考え方などを理解して、調べながら Web制作できるレベルを目指しましょう。
あと、実際にコードを書いて覚えるようにしましょう。
全て打ち込む必要はありませんが、自分が書いたコードが実際にどのように表示されるか確認しながら、覚えていくと習得は早いです。
HTML、CSS の勉強方法
それでは、HTML、CSS の勉強方法を紹介します。
Progate（プロゲート）を利用する
Progate（プロゲート）は、ブラウザ上でプログラミングを学習できるサイトです。
最大の特徴は、開発環境を用意しなくても、勉強することができるというところです。
実際にコードを書いて覚えるのにも向いています。
入門書（本）で勉強する
次に、入門書（本）を使って勉強します。
ネットで勉強しても良いのですが、知識がないと以下のような判断ができません。
- 必要な情報が網羅的に解説されているか？
- 情報に誤りがないか？
本の場合、Amazon（アマゾン）などで、よく売れていて、評価も高いものを選べば、まず失敗しません。
というのも、HTML、CSS の入門レベルがそこまで難しいものではなく、優れた書籍が充実しているからです。
入門書というのがポイントで、いきなり難しいものや、特定の分野に特化したものを選ばないようにしましょう。
ちなみに私が見ていて良さそうだと思ったのが、スラスラわかるHTML&CSSのきほん です。
 |
|
新品価格 |
サイトを制作してみる
Progate、入門書で基礎が確立されたら、実際にサイトを制作してみましょう。
参考サイトを模写できそうなら、ブラウザの開発者ツール（F12）でコードを見て、模写していくのも良いです（ブロガーはここまでしなくても良いかもしれません）。
まだ難しそうなら、以下のような書籍を購入して、実際に参考サイトを制作してみましょう。
 |
|
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 新品価格 |
HTML、CSS を甘く見てはいけない
今まで簡単だと言ってきましたが、HTML、CSS は簡単だからこそ、甘く見てはいけません。
- フロントエンジニア
- Webデザイナー
- ブロガー
このように、Web制作に関わる、ほとんどの方が知っておくべき内容です。
例えば、PHP というプログラミング言語は、HTML といっしょに書くことができます。
- HTML は検索エンジンに正しく内容を伝えるために必要
- CSS はユーザーにわかりやすく内容を伝えるために必要
これらのことから、知識がないと 戦略的に SEO対策ができないことも推測できます。
ただ、プロが制作するものと基礎レベルを学習したものが制作するものでは、かなりの差があることも理解しておきましょう。
最後に
今回は、HTML、CSS の勉強方法について、解説しました。
プログラミング言語と違って、そこまで難しいものではありませんし、トライアンドエラーも簡単にできます。
Web制作に興味のある方は、まず独学してみることをおすすめします。
