
テキストをスタイルシート適用前の状態に戻す方法
エ・ビスコム・テック・ラボ
2008-12-11 14:20:01
それでは、
に適用したfont-size、font-weight、background-colorの3つのプロパティの設定を「initial」で初期値に戻すしてみよう。すると、
でマークアップしたときと同じように小さな文字で表示されることがわかる。

h1{ font-size: 300%; font-weight: normal; background-color: skyblue; } h1{ font-size: -moz-initial; font-weight: -moz-initial; background-color: -moz-initial; } h1{ font-size: initial; font-weight: initial; background-color: initial; }
※ブラウザで表示を確認する
プロパティの値を「initial」と指定した場合、ウェブページで指定したスタイルシートだけでなく、デフォルトスタイルシートの設定も含めて初期値になってしまうため、スタイルシート適用前にブラウザで表示したときの状態には戻すことができない。
ここで使用した各プロパティの初期値は次のように定義されており、小さく細いフォントで、透明な背景色になることがわかる。
プロパティ | 初期値 |
---|---|
font-size | medium |
font-weight | normal |
background-color | transparent |
のようなケースでスタイルシートを適用する前の状態に戻したい場合は、デフォルトスタイルシートと同じ設定を適用する必要がある。の場合はfont-sizeプロパティを「2em」、font-weightプロパティを「bold」と指定する。
でマークアップした部分をスタイルシート適用前にブラウザで表示した状態に戻したもの
h1{
font-size: 300%;
font-weight: normal;
background-color: skyblue;
}
h1{
font-size: 2em;
font-weight: bold;
background-color: -moz-initial;
background-color: initial;
}
※ブラウザで表示を確認する

でマークアップした部分をスタイルシート適用前にブラウザで表示した状態に戻したもの
h1{ font-size: 300%; font-weight: normal; background-color: skyblue; } h1{ font-size: 2em; font-weight: bold; background-color: -moz-initial; background-color: initial; }
※ブラウザで表示を確認する
なお、デフォルトスタイルシートの大まかなガイドライン「Appendix D. Default style sheet for HTML 4」がCSSの標準規格で提案されており、主要なブラウザはこれに従ってデフォルトスタイルシートを用意している。
- コメント(2件)
#1
通りすがり
2012-09-27 23:56:43
<h1>が途中で途切れてるのを修正してください
#2
通りすがった
2016-08-03 14:56:59
<h1> と書かないとなんのことやらだよね