CSSフレームワークやプラグインのCSSをどんどん追加していくと、通常のタグに影響が出てしまう場合があります。
元のCSSを改修すれば良いのですが、影響が大きい場合や時間が無い場合があるかと思います。
他のCSSの影響を受けたくない特定のクラスだけ、CSSの設定値を初期化することが可能です。
すべてのCSS設定値を初期化
|
1 2 3 4 5 6 |
.button-2 { all:initial; ・ ・ ・ } |
2行目ですべての設定値を初期化しています。
すべての設定値を表す特殊な属性「all」に初期化意味するプロパティ「initial」を設定します。
これだけで「親から継承されている設定値」「直前で設定されていた設定値」をすべて初期化することができます。
初期化された後は、設定まっさらな状態で属性に値を設定していきましょう！
特定のCSSの設定値を初期化
特定の設定値のみを初期化したい場合は次のようにします。
|
1 2 3 |
.button-3 { font-size:initial; } |
上記だとフォントサイズのみを初期化しています。
「親から継承されているフォントサイズ」「直前で設定されていたフォントサイズ」を初期化できます。
CSSの設定値の初期化は簡単に行うことができます。
設定値の初期化ができることだけでも覚えておくと役に立つと思いますよ！
一応サンプルも作成しました。
