HTMLとCSSの具体的な3つの違い！できることは？

HTMLとCSSの違い

プログラミングでデザインを行うには、HTMLやCSSについての理解を深めなければいけません。合わせて語られることの多い双方にはどのような特徴があり、どのような部分が異なるのでしょうか。この章では、定義、構文、拡張子の3つの分野に分けて、それぞれの違いを解説します。

定義

はじめに定義の違いから解説します。それぞれの定義をシンプルに述べると以下のとおりです。

HTML：Webページを表示するための言語
CSS：Webページの見た目を調整するための言語

HTML：Webページを表示するための言語

HTMLは、Webページを表示する役割を持つ言語です。Webページを一軒家だと仮定した場合、HTMLは骨組みや設計図に該当します。たとえば、どこにどのようなテキストを配置するのか、見出しとなるテキストはどの部分か、タイトルの内容はどうするのかなどです。

インターネットで調べ物をするときに見るホームページも、HTMLを用いてレイアウトが決められています。しかし、HTMLだけでは普段見ているようなレイアウトのホームページは完成しません。そこで必要になるのがCSSです。

CSS：Webページの見た目を調整するための言語

CSSは、Webページの見た目を調節する役割を持つ言語です。Webページを一軒家だと仮定した場合、CSSは壁やペンキ、窓のようなイメージに該当します。たとえば、文字の色や太さはどうするのか、ボタンのデザインはどうするのか、どの種類のフォントを利用するのかなどです。

前の節で紹介したHTMLでも多少のデザインはできますが、CSSの方がより柔軟かつ簡単にデザインができます。基本的には、HTMLでWebページの骨組みを作った後に、CSSでデザインを調整していくという流れになるでしょう。

構文

続いて、構文という観点からHTMLとCSSの違いを説明します。シンプルのノベルと、双方の構文には以下のような特徴があります。

HTML：タグで囲って使用する
CSS：プロパティと値を指定して使用する

HTML：タグで囲って使用する

HTMLはエディタにHTMLタグを書いて使用します。書き方としては、文字を入力したり装飾を施したりしたいテキストをタグで囲って書くのが基本です。たとえば、以下のようにタイトルを表すtitleタグで文字を囲うと、囲った文字はタイトルとして認識されます。


      <title>この文字がタイトルです</title>

上記のほかにもHTMLタグには多くの種類があり、htmlタグやheadタグ、bodyタグ、HTML宣言などが挙げられます。文法のルールとしては、タグは「<○○○>」の形が基本で「<>」で囲うことと終了タグに「/」をつけるのを忘れないようにしてください。これらを忘れるとレイアウトが崩れます。

CSS：プロパティと値を指定して使用する

CSSはセレクタ、プロパティ、値の3つの要素で構成されることが多いです。以下のCSSを例に挙げます。

sample{
font-size: 20px;
}

上記のコードのうち「sample」がセレクタ・「font-size」がプロパティ・「20px」が値と呼ばれています。セレクタは、どのHTMLに装飾を適用するのかを指定するのが基本です。プロパティと値で、装飾の方法や加減を調節します。

文法としてはプロパティと値は「{}」で囲う必要があり、上記のように3行以上に分けて記載するのが一般的です。また、同じセレクタ内で複数のプロパティと値を設定でき、その際は「;」で区切って改行するようにしましょう。

sample{
font-size: 20px;
color: red;
}

拡張子

HTMLとCSSのそれぞれのエディタを保存した際、ファイルには以下のような拡張子がつきます。

HTML：.html
CSS：.css

この章では、拡張子の観点からHTMLとCSSの違いを説明します。

HTML：.html

HTMLのエディタをファイルに保存した場合、拡張子は「.html」となります。この拡張子がついたファイルをHMTLファイルと呼び、ブラウザなどに読み込ませてページを表示させることが一般的です。

もし拡張子がついていない場合、ブラウザに読み込む際に不具合が発生するだけではなく、人間の目から見たときにどのファイルがHTMLファイルなのか見分けがつきません。こうしたトラブルを未然に回避するためにも、拡張子は役に立っています。

CSS：.css

CSSは、HTMLのエディタ内に記載できますが、ファイルを分けて別のエディタに記載することも可能です。その際、CSSを書いたエディタを保存することで「.css」の拡張子がついたファイルとなります。
実際にHTMLファイルで反映させるには以下のコードを用いて呼び出します。


		<link rel="stylesheet" href="CSSファイルの名前">

ファイルを分ける理由は、コードの文面を見やすくしたり管理しやすくしたりするためです。1枚のWebページを作る場合でも、HTMLとCSSの記述量は多くなります。

そのため、ひとつのファイルにすべてを記載すると、場合によっては見づらくなってしまうでしょう。そうしたトラブルを防ぐためにも、ファイルを分ける必要があります。

HTML/CSSとJavaScriptの違い

HTMLやCSSを学んでいくと、JavaScriptという言語が現れます。JavaScriptはWebページに動的機能を追加するためのスクリプト言語なので混同する人も少なくありません。しかし、すべての言語はそれぞれ異なる役割や機能を持っています。

前の章で説明したとおり、Webページを一軒家と仮定すると、HTMLは骨組みでCSSは壁や窓です。一方、JavaScriptは動きの部分を担います。一軒家でたとえると、食洗器や風呂自動湯はりシステムに近いです。

今まで静的だったWebページに動的な要素を追加できるので、Webページの充実度が一気に高まります。実際にWebページを作る際は、HTML/CSSとJavaScriptだけでほとんどの部分が完成することが多いです。

HTMLでできること

HTMLでできることは以下の3点です。

Webサイトの作成
Webアプリの作成
HTMLメールの作成

Webサイトの作成

HTMLを用いることで、簡易的なWebサイトを作成できます。大まかな作成の手順としては、HTMLファイルにHTMLを記載してブラウザで開けばWebサイトを閲覧可能です。

とはいえHTMLだけでは、普段見ているようなデザイン性に優れたWebサイトを作成できません。あくまでも、テキストや画像の位置と簡易的な装飾しかできないので、実際に公開する際にはほかの言語と組み合わせることをおすすめします。

Webアプリの作成

インターネットで操作できるアプリの開発もHTMLを利用して行えます。たとえば、YouTubeやGmailなどです。これらのアプリにはHTMLが使われており、ユーザーが目にするデザイン的な部分の作成を担当しています。

とはいえ、多機能で動きのあるアプリを作成するためにも、JavaScriptといったほかの言語を利用する必要があります。HTMLだけでは表面上の部分しか作成できません。仮に多機能なWebアプリの作成を行いたい場合は、HTMLにくわえて、ほかの言語を学ぶこともおすすめします。

HTMLメールの作成

HTMLメールとは、文字だけではなく画像やリンク、ボタンなどが配置されたメールを指します。テキストだけのメールに比べてさまざまなアプローチができるため、読者に読んでもらう確率が大幅に上昇するのが特徴です。HTMLを扱えれば作成できるので、ビジネスの幅が広がる武器になるでしょう。

こうしたHTMLメールは、静的な要素が多いためHTMLを用いて作成できます。まれに不具合でレイアウトが崩れた際、テキストだけのレイアウトになっているのを目にしたことがある人も多いはずです。

CSSでできること

CSSでできることは以下の3点です。

サイト全体の装飾
アニメーションの作成
HTMLのシンプル化

サイト全体の装飾

CSSを使うことで、HTMLだけ使用するよりもサイトをきれいに装飾することが可能です。たとえば、文字の色やフォントにこだわってアクセスしてきた人の目を惹くようなサイトを作ったり、読者が欲しい情報を見やすいレイアウトで配置したりできます。

一方でHTMLだけの簡易的な装飾だと、読者に与える印象や経験が薄いため、サイト自体の評価が下がってしまうでしょう。したがって、サイトのデザイン性にこだわるのであれば、CSSを扱えるようになることをおすすめします。

アニメーションの作成

CSSはアニメーションの作成にも対応しています。たとえば、以下のプロパティを使うことでサイトに簡易的な動きを持たせることが可能です。

transition：マウスを重ねたときに動きをつける
animation：アニメーションを再生できる

このようなアニメーションをクリックして欲しいリンクやボタンなどに活用することで、読者の目を惹けるようになります。しかし、複雑すぎる動きはCSSでは対応できません。PHPやJavaScriptといった別言語を必要とするので注意しましょう。

HTMLのシンプル化

CSSを使うことで、HTMLをシンプルにできます。現在では、HTMLはCSSとセットで用いることが主流です。

しかし、今まではHTMLだけで装飾を施すことも珍しくありませんでした。そのため、コードが長くなり管理が大変というトラブルが頻発していました。そうした問題を解決するためにCSSを用いて装飾を行うようになったというわけです。

HTMLとCSSはサイト制作の基盤

HTMLは、Webサイトの骨組みのような存在で、どこにどのテキストを配置するかなどを決めます。一方でCSSは、Webサイトのレイアウトをどのようにするのかという肉付けの部分を担当する言語です。

それぞれ役割は異なりますが、Webサイト制作においてHTMLとCSSは欠かせません。これからフロントエンジニアとして活躍したい方は、HTMLやCSSといった基礎的な部分を徹底することで、幅広い活躍ができるエンジニアになれるでしょう。