クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

CSS

CSS 設定値の初期化(サンプル付き)

投稿日:2017年11月24日 更新日:

CSSフレームワークやプラグインのCSSをどんどん追加していくと、通常のタグに影響が出てしまう場合があります。
元のCSSを改修すれば良いのですが、影響が大きい場合や時間が無い場合があるかと思います。
他のCSSの影響を受けたくない特定のクラスだけ、CSSの設定値を初期化することが可能です。

すべてのCSS設定値を初期化

2行目ですべての設定値を初期化しています。
すべての設定値を表す特殊な属性「all」に初期化意味するプロパティ「initial」を設定します。
これだけで「親から継承されている設定値」「直前で設定されていた設定値」をすべて初期化することができます。
初期化された後は、設定まっさらな状態で属性に値を設定していきましょう!

特定のCSSの設定値を初期化

特定の設定値のみを初期化したい場合は次のようにします。

上記だとフォントサイズのみを初期化しています。
「親から継承されているフォントサイズ」「直前で設定されていたフォントサイズ」を初期化できます。

CSSの設定値の初期化は簡単に行うことができます。
設定値の初期化ができることだけでも覚えておくと役に立つと思いますよ!

一応サンプルも作成しました。

-CSS

執筆者:

関連記事

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

CSS 未加工の画像から丸いアイコンを作る(普通の画像だけでOK)

アイコンのような画像を表示させたいときがあります。 きれいな正円の中に画像が配置されているやつですね。   いちいち元画像から上記のような画像に加工するのは面倒ですよね。 画像データが増える …

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

きっちりとブロック要素の幅をしていしていたのに、枠線を引いたとたんレイアウトが崩れることがあります。 レイアウト崩れが起こる原因 これは、枠線はブロック要素の外側に引かれるためです。 例えば、横幅「1 …

CSS テキストエリアのサイズ変更機能を無効にするには?サンプル付き

たいていのブラウザで、テキストエリアのサイズはユーザーが自由に変更できるようになっています。 ユーザーにとっては便利な機能ですが、テキストエリアのサイズを自由に変更されすぎるとレイアウトが崩れる原因に …

CSS ボタンの基本装飾

最近は他の方が公開されているボタンのCSSやCSSフレームワークで用意されているボタンがありますので楽ですよね。 ただ、仕事で制作するサイトはデザイナーさんはサイト専用のボタンをデザインされる事が多い …


comment

メールアドレスが公開されることはありません。