HTML+CSSが「書ける」ってなんなのか
IT系の職業を目指そうと思った時、すぐに立ちはだかるのは「HTML」「CSS」です。まずはこれを勉強しよう、という書籍やセミナーが多い。でも一体どのくらい、何ができるようになって「HTML+CSSが書ける」と言えるのか。それはとても難しい指標です。
筆者は現時点でIT業界5年目になります。業務でもある程度HTMLを触りますが、胸を張ってHTML+CSSを「書ける」と豪語する自信は足りません。
それは私がHTMLをメインで使わないエンジニアだからという理由もあります。実務では0からまるまるページを作ることはあまりなくて、元々存在するサービスを修正したり、そのソースを流用して開発を進めることが多いです。これを「書ける」と定義してよいのか？という個人的な気持ちが、及び腰の理由です。
良く言えば、HTMLの知識は丸暗記する必要がないです。
よく、学生さんから「タグやコードを全部覚えているんですか？」と聞かれますが、そういう人は少ないんじゃないでしょうか。大切なのは、どのタグがどのような役割で使えるのかを理解することです。それが理解できれば、忘れても調べることができます。
悪く言えば、それはHTML+CSSを身につけたと言える「定量的な指標が少ない」という課題です。
HTMLの資格の代表格として、「HTML5プロフェッショナル認定試験」や「ウェブデザイン技能検定」があります。これらは、各技術を勉強してきた意欲やWEB制作の知識を体系的に身につけるのに役立つと思います。しかし、これを勉強しても「HTML+CSSを身につけた」という感じではないのです。
ではどういうふうに勉強すべきか？と考えた時に、個人的には「さらっと基礎を学んだら別の言語にいこう」と思います。ポートフォリオページのような制作物を１つ作ったら尚良いかもしれません。とにかく、「これさえ出来ればHTML+CSSを完璧にマスターした！」と言える指標が少ないですから、時間をかけて悩まなくてもいいと思います。
参考になる学習サイト
ではその基礎の学び方として、参考になるサイトを列挙します。全部有名なサイトなので、多くの人が紹介しているサイトですが・・・
Progate 「HTML & CSS入門」コース
言わずと知れたプロゲート。わかりやすくゲーム感覚で学ぶことができます。無料で学べるコースがたくさんあります。ヒントや解説が丁寧です。また、「道場レッスン」なるものがあり自分の実力を試せるので、「これくらいのことはできるようになったぞ」という自信が湧きやすく良いと思います。
ドットインストール 「Webサイトを作れるようになろう」コース
これもProgateに並んで有名なサイトです。動画で丁寧に解説してくれて、ポートフォリオ制作まで持っていってくれるので手厚いサービスかと思います。
web-design-textbook
Webページが表示されるまでにどのような技術が使われているのか、平たい言葉で丁寧に教えてくれるサイトです。辞典のように活用することができます。「基本編」〜「上級編」とステップを分けて記載しているのもわかりやすいかと思います。
Codejump
コード模写や、「お手本のソース」を知りたい時に便利なサイトです。
この雛形を使ってある程度HTMLのタグ構成などを考えることができたら、「HTMLを理解している」と実感して問題ないのではないでしょうか。
FLEXBOX FROGGY
CSSにはイメージしにくいプロパティとして「Flexbox」があります。それを直感的に覚えられるゲームが「FLEXBOX FROGGY」です。CSSをある程度学んで、「Flexboxの理解がふわっとしているな」と思ったら試してみてください。
Grid Garden
CSSにはイメージしにくいプロパティとして「Grid」があります。それを直感的に覚えられるゲームが「Grid Garden」です。CSSをある程度学んで、「Gridの理解がふわっとしているな」と思ったら試してみてください。
最後に（おまけ）
上記のサイトなどである程度HTML＋CSSを知ったら、シンプルなWEBページを自分で作成してみるなどすると、学習したことが形になって嬉しいです。
また、学んだことや困ったことはQiita（このサイト）やnoteなどに投稿していくといいと思います。あとで見返した時に復習になるし、努力が客観的にわかりやすいからです。