HTMLとCSSの違いとは?特徴と作成方法をわかりやすく解説！

更新日:2024-11-28 公開日:2022-09-19 by SEデザイン編集部

HTMLとCSSは、Webページを構成する際に使用される言語です。HTMLでWebページの骨組みを作り、CSSでデザインを整えていくことで、Webサイトが作成できます。

Webページを初めて作成する際、HTMLとCSSの違いを理解していないために「思った通りに表示できない」と苦労するケースは少なくありません。また、HTMLとCSSがJavaScriptとどのように違うのかも気になるところです。

見栄えのいいWebページを作るためには、HTMLとCSSの基礎知識を学んで、両者の違いを理解しておく必要があります。今回は、HTMLとCSSの基本的な知識と違いを説明し、それぞれの記述方法や、HTMLとCSSを使ったWebページを作成する基本の流れなどを分かりやすく解説します。

HTMLとCSSはWebページを構成する言語

HTMLとCSSは、どちらもWebサイトを構築する言語で、Webページ作成の基本となるものです。この2つは同じ場面で使われることが多いですが、役割には明確な違いがあります。

言語	役割	単体での使用
HTML	Webページの文書構造を指定する	できる
CSS	Webページの装飾やレイアウトを指定する	できない

HTMLはWebページの内容を作る骨組みになる言語です。単にテキストを表示するだけでなく、「見出し」や、「太文字」や「文字の色」を変更・強調することもできます。

一方、CSSはHTMLの表示レイアウトを装飾するための言語です。装飾や画面のレイアウトを整えて見栄えの良いWebページにするにはCSSが必要です。

HTMLとCSSの知識を理解して書き方を身につけることで、Webページの表現の幅を広げることができます。

近年は、WordPressのようなCMSの使用やコーディングの分業化が増えたため、HTMLやCSSにまったく触れずにWebページを作成するケースも多くなりました。しかし、ホームページの運用をするのであれば、自分が直接使う機会が少ないとしても知っておいて損はありません。たとえば、HTMLとCSSの基礎知識を理解しておくことで、エンジニアとのコミュニケーションがスムーズになるといったメリットがあります。

HTMLとCSSの基礎知識と違いを解説

HTMLとCSSの知識を理解して書き方を習得すれば、簡単にWebサイトが作れたり、エンジニアなどとのコミュニケーションが円滑になったりします。ここでは、HTMLとCSSのそれぞれの基礎知識と違い、書き方をご紹介します。

HTMLとは【Webページの骨組みになる言語】

HTMLは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略語で、Webページの骨組みになる言語です。マークアップ言語とも呼ばれ、見出しや段落、リンク、表などがWebページのどこに何が表示されるかを指定します。

HTMLはWebに関わるさまざまなものに使われており、Webの基本的な要素です。Webページの通常のテキスト以外にも、見出しの設定や、色や太さでの強調、下線などの装飾の指定もできます。HTMLは、<div>や<title>などのタグを使って文字列（要素）を囲むだけでできるので初心者にも分かりやすい言語です。

またHTMLは、ホームページだけでなくメールにも使えるのが特徴です。メール内にHTMLを使うことで、文字サイズや色の変更や、画像の挿入などができます。メルマガなどに活用することで、ビジュアルで訴求できたり、ユーザーが見やすくなったり、効果測定が可能となるでしょう。とくにメルマガでは、メールの開封率やクリック率などの測定が、今後の配信メールの改善に役立ちます。

閲覧しているWebページのHTMLは、ブラウザ上で簡単に確認可能です。ページ上の適当な場所を右クリックして「ページのソースを表示」を選択すると、そのページを構成しているHTMLが表示されます。

HTMLの最新バージョン「HTML Living Standard」

HTMLは、1989年にCERN（スイスの欧州原子核研究機構）によって開発され、1990年にコード化されました。1993年にバージョン1.0が発表されて以降、現在もバージョンアップされながら使われ続けています。

HTMLには複数のバージョンがあり、使える要素や記述のルールなどが異なります。HTMLファイルとしておもに使われている種類は、以下の通りです。

おもに使われているHTMLファイル	詳細
HTML 4.01	1999年に発表されたバージョンで、文章構造のみを記すもの。
XHTML 1.0	2000年に発表されたバージョン。タグを小文字で記述するなどルールが厳格になった。
HTML5	2014年に発表されたバージョンで、動画や音声の埋め込み、フォーム入力・送信の簡略化などWebアプリを作成するための仕様が新たに追加された。
HTML Living Standard	2021年に発表された最新バージョン。HTML5で適用されていたタグのルールが一部変更され、各タグの役割がより細分化されている。

なお、2024年現在、HTML Living Standardが最新版のHTMLです。

HTMLの書き方

HTMLは、テキストエディタでタグを使用することで作成できます。HTMLは、文字の装飾やボックス、画像の挿入などの指定が可能です。開きタグ（<>）と閉じタグ（）で囲み、タグで囲んだものがひとつの要素です。複数の要素を組み合わせることで、ひとつのWebページを作成できます。

基本的にHTMLは、以下の5つのタグで構成されています。

要素	概要	書き方
HTML宣言	HTMLの冒頭にかならず書くタグ。終了タグは不要	<!DOCTYPE html>
htmlタグ	コード全体を囲む	<html>〇〇〇</html>
headタグ	タイトルや本文などが入る	<head>〇〇〇</head>
titleタグ	ページのタイトル	<title>〇〇〇</title>
bodyタグ	Webページに実際に表示される部分	<body>〇〇〇</body>

bodyタグの中で使うタグには、以下のようなものがあります。

【bodyタグの中で使うタグの一例】

<h>見出し</h> （※<h1><h2><h3><h4>と見出しによって、数字が付く）
<p>段落</p>
<ul>リスト</ul>
<table>表<table>
<strong>強調</strong>
<a>リンク</a>
<img src="画像の場所"> （※閉じタグ不要）

タグは一部を除いて閉じタグが必要になるので、「/」を付け忘れないように注意しましょう。閉じタグを忘れると、適切に表示されなかったり、変な挙動を起こしたりしてしまいます。

HTMLを書き終わったら、Ctrl+Sで保存してブラウザで確認します。初めのうちは、ひたすらHTMLを書いては、表示して確認することを繰り返すことが上達の一番の近道です。

CSSとは【WebページのHTMLを装飾し見栄えをよくする言語】

CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、Webページにおける文字のフォントやサイズ、色のほか、画像の配置などのレイアウトを設定するために用いられるスタイルシート言語です。

HTMLだけでも装飾は可能ですが、CSSを活用したほうが効率的かつ効果的にページのデザイン性を高められます。

CSSのバージョンの歴史

最初のCSSである「CSS1」の規格は1996年に発表されましたが、サポートの不十分さなどが理由で、一般的に普及したのは2006年からでした。

1996年の「CSS1」発表以降、1998年に「CSS2」、2011年には「CSS2.1」へ次々とバージョンアップが続けられてきました。現行の最新バージョンは、2011年から多くのWebサイトで採用されている「CSS3」です。「CSS3」はCSS2.1をベースに、新たな機能の追加や改良が行われています。

CSSはバージョンにかかわらず、書き方に変更はありません。「CSS2.1」で使えるプロパティも、そのまま「CSS3」で使うことができます。ただし、「CSS3」で新しく追加されたプロパティは、「CSS3」でなければ使用できません。

CSSの書き方

CSSの書き方には、以下の3つの方法があります。

外部ファイルを読み込む
head内に記述する
インラインで記述する

それぞれの書き方と特徴、記述例は、下表の通りです。

	外部ファイルを読み込む	head内に記述する	インラインで記述する
書き方	CSSを別ファイルで用意し、HTMLのlinkタグで読み込ませる。	HTMLのhead内にstyleタグで記述する。	HTMLのタグの中に直接CSSを記述する。
特徴	複数のHTMLファイルで共通のCSSを利用するのに適している。	headタグにCSSを書き込み、個別にデザインを設定できる。	ページ内の各タグにデザインを指定することが可能。
記述例	・外部CSSでの記述 @charset "UTF-8"; h4{ color:blue; background-color:blue; border:3px solid lightblue; } ・HTMLでの呼び出し <link rel="stylesheet" href="css/stylesheet.css"> （cssフォルダ内の「stylesheet.css」を読み込む）	・head内に記述 <style media="screen"> h4{　 color:blue; background-color:blue; border:3px solid lightblue; } </style>	・HTML内の指定したい箇所に記述 <h4 style="color:blue;background-color:blue;border:3px solid lightblue;">CSSの書き方</h4>

上記の方法のどれを選んでもCSSは書くことができますが、一般的なのは外部ファイルを読み込む方法です。HTMLファイルから、別で作ったCSSファイルを読み込むことで反映することができます。

CSSファイルを読み込むためには、「絶対パス」や「相対パス」、「サイトルートパス」などいくつかの種類があります。パスとは、HTMLファイルからCSSファイルまでにたどり着く道のりのことです。 Webページに画像やリンクを入れる場合は、基本的にHTMLファイルを基準に、目的のCSSファイルの道のりを表す相対パスが使われます。

続いてCSSの実際の書き方を見ていきましょう。たとえば、文字のサイズと色を変更したい場合は、以下のように書きます。

【HTMLの基本】

【HTMLで変更した場合】

【CSSで書いた場合】

p{font-size: 20px, color: red;}

CSSでは文字のサイズや色以外にも、背景や背景色、フォントの種類・太さ、行や幅の指定・位置など、さまざまな指定をすることができます。

HTMLやCSSとよく間違われるJavaScriptとは？

Webページにおいて、HTMLがページの基本構造を定義し、CSSは体裁を整えるために機能します。しかし、動きのあるインタラクティブなWebサイトを作成するためには「JavaScript」が必要です。

JavaScriptは、Webページに動的な機能を追加するプログラミング言語です。たとえば、ユーザーがボタンをクリックすると内容が変わるような挙動は、JavaScriptで制御します。ほかにも、ポップアップウィンドウの表示やアニメーションの実行、リアルタイムのデータ更新といった便利な機能を実装可能です。

JavaScriptの記述方法には、HTMLファイル内に直接埋め込む方法や、外部ファイルに分離してリンクする方法があります。特に外部ファイルでの活用はコードを再利用しやすいため、開発の効率化に役立つでしょう。

HTML、CSS、JavaScriptの違いをよく理解して使い分けることで、魅力的で機能的なWebサイトを構築できます。

HTMLとCSSでWebページを作成する基本の流れ

HTMLとCSSを使ってWebページを作成する流れは、どのようなWebページを作るのかによって変わります。ただし順番が変わるだけで、基本の流れは変わりません。

HTMLとCSSでWebページを作成する基本の流れは、以下の通りです。

デザイン、レイアウトを考えて書き出す
ファイルやフォルダを作成する
HTMLを書く
CSSを書く
レスポンシブ対応をさせる（スマホとパソコンのデザインを違和感のないよう調節する）
適応されているかチェックする

Webページを作成する前には、どのような仕上がりにするかデザインやレイアウトを考えます。デザインやレイアウトを紙に書き出すことで、全体のイメージが把握しやすくなり、完成までスムーズに進められるでしょう。

デザインやレイアウトが決まったら、次に必要なファイルやフォルダを作成します。Webページによって変わりますが、基本的にはHTMLフォルダやCSSフォルダ、imagesフォルダ、jsファイルなどが考えられます。imagesフォルダは画像、jsフォルダはJavaScriptのことです。

フォルダを用意したら、HTMLとCSSを書き、ブラウザに読み込んで確認します。Webページは、スマートフォンでも見る人も多いため、レスポンシブ対応は必須です。レスポンシブ対応では、HTMLに表示される大きさを指定するviewportを設定し、デバイスに合ったCSSを書くことで設定できます。パソコンやスマートフォンで適応されているかチェックをしたら完成です。

HTMLやCSSを自動生成できるツール

Web開発の効率化を図るために、HTMLやCSSを自動生成できるツールが数多く登場しています。下表は、代表的な生成ツールをまとめたものです。

ツール名	概要	特徴
GitHub Copilot	AIによるコード生成支援ツール	自然言語の指示を理解してコードを生成可能。JavaScriptやPythonなど、多言語に対応する
IntelliCode	MicrosoftのAI支援ツール	VsCodeの拡張機能。コード補完機能が強化され、個々のプロジェクトに適した生成を行う
CodeWhisperer	Amazonのコード生成AI	AWSサービスとの連携に最適化された生成ツール。開発をスムーズに進行できる
Code Llama	高性能なコード生成モデル	複数のプログラミング言語に対応し、高い精度でコードを生成する
Web Code Tools	条件指定でHTMLやCSSコードを生成	プレビューを見ながら操作できるため、初心者にも使いやすい

近年では、GitHub Copilotのようなコード生成AIが注目を集めています。自然言語を理解できるため、開発者の作業効率を大幅に向上させることが可能です。

一方で、AIが生成したコードに対して入念なチェックも求められます。AIのコードは必ずしも適切なものとは限らず、Webサイトの脆弱性を引き起こすリスクがあります。セキュリティ上の懸念を払拭するためにも、スキルを持ったコーダーがしっかりとレビューし、必要に応じて修正を加えることが重要です。

HTMLやCSSに関するQ&A

サイト制作に携わっていると、HTMLやCSSに関する疑問が頻繁に湧いてくるものです。ここでは、そのなかでも特に関心が高い、以下の2つの疑問について回答します。

HTMLやCSSはSEOに影響する？
HTMLやCSSを独学で学ぶには？

順番に見ていきましょう。

HTMLやCSSはSEOに影響する？

HTMLやCSSはSEOに直接的に影響しませんが、間接的に影響を及ぼす可能性があるので注意が必要です。たとえば、コーティングが必要以上に長いと、処理速度や表示速度が遅くなることがあります。

良質なコンテンツなのかどうかの判断要素のひとつに「表示速度」があるため、HTMLやCSSは最適化させて簡潔に書くことが大切です。またHTMLでは、適切なタグやクラス名を使わなければいけません。バージョンによって、書き方が違う場合があるので、使用しているものに合った書き方をしましょう。

HTML5やHTML Living Standardでは、HTMLでは文章だけにして、見栄えや装飾はCSSなどで設定するのが良いとされています。HTMLコードがシンプルになり、検索エンジンのクローラーがコンテンツを理解しやすくなるためです。

Googleが理想とする書き方は、Googleのガイダンス「Google HTML/CSS Style Guide」に書かれています。詳しくは、Googleガイダンスを参考にしてください。

HTMLやCSSを独学で学ぶには？

HTMLやCSSを独学で学ぶには、まずは無料の学習サイトを活用するのが近道です。初心者向けのコースが充実している「Progate」や「ドットインストール」などのオンラインプラットフォームが始めやすいでしょう。

また、気軽に学習したいなら「Share Wis」や「Learn HTML」といったスマホアプリが便利です。「いちばんやさしいHTML5&CSS3の教本」や「HTML&CSSとWebデザインの基本」、弊社のグループ会社である翔泳社から出版されている「HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉」など、初心者向けに分かりやすく解説されている書籍も数多くあります。

自分に合った方法で、基礎から実践まで段階的に学んでいくことをおすすめします。

まとめ：HTMLやCSSを理解してWebサイト制作に活かそう

HTMLとCSSはWebサイト制作の基盤となるもので、知識があると簡単なWebサイト制作や日々のWebマーケティング業務に活かせます。自社ホームページを自主的に制作される方は、HTMLとCSSの基本的な知識を積極的に習得しましょう。

SEデザインでは、LP制作やオウンドメディア構築をはじめとしたコンテンツマーケティングの支援を行っております。貴社に最適な施策やプランをご提案させていただきますので、是非お気軽にお問い合わせください。

装飾	説明
hover	ページ内の要素にマウスカーソルを乗せたときに、色変更やアニメーションなどの指定した変化を起こさせる
box-shadow	ボックス要素に陰影をつけることで、立体的な表現を可能にする
border-radius	ボックスの角を丸められる機能。それぞれの角の丸み具合を個別に指定できる
linear-gradient radial-gradient	開始色と中間色、終了色を指定して、グラデーションをかける。linear-gradientでは方向も指定できる
transform	画像を変形（拡大、縮小、移動、回転、傾斜など）させられる