CSS
Webページの装飾やレイアウトをするための言語CSSの基礎知識について解説しています

CSSをHTMLに適用する方法

CSSで記述したものをHTMLに反映させるためには、HTMLに「CSSを適用させる」ということが必要になります。CSSをHTMLに適用させるには次の3つの方法があります。

  1. HTMLファイルとは別にCSSのコードだけを記述するためのCSSファイルを作りそれをHTMLファイルに読み込んで適用する方法。
  2. HTMLファイルの中にCSSのコードを直接記述するという方法でhead要素内にstyle要素の内容として記述する方法。
  3. HTMLファイルの中に記述するものですが、装飾したい要素の属性としてインラインで記述する方法。

どの適用方法を選択するかは非常に大切です。それぞれの違いや、メリット・デメリットについて見ていきましょう。

方法 1：外部のCSSファイルを読み込んで適用する

HTMLとは別にCSSを記述するための専用のファイルを作成して、それをHTMLファイルに読み込んで適用する方法です。CSSの専用ファイルは、拡張子に「.css」をつけて保存したテキストファイルです。

CSSファイルは、head要素の中に「link要素」を記述して読み込みます。link要素の「href属性」の値に読み込みたいCSSファイルを指定します。さらに、適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために、「rel属性」の値に「stylesheet」を指定しておく必要があります。

Note

link要素は、そのHTMLファイルと外部のファイルや他のウェブページ（リソースといいます）を関連づけるための要素です。rel属性は、そのHTMLファイルからみた、それらのリソースとの関係性を指定するものです。外部のCSSファイルを読み込むときに、rel属性の値に「stylesheet」に指定しないと読み込んだコードをスタイルとして解釈してくれませんので注意しましょう。

次のコードは、CSSのコードが記述されたファイルstyle.cssを、link要素を使ってスタイルシートとして読み込んでいます。

link要素を使ってCSSファイルを読み込んで適用
<html>
  <head>
    <meta charset="utf-8">
    <title>CSSをHTMLに適用させる</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <p>この文章にCSSを適用させる</p>
  </body>
</html>

外部のCSSを読み込むことのメリット・デメリット

HTMLにCSSを記述しないのでHTMLファイルのコード量を減らすことができ、見やすく分かりやすいコードになるだけでなく、HTMLから構造定義以外の記述を分離することができるのでSEO的にも有利であるといわれています。

複数のWebページから構成されるWebサイトでは、同じCSSを反映させることができるのでサイト全体としてのデザインのコントロールがしやすくなります。

外部CSSファイルのデメリットは、読み込み速度の低下です。HTMLファイルが外部ファイルを読み込みますので、ファイルの数だけ繰り返しサーバーからダウンロードしてからWebページを表示させることになります。これにより、外部ファイルが多くなることでWebページの表示までの時間がかかってしまうことになります。

方法 2：style要素を使って適用する

スタイルを適用したいHTMLのhead要素の中にstyle要素をで記述する方法です。style要素の内容としてCSSを記述します。

適用されるスタイルがCSSであることをブラウザなどに知らせるためにstyle要素のtype属性の値に「text/css」を指定しておきます。（type属性は必須属性でありません。指定しない場合には「type=”text/css”」がデフォルトで適用されます。）

style要素を使って適用
<html>
  <head>
    <meta charset="utf-8">
    <title>CSSをHTMLに適用させる</title>
    <style type="text/css">
        p {
            color: red;
        }
    </style> 
  </head>
  <body>
      <p>style要素を使ってこの要素にCSSを適用させる</p>
  </body>
</html>

style要素にCSSを記述するメリット・デメリット

外部ファイルの読み込みを少なくしたい場合や、他のページには影響したくない、あるいはそのページのみに適用させてい場合などには有効な方法です。

HTMLファイル内に直接CSSを記述する方法なので、サイト全体のスタイル管理などから見た修正などのメンテナンス性が悪くなります。

方法 3：style属性を使ってインラインで適用する

HTML要素にstyle属性を追加して、直接スタイル指定を記述する方法で「インラインスタイル」や「インラインCSS」と呼ばれます。

この方法では直接要素に記述するためセレクタは必要ありません。属性の値には「;」で区切って宣言文（プロパティ: 値）をいくつでも書くことができます。

style属性を使ってインラインで適用
<p style="color: red;">文字が赤色になります</p>

インラインでCSSを記述するメリット・デメリット

style属性によるスタイル指定は他の方法で記述される場合よりも優先して反映されるので、ピンポイントでの変更では便利で、直接HTMLのコードに記述するので修正などの作業が素早くできます。

しかし、インラインでの記述方法はHTMLのコードが複雑になってしまいます。また、他で指定されたスタイルより優先されるため、外部のCSSファイルから変更するなどのコントロールが難しくなり、メンテナンス性が非常に悪くなってしまうので最適なスタイル管理に不向きです。

この方法を多用するとHTMLとCSSを分離する意味がなくなってしまい、SEO的にはあまり良い記述方法ではないといえます。正しい文書定義と、効率の良いスタイル管理のためには、できる限りこの方法は避けたほうが良いでしょう。

インラインスタイルは、プログラム（JavaScriptなど）などを使ってダイナミックに要素のスタイルを変更したいときなどに使われます。