<title>などの<head>タグ内の要素にもスタイルが効く

意外と知られていないですが、<head>内の要素にもCSSを効かせることができます。

しかしIEでは効かないです。

以下のブラウザではスタイルシートが効いて表示されます。

  • Firefox3
  • Safari3
  • Opera9
  • Minefield
  • Camino

サンプル

Windows Firefox2での表示

ソース

<!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=shift_jis" />
<title>headタグ内の要素にスタイルが効くか? [これはtitle]</title>
<script type="text/javascript">
/* ここはJavaScript */
</script>
<style type="text/css">
/* ここはStyleSheet */
html {
  border: 5px solid #ff0000;
  display: block;
  background-color: #BBBBBB;
}

head {
  border: 5px solid #0000FF;
  display: block;
  background-color: #DDDDDD;
}

meta {
  border: 5px solid #00FFFF;
  display: block;
}

title {
  border: 5px solid #FF00FF;
  display: block;
}

script {
  border: 5px solid #FFFF00;
  display: block;
}

style {
  border: 5px solid #00FF00;
  display: block;
}


body {
  border: 5px solid #000000;
  display: block;
  background-color: #FFFFFF;
}

ul {
  width:10em;
}
ul li {
  margin-bottom:3px;
  padding: 0.1em 0.5em;
}

</style>
</head>
<body>
<p>ここはbody</p>
<ul>
<li style="border:5px solid #ff0000;">html</li>
<li style="border:5px solid #0000FF;">head</li>
<li style="border:5px solid #00FFFF;">meta</li>
<li style="border:5px solid #FF00FF;">title</li>
<li style="border:5px solid #FFFF00;">script</li>
<li style="border:5px solid #00FF00;">style</li>
<li style="border:5px solid #000000;">body</li>
</ul>
</body>
</html>

スポンサーリンク

関連記事

スポンサーリンク

RegExp.lastParen

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る