テキストをスタイルシート適用前の状態に戻す方法

エ・ビスコム・テック・ラボ
2008-12-11 14:20:01
  • このエントリーをはてなブックマークに追加

 それでは、

に適用したfont-size、font-weight、background-colorの3つのプロパティの設定を「initial」で初期値に戻すしてみよう。すると、

でマークアップしたときと同じように小さな文字で表示されることがわかる。

「initial」で各プロパティの設定を初期値に指定したもの 「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-sizemedium
font-weightnormal
background-colortransparent

 

のようなケースでスタイルシートを適用する前の状態に戻したい場合は、デフォルトスタイルシートと同じ設定を適用する必要がある。

の場合はfont-sizeプロパティを「2em」、font-weightプロパティを「bold」と指定する。

<h1>でマークアップした部分をスタイルシート適用前にブラウザで表示した状態に戻したもの

でマークアップした部分をスタイルシート適用前にブラウザで表示した状態に戻したもの

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
&lth1&gt; と書かないとなんのことやらだよね
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]