style要素にスタイルシートを記述

続いてstyle要素のコンテンツとしてスタイルシートを記述する方法です。文書内で使用するスタイルシートをヘッダー内に記述したstyle要素内に記述します。style要素は次のように記述して下さい。 

<style type="text/css">
  スタイルシート
</style>

type属性にはCSSを使用することを表す「text/css」を指定します。そしてstyle要素のコンテンツとしてスタイルシートを記述していきます。

外部スタイルシートと異なり複数のWebページでスタイルシートを共有できないため特定のページでのみ使用されるスタイルシートを記述する場合には使われる方法です。ただその場合でもスタイルシートが長くなる場合には外部スタイルシートとして分けることをお薦めします。

style要素はヘッダー内に記述します。例えば次のようになります。 

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <title>スタイルシート</title>
  <style type="text/css">
  p{
    padding:10px;
    border:1px dotted #ff0000;
  }
  </style>
</head>

なおstyle要素はXHTML Basic DTDでは使用できません。

サンプル

では簡単なサンプルで試してみます。 

<!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>
    <style type="text/css">
    p{
      padding:10px;
      border:1px solid #00ffff;
    }
    </style>
    </head>

  <body>

    <p>
    HTMLで使われるスタイルシート言語はCSSです。
    </p>

  </body>
</html>

実際にブラウザで見てみると下記のようになります。

style要素にスタイルシートを記述

style要素に記述したp要素に対するスタイルシートが適用されていることが確認できます。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

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