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

　これまで、さまざまなデザインをスタイルシートで設定する方法を紹介してきたが、今回はスタイルシートでデザインされたテキストを、スタイルシート適用前の状態に戻す方法を紹介したい。

　そのため、プロパティの設定を初期値に戻す「initial」という値を利用する。「initial」はCSS 3で提案されている値で、FirefoxではFirefox 3以降が対応。SafariとGoogle Chromeも対応している。

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

　テキストなどをスタイルシート適用前の状態に戻すには、適用したスタイルシートの設定を削除するのが一番簡単な方法だ。しかし、現在のウェブページ制作ではスタイルシートの設定を複数のページで共有していることも多く、不用意に削除したり適用先を変えたりすると不具合が発生しかねない。

　そこで、既存のスタイルシートの設定には手を加えずに、設定を上書きすることを考える。

　たとえば、次のサンプルでは

でマークアップした3つのテキストに、「p{〜}」で文字の色とフォントの種類を指定してある。

スタイルシートでテキストのデザインを指定したもの

p{
color: blue;
font-family: 'Comic Sans MS';
}

(1) Hello, how are you?

(2) Hello, how are you?

(3) Hello, how are you?

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

　このサンプルで、p{〜}の設定には手を加えずに、（1）のテキストだけをスタイルシート適用前の状態に戻したい。そこで、（1）のテキストだけに適用する設定「p#text01{〜}」を追加して、文字の色を黒色に、フォントの種類を「ＭＳ Ｐゴシック」と指定する。CSS 3以前のCSSでは、こうして別の値を指定して、設定を上書きするしかないためだ。

　すると、（1）のテキストはスタイルシート適用前の状態に戻ったように見えるが、フォントが存在する環境であれば、どのような環境でも「p#text01{〜}」で指定した色とフォントで表示されてしまう。スタイルシートを適用する前の状態に戻すのであれば、ユーザーの環境に応じて、ブラウザで設定された標準の文字色やフォントで表示されるようにしたい。

文字の色とフォントの種類を指定したもの

p{
color: blue;
font-family: 'Comic Sans MS';
}

p#text01{
color: black;
font-family: 'ＭＳ Ｐゴシック';
}

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

　そこで、（1）のテキストに適用した各プロパティの値をCSS 3の「initial」に変更する。すると、（1）のテキストはスタイルシートを適用する前の状態に戻り、ブラウザの標準の文字色やフォントで表示されるようになる。

　なお、「initial」という値は、Firefoxでは「-moz-initial」で、SafariとGoogle Chromeでは「initial」で機能するので、サンプルではそれぞれのブラウザ用の設定を記述している。

ブラウザの標準フォントを「ＭＳ Ｐゴシック」に設定した環境での表示

ブラウザの標準フォントを「メイリオ」に設定した環境での表示

p{
color: blue;
font-family: 'Comic Sans MS';
}

p#text01{
color: -moz-initial;
font-family: -moz-initial;
}

p#text01{
color: initial;
font-family: initial;
}

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