HTML・CSSの基礎知識
ここでは、HTML・CSSの基礎知識について解説します。HTMLとCSSの違いやそれぞれの役割などについてまとめていますので、HTMLやCSSという言葉を初めて聞いた方は、まずはこちらから読み進めてください。
HTMLとは？
HTMLとは、Webページを作成するための言語のことです。タグを使ってWebページの書式を表します。たとえば、表・画像・リンクなどのWebページに必要な要素を、任意の位置に配置することが可能です。
HTMLで書かれたソースコードをブラウザに読み込ませることで、ブラウザがHTMLをWebページに変換して表示します。
CSSとは？
CSSとは、主にWebページのデザインを変更するための言語です。CSSを使うことでWebページの文章の色を変更する・フォントサイズを変更するなどの調整ができます。
なお、HTMLのみでデザインを調整することもできます。CSSがなかった頃は文章の構造設定・デザイン設定をHTMLだけで行っており、現在も技術的には可能です。
しかし、HTMLでデザイン設定を行うと、ソースコードが長くなり読みにくくなります。読みにくくなると、Webページを修正する際に該当箇所を探すのが困難になるでしょう。
そこで、デザイン調整はHTMLではなくCSSで行うようになりました。デザイン関連の記述をCSSに移すことで、HTMLのソースコードが見やすくなります。現在ではWeb制作をする際、必ずと言って良いほどCSSが使われています。
CSSはHTMLに埋め込んで使うことも可能ですが、ソースコードの可読性を上げるために別ファイルに記述することが多いです。
HTML・CSSは難しい？
「HTML・CSSは難しい？」と気になる方もいるでしょう。エンジニアの方からすると、HTMLやCSSはそこまで難しくはありません。基本的な構造がシンプルなので、少なくともPHPやJavaScriptと比べると比較的簡単でしょう。
しかし、タグの種類やプロパティの書き方など覚えることが多いので、HTML・CSSを理解するためにはきちんと学習時間を確保する必要があります。
HTML・CSSの使い方
続いて、HTML・CSSの使い方を紹介します。HTMLとCSSを使ってWebサイトをどのようにデサインするのかといった手順をまとめました。HTMLとCSSのファイルの作り方やブラウザに表示する方法などが分からない方は、こちらを参考にしてください。
①必要なものを用意する
まずは、HTML・CSSでWebサイトを作る際に必要なものを準備します。HTML・CSSのソースコードを記述するには、テキストエディタが必要です。テキストエディタは普段使っているもので問題ありません。
テキストエディタをインストールしていない方は、メモ帳でもソースコードを記述することができます。
続いて、HTML・CSSの表示結果を確認するために、Webブラウザが必要です。Webブラウザの種類はさまざまありますが、特に指定はありません。パソコンにあらかじめインストールされているもので問題ありません。
上記で説明したテキストエディタ（メモ帳）とWebブラウザの2つがあれば、Webサイトを作成することができます。ただし、作成したWebサイトをネット上に公開するためには、Webサーバーが必要です。Webサーバーは自分で立てたり、レンタルしたりして準備します。
なお、今回は自分が作成したWebサイトをパソコンで確認する手順のみ説明しますので、Webサイトの公開方法は割愛します。
②HTMLの雛形を作る
次に、HTMLの雛形を作ります。HTMLは特定の書式に従って書く必要があります。書式に従わないと、ブラウザがHTMLのソースコードを正しく読み込むことができません。テキストエディタを開き、以下のようにHTMLの雛形を記述しましょう。
<html>
<head>
</head>
<body>
</body>
</html>雛形を記述したら、HTMLファイルを保存します。ファイル名は「test.html」としましょう。ファイルの拡張子を「html」にすることで、htmlファイルとして識別されます。
HTMLは、html要素・head要素・body要素の3要素が軸となっています。はじめにhtml要素・head要素・body要素の3つのタグを記述します。「html」は、この文書がHTMLの文書であることを示すタグです。htmlタグを記述することで、ブラウザが「これはHTMLなんだ」と認識することができます。
「head」は、文書のメタデータを示すタグです。たとえば、headタグの中にWebサイトのタイトルを記述することが可能です。「body」は、文書の本文を示すタグです。bodyタグの中にWebページに表示する文章を記述します。
③表示する情報を記述する
続いて、Webページに表示する文章を記述します。先程解説したように、Webページに表示する文章はbodyタグの中に記述します。bodyタグの中に、以下のように「Hello World」と記述してください。
<html>
<head>
</head>
<body>
Hello World
</body>
</html>上記のように記述することで、Webページに「Hello World」と表示させることができます。
④記述した内容が正しく表示されるかをブラウザでチェックする
正しく「Hello World」と表示されるかどうかを確認します。確認するには作成したHTMLファイルをブラウザで開きます。ブラウザでHTMLファイルを開くには、作成した「test.html」をダブルクリックします。するとブラウザが起動し、「test.html」の記述内容がブラウザで表示されます。
正しく記述できている場合、「Hello World」と表示されます。以上でHTMLファイルの作成・確認は完了です。
⑤HTMLにCSSを読み込ませる
次に、CSSファイルを作成します。なお、CSSファイルを作成する前に、HTMLにCSSを読み込ませる設定をします。CSSを読み込ませるには、headタグにCSSのファイル名を指定します。次のように記述してください。
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
Hello World
</body>
</html>linkタグは関連する文書を指定するためのものです。ここでは「test.css」を関連ファイルとして指定します。このように記述することで、HTMLにCSSを読み込ませることができます。
⑥CSSファイルを作成する
最後に、CSSファイルを作成しましょう。テキストエディタを開き、以下のように記述してください。
body {
font-weight: bold;
}記述したらファイルを保存します。ファイル名は「test.css」にしてください。先程同様、「test.html」を開いて確認しましょう。「Hello World」という文字が太字になっています。これはCSSファイルによって、Webページ上の文字を太字に変更したからです。
CSSは「セレクタ{プロパティ:値;}」というように記述するのが基本です。セレクタに「何を変更するのか」を記述します。上記の場合、bodyタグの中に書かれた文章全てが対象となっています。プロパティと値には、「何をどのように変更するのか」を記述します。上記の場合、文章を太字に変更しています。
これがCSSの書き方の基本です。
HTML・CSSの独学方法
ここでは、HTML・CSSの独学方法について解説します。HTML・CSSはそこまで難しいものではありません。プログラミングスクールで学ぶ方法もありますが、HTML・CSSなら独学でも十分習得は可能でしょう。以降で、おすすめのHTML・CSS独学方法について解説します。
書籍を活用する
HTML・CSS関連の書籍は多数販売されています。書籍を購入することで、HTML・CSSを体系的に身につけることが可能です。書籍は内容が整理されており、イラストや図解などが付いているものもあります。文章を読むのが苦手な方でも分かりやすいように書かれているものもあるため、学びやすいでしょう。
なお、書籍はなるべく最新のものを選ぶことが重要です。出版日が数年前の書籍だと、HTMLやCSSのバージョンが古い場合があります。2022年4月現在、HTMLは HTML Living Standard、CSSはCSS3が最新バージョンです。
HTML・CSSはバージョンによって書き方が異なる場合があるため、最新バージョンに対応している書籍を選ぶようにしましょう。購入する前に、書籍の出版日は必ず確認してください。
学習サイトを使う
学習サイトで勉強するのもおすすめです。Progateやドットインストールなどには、HTML・CSSの教材があります。学習サイトは月額1,000円程度で活用できるため、コストパフォーマンスに優れています。
Progateはスライドで、ドットインストールは動画でHTML・CSSを学ぶことが可能です。どちらか自分にとって分かりやすい方を選択して、勉強するのが良いでしょう。
【参考】：Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
【参考】：ドットインストール - 3分動画でマスターできるプログラミング学習サービス
スマホアプリで学ぶ
スマートフォン用の学習アプリにも、HTML・CSSを学べるものが多数あります。スマホアプリのメリットは、通勤・通学の移動中や仕事の休憩中などの隙間時間に取り組めることです。まとまった学習時間を確保できない方は、スマホアプリで少しずつ勉強すると良いでしょう。
しかし、スマホアプリはコーディングをしながら学ぶということができないため、知識のアウトプットには向いていません。参考書や学習サイトと平行しながら、スマホアプリで学習することをおすすめします。
HTML・CSSのおすすめ書籍6選
ここでは、HTML・CSSの学習におすすめの書籍を6冊紹介します。HTMLとCSSそれぞれ分けて紹介します。
なお、HTMLとCSSはセットで学習することが望ましいため、販売されている書籍の多くはHTML・CSS両方について解説しているものが多いです。そのため、以下で紹介する書籍もHTML・CSS両方の内容を含むものがあります。
【HTML】プロを目指す人のための HTML& CSSの教科書 ［HTML Living Standard準拠］
HTMLは2020年4月にバージョンアップされており、最新バージョンは HTML Living Standardです。本書はHTML Living Standardの仕様に沿った情報を基に、さらに最近のトレンドの内容も盛り込まれています。
特長としては、手順が短く区切られているためわかりやすく、コーディングの成果をすぐ見ることができ、達成感を得やすいです。また、「なぜこのHTML・CSSを使うのか」という丁寧な解説があるため、応用的な知識も身につけることができます。
▪著者：大藤 幹
▪ページ数：320ページ
▪出版社：マイナビブックス
▪発売日：2022/05/26
【参考】：プロを目指す人のための HTML& CSSの教科書 ［HTML Living Standard準拠］
【HTML】HTML解体新書
本書はHTMLをより深く理解したい方向けに、細かい構文のルールや各要素について詳しく解説しています。HTMLの基礎知識は既にあり、HTMLの高度な知識や技術を身につけたい方におすすめです。
本書を読むことで、静的なWebページはもちろん、動的なウェブアプリケーションをHTMLで設計・記述できるようになります。また、HTMLの仕様を理解する上で前提となる知識についても解説されています。
▪著者：太田 良典、中村 直樹
▪ページ数：352ページ
▪出版社：株式会社ボーンデジタル
▪発売日：2022/04/19
【参考】：HTML解体新書
【HTML】HTML＆CSSとWebデザインが1冊できちんと身につく本［増補改訂版］
本書は入門者向けに「コーディングとは何か」という、HTML・CSSを扱う前段階の知識について解説しています。実際のコーディングでは、チュートリアル方式でカフェ紹介サイトとネットショップサイトの作成がわかりやすく学べます。
また、基本的な構文のほかにレイアウトやデザインのテクニックについても詳しく解説されています。
▪著者：服部 雄樹
▪ページ数：384ページ
▪出版社：技術評論社
▪発売日：2021/12/27
【参考】：HTML＆CSSとWebデザインが1冊できちんと身につく本［増補改訂版］
【CSS】ざっくりつかむ CSS設計
フロントエンジニアやWebデザインの仕事をしたい方が、実務で役に立つような知識・技術が学べる本です。余白の設定・ユーティリティファーストなどのCSSの設計についてわかりやすく解説されています。
また、デザイナーやほかの開発者たちと連携するためのルール作成といった、チームでWebデザインをする上で重要なことについても触れられています。
▪著者：高津戸 壮
▪ページ数：272ページ
▪出版社：マイナビブックス
▪発売日：2021/12/23
【参考】：ざっくりつかむ CSS設計
【CSS】CSS設計完全ガイド ～詳細解説＋実践的モジュール集
CSSの多用な設計手法が紹介されており、個々のプロジェクトやWebサイトに最適な設計方法とは何かを考えるための知識が紹介されています。ボタン・ラベル・テーブルといった定番のモジュールの組み合わせ方について、実践的なコードを用いて解説しています。
効率的にCSSを使いたいWeb開発者やフロントエンジニアの方におすすめの本です。
▪著者：半田 惇志
▪ページ数：512ページ
▪出版社：技術評論社
▪発売日：2020/02/27
【参考】：CSS設計完全ガイド ～詳細解説＋実践的モジュール集
【CSS】教科書では教えてくれないHTML&CSS
HTML・CSSの講座や書籍で学習しても、実際の仕事で求められているレベルに達していないと感じる方におすすめの本です。本書では、HTML・CSSの基礎知識を現場で使えるようにするテクニックについて学べます。
本書を読めば、デザインの構造を把握し、作成したいイメージを形にするにはHTML・CSSをどのように設計するのかといったことが理解できます。
▪著者：狩野 祐東
▪ページ数：336ページ
▪出版社：技術評論社
▪発売日：2021/07/14
【参考】：教科書では教えてくれないHTML&CSS
HTML・CSSはWeb系エンジニアやWebデザイナーを目指すなら必須！ぜひ習得しよう！
本記事ではHTML・CSSについて解説しました。HTML・CSSとは何かを理解して頂けたかと思います。HTMLやCSSはWebサイトをデザインする上で必ず使うものです。Web系エンジニアやWebデザイナーを目指すなら、まずHTML・CSSを習得しましょう。
さらに、JavaScriptやPHPなどのプログラミング言語も習得できると、より仕事の幅が広がるでしょう。本記事がHTML・CSSについて知りたい方にとって、有意義なものとなれば幸いです。
新着記事やエンジニアに役立つ情報をお届け！
日々のキャッチアップをお手伝いします！
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
