HTMLとCSSは、Webサイトの作成に欠かせない言語です。WebデザイナーやWebエンジニアを目指していて、HTMLとCSSを独学で身につけたいと考えている人も多いのではないでしょうか。
結論、HTMLとCSSは独学でも習得できます。ただし、独学の場合は挫折する可能性も高いです。そのため、学習する目標を決めて、効率よく進めるように意識する必要があります。
この記事では、HTMLとCSSの独学に関して、身につけるべき技術と学習の方向性の決め方について解説します。独学の流れを把握して、最短でスキルを身につけられるようにしていきましょう。
- HTMLとCSSを独学で身につけたい人
- HTMLとCSSを独学で習得する効果的な方法を知りたい人
- HTMLとCSSの独学におすすめの本やサービスを知りたい人
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
HTMLとCSSは独学でも習得できる？
HTMLとCSSは、独学でも十分に習得できます。Webサイトやアプリ開発の基礎となる言語であり、他の言語よりも比較的簡単に身につけられるでしょう。
とはいえ、その道は決して簡単というわけではありません。独学だとわからないことを調べるのに時間がかかるうえ、質問できる人もいないからです。そのため、効率のよい学習方法を知っておくことが大切です。
まずは、HTMLとCSSがどんな言語かを理解しましょう。言語の性質を知ることで、学習を進めやすくなります。HTMLとCSSでできることを知ってから、学習方法を決めていくことが効率化のコツです。
HTML・CSSの基礎知識
HTMLとCSSの勉強を始めるなら、まずはどんな言語なのかを知っておきましょう。
HTMLとCSSは、それぞれ以下のような言語です。
- HTML：Webサイトの要素・構造を作るための言語
- CSS：HTMLで作った要素に見た目を追加するための言語
なお、HTMLとCSSで記述することを「コーディング」と言います。
それぞれできることと役割を理解して、基礎知識を押さえておきましょう。
HTMLとは
HTMLは、Webサイトの要素や構造を作るための言語（マークアップ言語）です。タグと呼ばれる記述方式を用いて、ブラウザに要素を伝える役割を担っています。
主要なHTMLタグの例は以下の通りです。
- divタグ
- pタグ
- imgタグ
- aタグ
HTMLタグは数多くあるので、最初にすべて覚えようとしてもきりがありません。暗記しようとするよりも、学習の中でひとつずつ覚えていくのがおすすめです。
HTMLタグは、こちらの記事で紹介しています。
CSSとは
CSSは、HTMLで作成した要素に見た目を与える言語です。CSSは「スタイルシート言語」と呼ばれ、CSSで指定した見た目を「スタイル」と呼びます。
CSSで指定できるスタイルの例は以下の通りです。
- テキストの色やフォントを変える
- 要素の大きさ（横幅・高さ）を変える
CSSで要素にスタイルをあてるには、「プロパティ」と呼ばれる記述を行います。プロパティの数も非常に多いので、暗記して覚えようとせず必要な時に調べるようにするとよいでしょう。
HTMLとCSSの独学で身につけるべき5つの技術
HTMLとCSSは、Webサイトやアプリの構造と見た目を作るのに適している言語です。まずはどんな技術があるのかを把握して、Webサイトの構築を目指しましょう。
Webサイトを作成するために必要な技術としては、主に以下の5つがあります。
- 要素
- レイアウト
- レスポンシブ対応
- CSS設計
- デザインカンプからのコーディング
それぞれ解説していきます。
要素について学習する
Webサイトの作成に欠かせないのが、「要素」です。Webサイトを構成する要素には、テキストやボタン、画像など様々な種類があります。
要素がもつ意味や性質を知っておくことで、Webサイトの作成を効率よく行えます。最初は以下の3つについて学習するとよいでしょう。
- ブロックレベル要素
- インライン要素
- インラインブロック要素
上記の3要素については、以下の記事を参考にしてください。
また、HTMLで作成する要素のほかにCSSで作成する「擬似要素」もあります。擬似要素を上手に活用すれば、CSSで表現できることが飛躍的に増えるので、擬似要素についても学習しておきましょう。擬似要素については、こちらの記事で詳しく解説しています。
レイアウトについて学習する
Webサイトの構成を作るには、レイアウトの知識も必要です。要素の配置を勉強することで、見やすいWebサイトを作成できます。
HTMLとCSSのレイアウトについては、以下の2つの技術を学ぶのがおすすめです。
- Flexbox
- Grid
上記2つのレイアウトモードは、Webサイトを効率よく作成するために欠かせない技術です。それぞれ解説記事があるので、こちらも参考にしてください。
Flexbox
Grid
プロに相談できる環境を「あなたのお部屋」に
要素にレイアウト。
HTML/CSSは学ぶべきことがいっぱいです。
独学だと、疑問が次々に湧いてきて学習がスムーズに進まなくなるも。
完全無料のプログラミング学習サービス「ZeroPlus Gate」なら
30日間、エンジニアに質問し放題。
HTML/CSSの学習を効率的に進められますよ！
レスポンシブデザインについて学習する
Webサイトの見え方は、表示しているデバイスの幅によって異なります。ユーザーがWebサイトを閲覧するときの主なデバイスは以下の3種類です。
- PC
- タブレット
- スマートフォン
特にほとんどの人はスマートフォンを使用してWebサイトを閲覧しています。そのため、スマートフォン用に表示するページを用意することは実務で必須のスキルです。
表示するデバイスによってレイアウトを変えることを「レスポンシブ」と言います。Webサイトをレスポンシブ対応するためには、「メディアクエリ」という記述が必要です。
レスポンシブ対応を行うためのメディアクエリの書き方については、こちらの記事を参考にしてください。
CSS設計について学習する
Webサイトの作成をするなら、CSS設計についても学習しておきましょう。CSS設計とは、クラス名に命名規則を設けて管理をしやすくするためのテクニックです。
主要なCSS設計手法は以下の通りです。
- BEM
- OOCSS
- SMACSS
CSS設計は、規模の小さいWebサイトを作る場合は、個人で制作を行う時にはそれほど必要ありません。しかし、ページの多いWebサイトでコードも多くなるような場合や、チームでWebサイトの作成・運用を行う時には必要となります。
HTMLとCSSを仕事にするなら学習しておくべきスキルなので、しっかり押さえておきましょう。
デザインカンプからのコーディングを学習する
Webサイトの作成は、デザインデータをもとにコーディングを行います。この時、なんとなく同じ配置にするのではなくしっかり決められたpx数で表現するように求められることも少なくありません。そのため、デザインカンプ通りにコーディングを行うスキルも必要です。
コーディングの練習におすすめのWebサービスを探している方は、こちらの記事も参考にしてください。
HTMLとCSSの独学でWebサイトを作成するまでの流れ
HTMLとCSSを独学するときの流れは、以下の通りです。
- テキストエディタを用意する
- HTMLとCSSの書き方を勉強する
- Webサイトを写経・模写する
- 自分でWebサイトを作成する
- 作ったサイトをポートフォリオにまとめる
1．テキストエディタを用意する
HTMLとCSSを学習するなら、まずはテキストエディタを用意しましょう。テキストエディタとは、プログラミングやコーディングに使用する文字を編集するためのツールのことです。
テキストエディタは数多くの種類がありますが、特にこだわりがなければVisual Studio Code（VScode）がおすすめです。拡張機能が豊富に用意されており、初心者でも使いやすいでしょう。VScodeはこちらから導入できます。
導入方法を詳しく知りたい方はこちらの記事も参考にしてください。
2．HTMLとCSSの書き方を勉強する
テキストエディタを準備したら、HTMLとCSSの書き方を勉強しましょう。
HTMLとCSSの勉強方法は以下のものがあります。
- 本で勉強する
- Webサービスで勉強する
本やWebサービスのどちらを選ぶかは、自分の好みややりやすさから決めるとよいでしょう。本の方が馴染み深い人は本を活用して、手を動かしながら学習したい人はWebサービスを活用するのがおすすめです。
3．Webサイトを写経・模写する
HTMLとCSSの基礎を押さえたら、次は実戦練習を行いましょう。Webサイトの写経や模写は、非常におすすめの学習方法です。
写経と模写の違いは以下の通りです。
- 写経：コードを見ながら書き写すこと
- 模写：コードを見ないでWebサイトを再現すること
写経を行う時には、検証ツールを使ってコードを確かめましょう。検証ツールの使い方はこちらの記事で詳しく解説しています。
コーディングに慣れてきたら、正解コードのカンニングなしでWebサイトを再現する模写に挑戦してみましょう。コーディングのやり方についてはこちらの記事を参考にしてください。
模写を終えたら、最後に実際のコードを確認して、自分が書いたコードとの違いをチェックしましょう。
4．自分でWebサイトを作成する
いくつかのWebサイトを模写したら、次は自分でWebサイトを作ることを目標にしましょう。自分ですべて作成してみることで、大きくレベルアップできます。
Webサイトには、以下のような種類があります。
- コーポレートサイト：企業サイト
- ランディングページ（LP）：縦長1ページの商品やサービスに特化したサイト
- オウンドメディアサイト：自社で保有するメディアサイト
- ECサイト：商品やサービスを販売するためのサイト
- サービスサイト：特定のサービスや商品の説明に特化したサイト
- 採用サイト：企業の採用に関する情報を発信するサイト
まずはサイトをひとつ作ることを目標にしておきましょう。ひとつ作っただけで終わりにせず、多くの種類のWebサイト作成を経験してスキルを磨くことも大切です。
Webサイトの作成についてもっと詳しく知りたい人は、こちらの記事を参考にしてください。
5．作成したサイトをポートフォリオにまとめる
Webサイトを作ったら、ポートフォリオにまとめておきましょう。ポートフォリオとは、自分の作品や実績をまとめて、どんなスキルを持っているのかをアピールするためのものです。就職・転職活動の時やWebサイト制作の案件を探す時に必要になるので、作っておくとよいでしょう。
ポートフォリオは、最初に作るWebサイトとしてもおすすめです。自分のスキルをアピールできるポートフォリオサイトを作りましょう。
HTML・CSSの独学を効率よく進める勉強方法
HTML・CSSの独学を効率よく進めるコツは以下の通りです。
- 目標を決める
- アウトプットを意識する
- 暗記しようとしない
- 継続的に学習する
目標を決める
HTMLとCSSの独学を効率よく進めるためには、目標を決めることが大切です。目標を立てることで学習計画が立てやすくなり、必要なスキルを身につけるモチベーションも維持できます。
HTMLとCSSの学習では、Webサイトを作ることがひとつの目標として挙げられます。しかし、いきなり大きな目標を立てると挫折してしまうかもしれません。そのような失敗を防ぐためには、大きな目標だけでなく小さな目標を立てることも大切です。
例えば、大きな目標を「Webサイトを作成すること」にした場合は、学習の過程ごとに小さな目標を立てるようにしましょう。「今週は要素について、次の週はレイアウトについて...」というように、細かい期間で目標を立てると学習を進めやすくなります。
アウトプットを意識する
HTMLのCSSの学習は、アウトプットを意識して行いましょう。 本やWebサービスなどで学習していると、コードの書き方を見たり、説明を読んだりしただけで満足してしまいがちです。しかし、この状態はまだ技術が身についているとはいえません。
本を読んで学んだことや、Webサービスから知ったことは手を動かしてアウトプットすることを心がけましょう。コードの書き方について学習したなら、解説通りに出力するのではなく自分なりに色々な方法を試すことで技術が身についていきます。
また、できるようになった技術はメモに残しておきましょう。似たような実装を行う時に復習できるため、のちの学習を効率よく進められます。
暗記しようとしない
HTMLとCSSの学習において、暗記は必要ありません。初心者によくある失敗が、HTMLのタグやCSSプロパティを覚えようとしてしまうことです。膨大な数があるタグやプロパティを覚えようとするのは、効率の悪い方法です。
必要になった時に調べて使用できれば、それで十分です。とはいえ毎回調べてから記述するのも効率が悪いので、調べた知識はメモに残しておくことも忘れないようにしましょう。
継続的に学習する
HTMLとCSSの学習でもっとも大切なのは、継続的に学習することです。人間は基本的に楽な方に流されてしまう性質があるので、「今日はやらなくていいか」という日が続くと、そのうち学習を完全にやめてしまう可能性もあります。特に独学の場合は学習を休んでも注意されることはないので、自分の学習意欲をコントロールするように心がけましょう。
学習を継続するコツは、学習計画とスケジュールを立てておくことです。例えば、仕事がある人なら「仕事が終わった後に最低2時間勉強する」のような計画を立てて、それに従うように行動しましょう。
学習計画は自分の生活に合わせて、無理のない計画を立てることも大切です。
HTMLとCSSの独学におすすめの本
本を使ってHTMLとCSSを独学したい人は、以下の3冊がおすすめです。
- 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
- CSS設計完全ガイド ~詳細解説+実践的モジュール集
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
HTMLとCSSでWebサイトの作成を学習したい人には、こちらの本がおすすめです。コーディングの基礎知識はもちろん、Webサイトのレイアウトごとに制作の技術を学べます。購入者からの評価も高く、2019年〜2022年のHTML関連書籍の売上で1位を獲得している実績も残しています。
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
HTMLとCSSを楽しく学習したい人は、こちらの本がおすすめです。FlexboxやGridレイアウト、レスポンシブなどの技術も身につけられます。
技術面だけでなく、学習のコツやポイントなども解説しているので、初心者でも効率よくスキルを磨いていけるでしょう。
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計を学習するなら、こちらの本がおすすめです。CSS設計は非常に難しい部分でもあるので、初めのうちは理解するのに苦しむかもしれません。
この本を使って学習すれば、CSS設計のコツを掴むことができます。実践的なコードで設計を例を確認するのに最適な1冊です。
HTMLとCSSの独学におすすめのサービス3選
HTMLとCSSの学習におすすめのサービスは以下の通りです。
- Progate
- ドットインストール
- Codejump
1．Progate
ゲーム感覚でHTMLとCSSを学習したい人は、Progateがおすすめです。Web版とアプリ版があり、アプリ版ならスマホでも使用できます。しかしアプリ版はコースが少ないため、学習目的でProgateを使うならWeb版を活用しましょう。
Progateの特徴は以下の通りです。
- ゲーム感覚で楽しく学べる
- スライドで視覚的にもわかりやすく学習できる
- HTMLとCSSのコースはボリューム多め
Progateは、ゲーム感覚でHTMLとCSSを学べるWebサービスです。HTMLとCSSはコースが多く、初級編・中級編・上級編・道場編の4章から学習できます。初心者の場合は道場編をクリアすることを目標にするとよいでしょう。
Progateはあくまでも基礎的な内容のため、道場編が終わったら実践的な練習に移りましょう。
2．ドットインストール
動画を使ってHTMLとCSSを学びたいならドットインストールがおすすめです。3分程度の動画教材で、HTMLとCSSの基礎からWebサイトの作成まで学習できます。
ドットインストールの特徴は以下の通りです。
- 3分程度の動画で学べる
- HTMLとCSSの基礎からWebサイト作成まで学習できる
- 有料会員なら質問サービスもある
基本的には無料のサービスですが、有料会員になれば講師に質問できる特典が受けられます。独学で進めるのが不安な人は有料会員登録も検討してみましょう。
3．Codejump
コーディングスキルを磨きたい人は、Codejumpがおすすめです。Codejumpは、無料でコーディングの練習ができるサービスです。入門編から上級編までの教材があり、自分のレベルに合わせて学習することができます。
Codejumpの特徴は以下の通りです。
- 模写コーディングの教材を提供しているサイト
- 入門編から上級編まで豊富に教材がある
- 自分のレベルに合わせて学習していける
シンプルなものから実務を想定したものまで、様々なサイトを経験できることが特徴です。自力でコーディングできるようになればかなり実力を上げられるので、ぜひ挑戦してみてください。
HTMLとCSSを学習した後に身につけるべきスキル
HTMLとCSSをある程度学んだ後は、Webサイトの制作に必要なスキルを身につけましょう。特に重要なスキルは以下の3つです。
- JavaScript
- WordPress
- Webデザイン
JavaScript
JavaScriptは、Webサイトに動きをつけるプログラミング言語です。HTMLとCSSだけでは見た目と構造しか作成できませんが、JavaScriptを加えることによってユーザーの見やすさや体験を向上する機能を追加できます。
JavaScriptを学習するときは、以下のような機能を実装できるようになることを目標にするとよいでしょう。
- スライドショー
- カルーセルパネル
- アコーディオンメニュー
上記の実装は、Webサイトの作成でよく使用される機能です。Webサイトでよく見る機能を自分でも実装できるようになれれば、成長を実感しながら楽しく学習を進められるでしょう。
WordPress
WordPressは、サイトの公開作業や運用を簡単にするためのシステムです。このようなシステムのことを「CMS」といい、WordPressは世界の6割が使用しています。WordPressでサイトの運用をしたいと考えている人も多いため、Webサイト制作を仕事にしたい人にはWordPressの知識が必須です。
WordPressの学習では、以下のことができるようになるのを目指すとよいでしょう。
- WordPress化
- カスタム投稿
- カスタムフィールド
- カスタムタクソノミー
上記の実装ができれば、活躍できる案件の幅も広がります。
Webサイト制作を学びたいなら、WordPressの学習も大切です。
Webデザイン
Webサイトの作成には、デザインの知識も欠かせません。特にHTMLとCSSのコーディングはデザインデータをもとに行うので、Webデザインの知識も身につけておくとよいでしょう。特にWebデザイナーを目指す人には、デザインツールの操作スキルも必要です。
コーディング作業は、デザインカンプから行うことがほとんどです。そのためデザインツールの操作もある程度できるようになっておくと、仕事をするときにスムーズに進められるでしょう。
Webサイト制作の学習の進め方について、もう少し詳しく知りたい方はこちらの記事も併せてお読みください。初心者を脱却してWebサイト制作を仕事にするまでの道のりを解説しています。
まとめ：HTMLとCSSは独学でも身につけられる！
HTMLとCSSは独学でも十分に身につけられます。効率よく学習を進めるためには、目的を決めて学習計画を立てることが大切です。
HTMLとCSSを学習するなら、まずは以下5つの技術を身につけましょう。
- 要素
- レイアウト
- レスポンシブ対応
- CSS設計
- デザインカンプからのコーディング
上記の技術を駆使して、Webサイトの作成を目標にするのがおすすめです。
HTMLとCSSの学習がある程度進んできたら、JavaScriptやWordPress、Webデザインなどの学習も行っていきましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
