スタイルシート言語の指定

Webページの見た目を記述するために使われるのがスタイルシートですが、実際にはスタイルシートとして利用できる言語にはいくつか種類があり任意の言語を利用できるようになっています。ただHTML言語と組み合わせて使う場合にはCSS(Cascading Style Sheets)と呼ばれるスタイルシートの言語しか現状では使われていません。その為、CSSとスタイルシートは同じ意味合いで使われています。

Webページを作成する時にスタイルシートを使う場合には、どのスタイルシート言語を使っているのかを記述する必要があります。ここではmeta要素を使って使用するスタイルシート言語を指定する方法を確認します。

スタイルシートとしてCSSを使用する場合の記述方法は次の通りです。

HTMLの場合：

<meta http-equiv="Content-Style-Type" content="text/css">

XHTMLの場合：

<meta http-equiv="Content-Style-Type" content="text/css" />

※今後はXHTMLの場合で記述します。

ヘッダ内にこの記述をしておくことで文書で使われるスタイルシートの言語がCSSであることを示すことができます。

スタイルシートを外部ファイルとして用意した場合や、ヘッダ内にスタイルシートを記述する場合は、別途使用するスタイルシート言語を指定することができるのですが、要素にstyle属性を使って直接スタイルシートを記述する場合にはどの言語を使うか指定する方法がありません。その為、特にstyle属性を使う場合にはmeta要素を使ってスタイルシート言語を指定しておく必要があります。

例えば次のように記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>スタイルシート言語</title>
  </head>

  <body>

    <p style="border:2px dotted #20b2aa;">
    HTMLで使われるスタイルシート言語はCSSです。
    </p>

  </body>
</html>

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。