【初心者向け】HTMLとCSSのファイルを分けたほうがいい4つの理由

Web開発

Webサイトを構築する上で欠かせない言語といえば「HTML」と「CSS」ですが、それぞれ明確に役割が分かれていることをご存じでしょうか?

HTMLとCSSはWebページ上でユーザーが一番最初に触れる、いわばWebページの基礎を構築する重要な役目があります。

本記事では今回はそんなHTMLとCSSの役割と、HTMLにCSSを適用する方法、HTMLとCSSのファイルを分けた方が良い理由まで、詳しく紹介していきます。

HTMLの役割

HTMLとは「HyperText Markup Language」の略で、Webページの骨組みを作る言語です。
マークアップ言語に分類され、PythonGo、Javaといったプログラミング言語とは区別されます。

マークアップとはタブと呼ばれる要素を利用することで、Webブラウザに文章構造を提示する方法です。

例えばWebページのタイトルを「HTMLの役割」としたい場合、”HTMLの役割”のようにマークアップします。
こうすることでWebブラウザはタイトルを認識し、「HTMLの役割」というタイトルを持つWebページを構築してくれるのです。

このように、HTMLはWebページの骨組みをつくる大切な役割を持ちます。

CSSの役割

CSSとは「Cascading Style Sheets」の略で、HTMLで作られた文章に対しスタイル付けする言語です。

HTMLで文章構造を指定したWebページは、ただ文字や画像が並ぶシンプルなものです。
そのWebページに対しCSSで「文字に色付けする」「背景色を指定する」と肉付けすることで、ユーザーにとって見やすいWebページが完成します。

このように、CSSはWebページをより魅力的に見せる役割を持つものです。

HTMLにCSSを適用する方法

上記で説明したように、HTMLとCSSは全く違う役割を持ちます。
そのためHTMLの文章構造にCSSを適用する必要があり、その方法は3つあります。

  • 外部スタイルシートを適用する
  • 内部スタイルシートを適用する
  • HTML内に直接記入する

外部スタイルシートを適用する

1つ目の方法は、HTMLと別に用意したスタイルシートをHTML内で読み込む方法です。
Webページを構築する際に、一般的に使われている手法となっています。

拡張子が「.css」のファイルを用意し、HTML内に<link>タグを記述します。

<head>
・・・
<link rel="stylesheet" href="abc.css">
・・・
</head>

このように記述することで、HTMLに対して「abc.css」内のスタイル定義を適用することができます。

ちなみにこの記述はHTMLファイルの<head>タグ内に書きこむ必要があります。

内部スタイルシートを適用する

2つ目の方法は、HTML内にスタイルシートの記述箇所を作る方法です。
これを「内部スタイルシート」と呼びます。

HTML内に<style>タグを記述します。

<head>
・・・
<style type="text/css"> p { color : red; } </style>
・・・
</head>

このように記述することで、p{}内で指定したスタイルをHTMLに適応することができます。
内部スタイルシート適用方法も、HTMLファイルの<head>タグ内に書き込む必要があります。

この方法は現在ほとんど用いられることがないのですが、理由につては後ほど詳しく解説します。

HTML内に直接記入する

3つ目の方法は、HTML内に直接スタイルを記入する方法です。

p要素に<style>タグでスタイルを指定します。

<p style="color: #FF3333;">赤文字</p>

このように記述することで、局所的にCSSを適用することができます。
しかしこの直接記入する方法はいずれ使えなくなることと、管理が非常に難しいため使用しない方がいいでしょう。

HTMLとCSSのファイルを分けたほうがいい4つの理由

ここまででHTMLにCSSを適用する方法を3つご紹介しました。
しかしながら、現在使われている方法は「外部スタイルシートを適用する」であることがほとんどです。

なぜHTMLとCSSを分ける必要があるのか、理由として4つ挙げられます。

  • メンテナンスが簡単になる
  • HTMLファイルのサイズを減らせる
  • データ読み込み時の負担が減る
  • サイト表示を高速化できる

メンテナンスが簡単になる

HTMLとCSSを分ける、もっとも大きな理由はメンテナンスが簡単になることです。

それぞれのファイルを分けることにより「スタイルだけ変えたい」という場合、CSSのみ変更すればHTMLファイルはいじることなく済みます。
余計な箇所を変更する必要がないため、メンテナンスが非常に簡単に終わります。

またWebサイト上の複数のWebページに対し同じようなスタイルを適用したいと考えた場合、1つのCSSを複数のHTMLから呼び出すこともできます。
CSSを利用することで複数のHTMLも同時に変更することができるのです。

HTMLファイルのサイズを減らせる

HTML内にCSSを書き込むと、ファイルサイズは自然と大きくなってしまいます。

しかし、別途CSSを用意することにより、HTMLのファイルのサイズを減らすことができるのです。
そしてファイルのサイズを減らすことにより、Webサーバーの負担を減らすことができます。

データ読み込み時の負担が減る

Webサイトの表示媒体はパソコンのみに留まらず、スマートフォンやタブレットなど複数存在します。

それぞれの媒体に合わせたCSSを用意することにより、Webページ表示時にユーザーはどれか1つのCSSを読み込むだけで済みます。

HTMLとCSSを同じファイルに記述した場合、スマートフォンでWebページを表示するために、スマートフォンCSSとにパソコンCSSとタブレットCSSを全て読み込む必要がありました。
しかしHTMLとCSSを分けることにより、このような無駄を省くことができるのです。

サイト表示を高速化できる

HTMLとCSSを分けた場合、Webブラウザのデフォルト設定では、セッション内でCSSを1度だけ読み込みます。
セッション内でCSSが変更されない限り、HTMLのみを読み込みます。

このためHTMLとCSSを分けることにより、Webサイトの表示を高速化することができます。

まとめ

Webサイトの文章構造を作るものがHTML、スタイルを付けものがCSSということが分かりました。

それぞれ明確な違いがありファイルを分けることで、メンテナンスが簡単になったり、ユーザーの負担を減らしたり、様々なメリットを得られます。
今後Webサイトを作る際はHTML、CSSのファイルを分けて作成するように心がけましょう。

コメント

タイトルとURLをコピーしました