HTML/CSSを勉強してできること
HTML/CSSは、「Google Chrome」のようなブラウザを通して閲覧できるWebページを作るための言語です。表示するコンテンツを決める「HTML」、デザインやレイアウトを決める「CSS」の2つを併用するため、よく「HTML/CSS」と表記されます。
コーポレートサイトや個人ブログ、SNSなど、ブラウザからアクセスできる大半のWebページはHTML/CSSで作られています。Webサイト・Webアプリを実現するためには、基本的にHTML/CSSが欠かせません。
HTML/CSSを勉強することで、Webサイト・WebアプリのWebページを作ることが可能です。WebエンジニアやWebデザイナーを目指す場合はもちろん、個人的にWebサイトを作りたい場合もHTML/CSSに関する知識は必要といえます。
HTML/CSSのおすすめ勉強方法
一般的なソフトウェア開発には、コンピューターを動かすための命令を記述する「プログラミング言語」を使います。しかし、HTMLは「マークアップ言語」、CSSは「スタイルシート言語」と呼ばれるもので、プログラミング言語ではありません。
- マークアップ言語：コンテンツを構造化して整理するための言語
- スタイルシート言語：コンテンツを装飾するための言語
プログラミング言語のような命令は記述しない分、習得難度が低く、独学でも習得しやすいといえます。HTML/CSSを独学で勉強する方法は、主に次の3つです。
- 本を読む
- 学習サイトを利用する
- 学習アプリを利用する
それぞれ詳しく見ていきましょう。
本を読む
HTML/CSSはWebの基本であるため、さまざまな入門書が出版されています。こうした本を購入して読むことで、HTML/CSSの概要や基礎文法の勉強が可能です。基本的な知識が集約された入門書を読めば、1冊だけでも体系的に勉強できます。
本を用いた学習は、パソコンを使わずに知識を得られるため、じっくり勉強したい方におすすめです。ただし、知識を定着させるためにはパソコンでの実践も欠かせません。パソコンを用いた実践とはやや相性が悪い難点もあります。
学習サイトを利用する
オンラインでHTML/CSSを勉強したい場合、学習サイトを利用する方法もおすすめです。Web開発に特化した学習サイトであれば、基本的にHTML/CSSの学習コースは用意されています。
学習サイトは、主にパソコンのブラウザを通して利用するため、パソコンを用いた実践学習と相性がよいです。また、必要に応じて教材がアップデートされるため、最新の技術を勉強できるメリットもあります。
ただし、インターネットに接続できる環境が必要となります。また、高品質な学習サイトだと月額料金が発生することが多い点に注意しましょう。
学習アプリを利用する
スマートフォンやタブレットで使える学習アプリを利用する勉強方法もあります。通勤・通学の電車内、休憩時間など、スキマ時間でも手軽に勉強できるのが魅力です。多くの学習アプリは、Webの基本であるHTML/CSSに対応しています。
HTML/CSSの基礎文法はもちろん、コードの穴埋め問題など、実践を意識した練習ができる学習アプリも多く存在します。ただし、パソコンで使える学習アプリと比べて制約が大きいのが難点です。
タップ操作が中心のため本格的なコードを書いたり、コードの表示をブラウザで確認したりするのは難しいでしょう。また、学習アプリによっては一部機能の利用に課金が必要なケースもあります。
HTML/CSSの大まかな勉強手順
HTML/CSSは習得しやすいとはいえ、非効率的な勉強手順だと多くの時間がかかってしまいます。HTML/CSSをできる限り短期間で習得するために、大まかな勉強手順を理解しておきましょう。
具体的には、次の5ステップで進めていくのがおすすめです。
- テキストエディタを導入する
- HTMLの基礎文法を学ぶ
- CSSの基礎文法を学ぶ
- 既存のWebページを模写して実践する
- オリジナルのWebページを制作して実践する
各ステップについて、順番に見ていきましょう。
1. テキストエディタを導入する
まずは「テキストエディタ」を導入しましょう。テキストエディタは、テキスト（文字情報）を作成・編集するためのソフトウェアです。
プログラミング向けのテキストエディタだと、コードの色分け、コードの入力補完といった機能があります。最初にテキストエディタを導入しておくと、コーディングの実践がスムーズになるでしょう。
テキストエディタの種類はさまざまですが、無料で使えて高機能な「Visual Studio Code」がおすすめです。なお、HTML/CSSはブラウザ上で表示を確認できるため、テキストエディタ以外に特別な実行環境は必要ありません。
2. HTMLの基礎文法を学ぶ
HTMLとCSSがありますが、先にHTMLの基礎文法を学びましょう。CSSは、HTMLで書いたコードに対してデザインを調整するため、HTMLの知識習得が前提となります。
HTMLの基礎文法では「タグ」の勉強がメインです。HTMLでは、<タグ名>～</タグ名>のようにタグでテキストをはさむのが基本となります。たとえば、Webページ内のテキストを段落にする際には<p>テキスト</p>のように「pタグ」を使います。
ほかにも多数のタグがあり、機能はさまざまです。主要なタグの使い方を学びましょう。導入したテキストエディタを使って、実際にコードを書くことが大切です。
3. CSSの基礎文法を学ぶ
次に、CSSの基礎文法を学びましょう。HTMLで記述したWebページの骨組みに対して、CSSでデザインを整える方法を学びます。CSSのコードはHTML内に埋め込むか、専用のCSSファイルに記述してHTMLから読み込ませることが可能です。
CSSの基礎文法では「プロパティ」の勉強がメインとなります。CSSではセレクタ（対象のHTMLタグ）、プロパティ（装飾の種類）、値（具体的な設定）を記述するのが基本です。たとえば、pタグのテキストを青色にする場合、次のように記述します。
p {
color: blue;
}上記では文字色を装飾する「colorプロパティ」を使いましたが、ほかにも多数のプロパティがあります。主要なプロパティの機能や使い方を学びましょう。こちらもテキストエディタを使って、装飾効果を体感することが大切です。
4. 既存のWebページを模写して実践する
HTMLとCSSの基礎文法を把握したうえで、Webページの制作を実践しましょう。しかし、最初から高品質なWebページを自作することは簡単ではありません。そのため、慣れるまでは既存のWebサイトを模写（真似）して練習するのがおすすめです。
ただし、最初から答えのコードを見てはいけません。自分で考えながらWebサイトの表示を再現することで知識が定着し、実践力アップにもつながります。
なお、WebページのHTML/CSSコードはブラウザ上で確認可能です。たとえば、Google Chromeでは標準搭載の「デベロッパーツール」でHTML/CSSコードを表示できます。模写が完了した後は、実際のコードを見て答え合わせしましょう。
5. オリジナルのWebページを制作して実践する
模写に慣れてきた頃に、オリジナルのWebページを制作して実践しましょう。どのようなWebページを作るか企画し、HTML/CSSを用いて形にします。架空のコーポレートサイトやショッピングサイトなど、どのようなWebページでも構いません。
オリジナルのWebページを制作する経験を繰り返すことで実践力が養われ、HTML/CSSのコーディングスキルが向上します。
HTML/CSSとあわせて勉強すべき言語
HTML/CSSだけでは、動きのない静止画のようなWebページしか制作できません。たとえば、ボタンが押されたときに表示を変えたり、サーバーに保存されたデータを取得して表示したりすることは不可能です。これらを実現したい場合、次の言語も勉強する必要があります。
- JavaScript
- バックエンド開発言語（SQL＋1種類）
それぞれ詳しく見ていきましょう。
JavaScript
「JavaScript」は、Webページに動的な要素をプラスするプログラミング言語です。JavaScriptを使えば、Webページに複雑なアニメーションや、動きのあるボタンなどを実装できます。
JavaScriptのコードはHTML内に埋め込むか、専用のJavaScriptファイルに記述してHTMLから読み込ませることが可能です。ブラウザ上で動作する点はHTML/CSSと変わりません。ただし、JavaScriptはプログラミング言語のため、より多くの文法要素を学ぶことが求められます。
なお、HTML/CSSやJavaScriptを用いて作られる、ユーザーから見える部分のプログラム要素を「フロントエンド」と呼びます。JavaScriptの勉強方法について詳しくは、次の記事を参考にしてください。
関連記事
・JavaScriptの勉強ガイド！勉強方法や勉強手順
バックエンド開発言語（SQL＋1種類）
HTML/CSSやJavaScriptで作られたWebページは、インターネットを介して裏方の「サーバー」からユーザーのブラウザへと送信されます。サーバーは、Webサイトのデータやプログラムなどを管理するコンピューターです。
ユーザーが求めるWebページを提供するには、サーバー側で動作するプログラム要素も用意しなければなりません。これを「バックエンド」と呼びます。
バックエンド開発のプログラミング言語はフロントエンドとは違い、豊富に存在します。具体的には、「PHP」「Java」「Ruby」「Python」などが挙げられます。全て習得しようとすると時間がかかるため、いずれか1言語に絞って学びましょう。
また、サーバー側では大量のデータを「データベース」という仕組みを用い、効率よく管理します。このとき、データベースを操作するために必要な言語「SQL」の知識が必要です。
HTML/CSSの勉強を成功させるためのポイント
HTML/CSSの勉強を成功させるために、ポイントを把握したうえで取り組むことが大切です。以下で詳しく見ていきましょう。
勉強する習慣を作る
勉強のペースを保てるように、勉強する習慣を作りましょう。個人差はありますが、HTML/CSSの習得には早くても20～30時間程度はかかることが一般的です。ある程度の期間は勉強を続ける必要があり、習慣化しないと長続きしません。
勉強する時間帯や勉強時間を決め、一定のペースで勉強する習慣を作りましょう。勉強を習慣化することで、息切れせずに勉強を積み重ねることが可能です。
積極的に実践する
HTML/CSSの入門書や学習サイトのコードを見ただけで満足するのはNGです。積極的に実践を取り入れましょう。自分でHTML/CSSのコードを書くことで、知識をより早く定着させることが可能です。
HTML/CSSのコードはブラウザで表示を確認できる分、プログラミング言語よりも実践がしやすいといえます。上手く表示できなかったとしても、コードを見直してすぐに再確認できます。どんどん実践経験を積んでレベルアップを図りましょう。
まとめ
HTML/CSSは、Webサイトの制作やWebアプリの開発に欠かせない言語です。JavaScriptなどと比べて習得難度が低く、本や学習サイト、学習アプリを用いた独学でも習得できます。
とはいえ、非効率的な勉強方法では時間がかかってしまいます。HTML/CSSをできる限り短期間で習得するには、正しい勉強方法や勉強手順を把握・実践することが大切です。HTML/CSSの勉強を効率よく行いたい方は、今回の内容をぜひ参考にしてください。
