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

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

 「initial」は、各プロパティの「初期値」を指定するキーワード値だ。ウェブページでは、テキストなどに対してスタイルシートを一切指定していなくても、そのテキストは各プロパティの「初期値」に従って表示される仕組みになっている。

 たとえば、サンプルで使用したcolorとfont-familyプロパティの初期値は、CSSの標準規格で「ブラウザの設定に従う」と定義されている。これにより、スタイルシートを適用する前のテキストは、ブラウザの標準の色とフォントで表示されるというわけだ。

サンプルで使用したプロパティの初期値
プロパティ初期値
colorブラウザの設定に従う
font-familyブラウザの設定に従う

「initial」と指定してもスタイルシート適用前の状態に戻せないケース

 「initial」と指定してもスタイルシートを適用する前の状態に戻せないケースもある。たとえば、

でマークアップした部分はスタイルシート適用前には大きな太い文字で表示される。

<h1>でマークアップしたテキスト

でマークアップしたテキスト

こんにちは

ブラウザで表示を確認する

 

でマークアップした文字が大きく表示されるのは、ブラウザによってデフォルトスタイルシートが適用されるためだ。デフォルトスタイルシートはHTMLやXHTMLでマークアップしたウェブページを読みやすくするために、ブラウザによって必ず適用されるスタイルシートだ。

 たとえば、Firefoxではアドレスバーに「resource://gre/res/html.css」と入力すると、デフォルトスタイルシートの設定を確認することができる。

 ここで

に適用される設定を確認すると、font-sizeプロパティで文字の大きさが2倍に、font-weightプロパティで文字が太くなるように指定されていることがわかる。

に適用されるデフォルトスタイルシートの設定

h1 {
font-size: 2em;
font-weight: bold;
}

 デフォルトスタイルシートをオフにすることができないので、

でマークアップしたテキストには、ブラウザのデフォルトスタイルシートとウェブページで指定したスタイルシートの両方の設定が適用されることになる。

 サンプルでは、

を記述したウェブページに、次のようにスタイルシートを指定して、文字を大きく細いフォントで、背景を水色で表示するように設定する。

<h1>に対してスタイルシートを指定したもの

に対してスタイルシートを指定したもの

h1{
font-size: 300%;
font-weight: normal;
background-color: skyblue;
}
ブラウザで表示を確認する

 これにより、デフォルトスタイルシートの設定と合わせて、

には次のようなスタイルシートが適用されたことになる。

h1 {
font-size: 2em;
font-weight: bold;
font-size: 300%;
font-weight: normal;
background-color: skyblue;
}

  • コメント(2件)
#1 通りすがり   2012-09-27 23:56:43
<h1>が途中で途切れてるのを修正してください
#2 通りすがった   2016-08-03 14:56:59
&lth1&gt; と書かないとなんのことやらだよね
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]