HTMLとCSSについて徹底解説！それぞれの違いや書き方についてくわしく紹介

「HTMLとCSSってどんな違いがあるの？」
「HTMLやCSSでどんなことができるの？」

HTMLとCSSを理解すればWebサイトを作成できます。しかし、それぞれの違いや書き方は知らない人も多いのではないでしょうか。そこで本記事では以下について解説していきます。

HTMLとCSSの違い
HTMLとCSSの書き方
HTMLとCSSを使ってWebページを作成する流れ

本記事を参考にそれぞれの言語の特徴を理解し、Webサイト制作にお役立てください。

HTMLとCSSの違い

HTMLとCSSはどちらもWebページを作成するための言語です。しかし、それぞれ役割が異なります。

言語	役割
HTML	Webサイトの構成
CSS	Webサイトの装飾

HTMLはWebサイトの骨組みを構成する言語です。タイトルや見出しなど、文章の構成を示す役割があります。一方CSSの役割はHTMLに装飾を施すことです。文字のサイズや位置を整えることで、ユーザーにとって見やすいWebサイトになります。

それぞれの言語について以下でくわしく解説していきます。

HTMLとは

HTMLとは「Hyper Text Markup Language」の略です。主に見出しや段落など、Webページ上の文章の構成を示す役割があります。また他のWebページに移動するためのリンクも記載可能です。

時代とともにバージョンが更新されており、現時点で最新のバージョンは「HTML Living Standard」です。WHATWGという組織によって策定されたバージョンで、2021年に発表されました。

HTMLの書き方

HTMLはテキストエディタというツールで作成します。テキストエディタはWindowsの「メモ帳」やMacの「テキストエディット」など、コードを書くためのツールです。他にもコードの入力補完やテキストの同時編集など、便利な機能を搭載したさまざまなツールがあります。

HTMLは意味の違うタグを使い分けて、Webページ上の文章に意味を持たせられます。たとえばタイトルを作りたい場合は、titleタグで文章を挟むことでコンピューターにその文章がタイトルであることを伝えられます。

<title>HTMLとは</title>

HTMLを記述する際は、htmlタグで全体を囲みその中にheadタグとbodyタグを記述します。headタグはコンピューターに向けた情報を伝えるもので、記述した内容はWebページ内に表示されません。そのため、Webサイトの内容として表示したい見出しや本文、画像などはbodyタグに記述しましょう。その後、以下のように「入れ子構造」でHTMLファイルを作成していきます。

<html>
<head>
<title>HTMLとは</title>
</head>
<body>
<h2>HTMLについて解説していきます</h2>
<div class=”main”>
<img src=”image/sample.com” alt=”サンプル画像”>
<p>HTMLはWebサイトを作るためのマークアップ言語です。</p>
</div>
</body>
</html>

HTMLタグの種類

HTMLタグの主な種類は以下のとおりです。

タグ	意味
!DOCTYPE html	HTML文書を示す宣言
html	HTMLコード
head	Webページの情報
body	Webに表示させる情報
header	Webのヘッダー部分
footer	Webのフッター部分
p	段落
h1~h6	見出し
img	画像
a	ハイパーリンク

CSSとは

CSSは「Cascading Style Sheets」の略です。文章の位置や色、サイズの変更などWebページの装飾を行う役割があります。また、クリックされた文字の色を変えるなど、軽微な動きを取り入れることも可能です。

現時点で最新のバージョンは「CSS3」です。過去のバージョンと比べて「文字に影をつける」「アニメーション効果をつける」など、機能が増えています。

CSSの仕組み

CSSは「セレクタ」「プロパティ」「値」の3つで構成されています。

セレクタ{
プロパティ:値;
}

それぞれの役割は以下のとおりです。

CSS	役割	例
セレクタ	どこにCSSを適用させるかを示す	見出しや段落
プロパティ	何にCSSを適用させるかを示す	サイズや色、位置
値	どのようにCSSを適用させるかを示す	大きくする、赤くする、右に移動させる

HTMLの各要素にスタイルを適用させていくことで、Webページの装飾が可能です。たとえば以下のコードは、「pの部分の」「colorを」「redにする」ことを示します。

p {
color: red;
}

CSSの書き方

CSSの書き方は下記の3種類です。Webページでの表示のされ方は同じでも、CSSを書く場所や記入内容が異なります。

インスタイルシート
内部スタイルシート
外部スタイルシート

それぞれくわしく解説していきます。

外部スタイルシート

外部スタイルシートとは、HTMLとは別にCSSのファイルを用意して、HTMLのheaderに読み込ませる方法です。

HTMLとCSSを別々のファイルに分けることで、一方だけの修正や編集がしやすいというメリットがあります。

またCSSのファイルを複数作れば、1つのHTMLでさまざまなレイアウトのWebページを作成可能です。そのためPC用とスマホ用など、同じWebページで複数のレイアウトを作りたい場合も外部スタイルシートの使用が適しています。基本的には外部スタイルシートを使用するようにしましょう。

内部スタイルシート

内部スタイルシートは、headタグにCSSを直接書き込む方法です。HTMLファイル内でCSSを含めたすべての情報が確認できるため、規模の小さいWebページの制作に適しています。

しかしHTMLファイルごとにCSSを記述する必要があるため、基本的には外部スタイルシートを使用するようにしましょう。

インラインスタイルシート

インラインスタイルシートは、HTMLタグに直接CSSを書き込む方法です。HTMLのそれぞれのタグに「style=””」を追加して、セレクタ・プロパティ・値を書き込んでいきます。対象の要素に直接書き込めるため、シンプルでわかりやすい方法です。

しかし、HTMLタグ一つ一つにCSSを記述する必要がある上に、他のHTMLファイルに読み込めないため、管理の手間が増えます。基本的には外部スタイルシートを使用しましょう。

CSSセレクタ、プロパティの種類

CSSのセレクタ、プロパティにはさまざまな種類があり、それぞれスタイルの適用範囲が異なります。下記はそれぞれの種類の一部です。

CSSセレクタ

よく使用される3つのCSSセレクタを表にまとめました。

CSSセレクタ	書式	スタイルの適用範囲
要素セレクタ	要素名	指定した要素
idセレクタ	要素名#id名	idが付いている要素
classセレクタ	要素名.class名	任意のclassが付いている要素

idやclassとは、CSSで装飾を行うためにHTML内に記述する、目印のようなものです。

他にもさまざまなセレクタが存在するため、気になる方は調べてみましょう。

CSSプロパティ

CSSには、以下のようなプロパティが存在します。値と組み合わせることで、文字色や指定領域の幅など、さまざまな対象にレイアウトを施せます。

CSSプロパティ	スタイルの適用範囲	値でできること
font	フォント関連をまとめて指定	フォントを変える
font-size	フォントのサイズ	サイズを変える
color	文字の色	色を変える
background-image	背景画像	画像の大きさや位置を変える
height	内容領域の高さ	高さを変える
width	内容領域の幅	幅を変える