PR
投稿日：2024年7月26日 | 更新日：2024年07月26日
この記事を監修した専門家
「HTML・CSSに興味があるけど、何から始めればいいかわからない」「HTML・CSSの勉強方法を知りたい」とお考えの皆様へ。
本記事では、初心者の人に向けてHTMLとCSSの勉強を独学で成功させる方法について紹介します。
「HTML・CSSの特徴」から「勉強のステップ」「勉強を進める注意点」「おすすめの本・サービス」「習得後に身につけたいスキル」まで、幅広く紹介します。
皆様のフロントエンドエンジニアへの就職・転職、Web制作フリーランスとして独立するためのお役に立てれば幸いです。
そして、「もっと効率よく身につける方法が知りたい」とお考えの皆様には、オンラインスクールの受講がおすすめです。
編集部おすすめ
プログラミング おすすめ通信講座
オンライン完結で場所や時間にとらわれず学べる！
Webアプリケーション開発を学べるオンラインプログラミングスクール。
DMM認定の現役エンジニア講師が教える、プログラミングスクール!
一人ひとりの学びに合わせたマンツーマン体制で日々の学習を手厚くサポート。
AIプログラミングが未経験からでも学べる！
AIに特化しているからこそ、講師の層も厚くサポートも手厚い！
HTML・CSSの基礎を勉強する
HTMLでWebサイトの構成をつくる
「マークアップ言語」と呼ばれ、Webサイトの構造をコンピュータに指示します。
タイトルやメタディスクリプション（概要を紹介する説明文）、表示する文字・画像・リンクなど、Webサイトに「何を表示させるか」を設定します。
HTMLを学ぶ上で押さえておきたい、3つの用語は以下の通りです。
- タグ：見出し・段落など、テキストを分類する
- 要素：「タグ」で囲まれた中の名称をいう
- 属性：分類・リンク先など、タグの補足情報を設定する
CSSでWebサイトを装飾する
「スタイルシート言語」と呼ばれ、HTMLの表示形式（スタイル）を指定します。
色・サイズ・配置などを、Webサイトを
「どのように表示させるか」を設定します。
CSSを学ぶ上で押さえておきたい、3つの用語は以下の通りです。
- セレクタ：装飾するHTML要素を選択する
- プロパティ：「セレクタ」を装飾するための、CSSのスタイルを設定する
- バリュー：「プロパティ」に対する値を設定する
HTML・CSSの勉強ステップは？
初心者がHTML・CSSを独学で勉強するなら、以下のステップで進めていきましょう。
- テキストエディタをPCにインストールする
- HTML・CSSの基礎知識を学ぶ
- 簡単なWebサイトを作ってみる
- レスポンシブデザインについて学習する
- CSS設計について学習する
- デザインカンプからコーディングを実施する
それぞれのステップを詳細に解説していきます。
1．テキストエディタをPCにインストールする
テキストエディタとは、HTML・CSSを入力・編集するためのソフトウェアです。
特にこだわりがなければ、Visual Studio Code（VScode）がおすすめです。
「拡張機能が豊富」「動作が軽い」「シェアが高く情報を集めやすい」といった、メリットがあります。
2.基礎知識を学ぶ
本や解説動画などを用いて、HTML・CSSの記述ルールを学びましょう。
HTMLにおけるタグの種類、CSSのプロパティについては、今の段階で覚える必要はありません。
あまり学習時間をかけずに、次のステップに進むことをおすすめします。
3.簡単なWebサイトを作ってみる
本をもとに簡単なWebサイトを作ってみましょう。
解説をみながら、実際にコードを入力することで、知識を蓄えつつ、HTML・CSSの記述に慣れていきましょう。
使用頻度の高いHTMLタグやCSSプロパティについては、コードを入力していくうちに自然に覚えられます。
4.レスポンシブデザインについて学習する
これまでのWebサイトはパソコンの画面で見ることが一般的でしたが、近年ではスマートフォンでWebサイトを見る人が急増しています。
よって、近年の開発現場では、パソコン用の横長表示とスマートフォン用の縦長表示の2通りのデザインが要求されるようになりました。
PC・スマートフォン両方で正常に表示させるためのHTML・CSSスキルも習得しておきましょう。
5.CSS設計について学習する
CSS設計とは、HTMLのクラス命名やCSSのコード管理に関するルールです。
「開発の作業効率」「コードの可読性」を向上できるため、多くの開発現場で求められます。
代表的なCSS設計とその特徴は、以下の通りです。
OOCSS
「レイアウトを扱うスタイル」と「見た目を扱うスタイル」を分離して、それぞれにクラス名を設定します。
クラス名が短く、導入するハードルが低いといったメリットがあります。
ただ、CSSの設定変更をしたときの影響が大きくなる点に注意が必要です。
BEM
Block(枠組み)・Element(枠組み内の要素)・Modifier(要素の装飾)に分類して、クラス名を設定します。
細かくクラス名を指定するためメンテナンスがしやすいというメリットがあります。
ただ、クラス名が長くなってしまうことに注意が必要です。
FLOCSS
BEMの命名規則に加えて、Component(再利用可能なパーツ)・Project（固有のパーツ）・Utility（汎用クラス）といった用途に合わせて、クラス名を設定します。
「クラスの再利用がしやすい」「保守性が高い」というメリットがあります。
ただ、BEMより更にクラスが長くなってしまうこと、ComponentかProjectか判断が難しい点に注意が必要です。
6.デザインカンプからコーディングを実施する
実務では、デザイナーが作った設計図(デザインカンプ)をもとに、HTML・CSSを入力(コーディング)することが一般的です。
Adobe XD・Figmaなどのデザインツールを扱いながら、HTML・CSSを設定するために必要な情報を取得することになります。
「デザインツールの扱いに慣れる」「デザインカンプをpx単位で再現する」といった実務レベルのスキルについても、事前に身につけておきましょう。
HTML・CSSを効率よく勉強する方法は？
HTML・CSSを効率よく勉強するために、以下のポイントを押さえておく必要があります。
- アウトプットを重視する
- コードを暗記しない
- 共に学習する仲間をつくる
- 相談できる指導者をさがす
それでは、一つ一つ解説していきます。
アウトプットを重視する
本や動画を見て理解できたつもりでも、いざコードを入力するとどうすればいいのか迷うことがあります。
理解できてからスタートではなく、コードを入力しながら理解を深めましょう。
コードを暗記しない
HTMLタグやCSSプロパティを覚えようとしても、量が膨大で全て覚えるのは困難です。
基礎知識・記述のルールを学習できたら、本や学習サイトを活用して積極的にコードを入力しましょう。
よく使う重要なコードは、何度も入力することで自然に覚えられるため、心配無用です。
共に学習する仲間をつくる
1人で黙々と学習していると、「誘惑に負けてしまう」「レベルアップを実感できない」などの理由で挫折しやすくなります。
そこで、SNSやコミュニティを利用して、同じ志を持つ仲間を作ってみてはいかがでしょうか。
互いに切磋琢磨しあい、高いモチベーションで学習を進めましょう。
相談できる指導者をさがす
1つのエラーに対して「質問すれば数分で解決できることを、数日かけて自分で解決する」といったことは、効率的ではありません。
「MENTA」などのサービスを利用して、困った時に相談できる指導者をさがしておきましょう。
HTML・CSSを独学で学ぶのにおすすめの本は？
初心者がHTML・CSSを独学で勉強するのに、おすすめの本は以下の3冊です。
- 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- できるポケット Web制作必携 HTML&CSS全事典 改訂3版
- CSS設計完全ガイド ~詳細解説+実践的モジュール集
それでは、一つ一つ解説していきます。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
簡単なWebサイトをつくりながら、HTML・CSS・Webデザインの知識を体系的に学べる一冊です。
学習者からの評価も高く、2019年〜2022年のHTML関連の本で売上1位を獲得しています。
インプットとアウトプットを同時に行うことで、実務でよく使うHTMLやCSSだけを効率よく習得しましょう。
＼『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』はこちら！／
できるポケット Web制作必携 HTML&CSS全事典 改訂3版
HTMLのタグとCSSのプロパティの役割と使用方法を網羅した早引き事典です。
タグやプロパティごとの実用例も多く紹介しており、それらのコードはダウンロード可能です。
初めからすべて覚えようとするのではなく、コーディングで困った時の辞書として活用しましょう。
＼『できるポケット Web制作必携 HTML&CSS全事典 改訂3版』
での学習がおすすめ！／
CSS設計完全ガイド ~詳細解説+実践的モジュール集
さまざまなCSS設計手法の考え方・実践ポイントについて解説している一冊です。
実例コードを多数掲載しているため、実装方法に迷ったときの辞書としても活用できます。
CSSの基礎を習得したら、本書を通じて「どのCSS設計手法を取り入れるべきか？」「取り入れたCSS設計をどのように活用すべきか？」を学習しましょう。
＼『CSS設計完全ガイド ~詳細解説+実践的モジュール集』はこちら！／
HTML・CSSを独学で勉強するのにおすすめの学習サイトは？
初心者がHTML・CSSを独学で勉強するのに、おすすめの学習サイトは以下の4つです。
- Progate
- ドットインストール
- Codejump
- Udemy
それでは、一つ一つ解説していきます。
Progate
ゲーム感覚で楽しく学べるWebサービスで、初級編・中級編・上級編・道場編の4章で構成されています。
有料会員なら月額1,078円（税込）で、リーズナブルな価格で利用できるのも魅力です。
スライドを通じて知識を学習したあとに、演習問題として実際にコードを記述します。
扱っているのはあくまで基礎の部分なので、道場編まで一通り終えたら、実践的なWebサイトのコーディングに移りましょう。
ドットインストール
3分程度の動画教材を用いて、HTMLとCSSの基礎からWebサイト作成までを学習できます。
有料会員なら月額1,080円（税込）で、講師に質問できるサービスもあります。
動画を見ながら、自分も同じようにコーディングしてみましょう。
こちらも、扱っているのは基礎の部分のため、学習を一通り終えたら、早い段階で実践的なWebサイトのコーディングに移ることをおすすめします。
Codejump
模写コーディングの教材を提供しているサイトで、無料で利用可能です。
初級〜上級・実践など項目に分かれ、シンプルなものから実務を想定したものまで、様々なサイトを経験できます。
中級以上になるとjQueryを扱うようになり、WordPressにも挑戦できます。
HTML・CSSを習得したら、ぜひとも挑戦してみましょう。
Udemy
動画で学べるオンライン講座で、第一線で活躍している講師から、実践的な知識やスキルをわかりやすく学ぶことができます。
また、定期的にセールが開催されており、セール期間なら千円台で購入可能です。
HTML・CSSを学ぶなら、以下の講座が人気です。
HTML・CSSのあとに、勉強しておきたい3つのスキル
HTML・CSSを習得したら、以下のスキルについて勉強しましょう。
- Webデザイン
- JavaScript/jQuery
- WordPress構築
それでは、一つ一つ解説していきます。
Webデザイン
デザインカンプからの情報を受け取るために、 デザインツールの操作が必要となります。
実務においても、Webデザイナーとコミュニケーションを取る機会が数多くあるでしょう。
Webデザインに関する知識やスキルについても、習得しておきましょう。
JavaScript/jQuery
Webサイトに動きをつけるプログラミング言語で、「スライドショー」「ポップアップウインドウ」などさまざまなアニメーションを実装できます。
しかし、よく使われるシンプルなアニメーションについてはjQuery（JavaScriptを簡単に使えるよう加工したもの）で実現できます。
そのため、JavaScriptはあくまで基礎の部分にとどめて、jQueryの学習を中心にすすめましょう。
WordPress構築
1つのWebサイトの中で、複数のブログ記事やお知らせページを作成・管理するシステムのことをCMS（Content Management System）といいます。
そして、CMSの中で非常に多いシェアを誇るソフトウェアこそが、WordPressです。
HTML・CSS・JavaScript/jQueryに加え、WordPressでのサイト構築までを請け負うことで、応募できる企業・案件の幅を広げましょう。
HTML・CSSを短期間で効率よく勉強するなら、独学よりもオンラインスクールでの学習がおすすめ
HTML・CSSのスキルは独学での習得も可能ですが、どうしても「学習効率が上がらない」「モチベーションが上がらない」といった皆様には、オンラインスクールを利用することをおすすめします。
オンラインスクールでは、充実したカリキュラム・経験豊富なメンターを、自分のペースで活用できることが大きな魅力です。
コード入力時の不明点から、学習の進め方まで、困ったことを質問することで、学習効率を向上できます。
また、同じ志をもつ受講者たちと切磋琢磨しあうことで、モチベーションを上げることができるでしょう。
「もっと効率よくスキルを身につけたい」と感じた人は、オンラインスクールを活用してみてはいかがでしょうか？
まとめ
本記事では、HTML・CSSを独学で勉強する方法を解説しました。
以下のステップに沿って、自分のレベル・目的に合った書籍やWebサービスを選び、学習を進めましょう。
- テキストエディタをPCにインストールする
- HTML・CSSの基礎知識を学ぶ
- 簡単なWebサイトを作ってみる
- レスポンシブデザインについて学習する
- CSS設計について学習する
- デザインカンプからコーディングを実施する
挫折しない効率的な勉強方法は、以下の通りです。
- アウトプットを重視する
- コードを暗記しない
- 共に学習する仲間をつくる
- 相談できる指導者をさがす
そして、HTML・CSSの学習が終わったら、さらに充実したWebサイトを作るために、「Webデザイン」「JavaScript/jQuery」「WordPress構築」に挑戦しましょう。
「独学はやっぱり難しい！」といった皆様には、オンラインスクールを利用することをおすすめします。
実用的なカリキュラムと経験豊富なメンターで、短期間でスキルを習得し、同じ志をもつ受講者たちと切磋琢磨しあいながら高いモチベーションで学習に臨みましょう。
本記事が、これからHTML・CSSの勉強を始める皆様のお役に立ちましたら幸いです。
編集部おすすめ
プログラミング おすすめ通信講座
オンライン完結で場所や時間にとらわれず学べる！
Webアプリケーション開発を学べるオンラインプログラミングスクール。
DMM認定の現役エンジニア講師が教える、プログラミングスクール!
一人ひとりの学びに合わせたマンツーマン体制で日々の学習を手厚くサポート。
AIプログラミングが未経験からでも学べる！
AIに特化しているからこそ、講師の層も厚くサポートも手厚い！
