<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>
関連記事
- Twitterウィジェットのカスタマイズ(ウィジェット部分のHTML・CSS)
- SELECTタグで色を選択する場合のサンプル
- ナインパッチとは(9-Patch)
- Google Chromeで一部の文字だけ四角記号に文字化けするときの対処法
- Google Chromeでテキストエリアtextareaのサイズ変更をさせない方法
- 連続する英文字を単語の途中で自動改行するCSS[Firefox,Opera対応]
- title属性値が違うとCSSが読み込まれません
スポンサーリンク
