5行で要約
状態:-
閲覧数:15,477
投稿日:2013-04-22
更新日:2015-06-16
CSS各プロパティの初期値を指定すれば、結果として効果を打ち消す効果を得られる
・ライブラリCSSコードを直接修正してしまうと、バージョンアップした時の対応が非常に面倒。避けたほうが良い
・ライブラリCSSに手を加えることなく効果を打ち消すためには、CSS各プロパティの初期値を後から再定義すれば良い
・しかしデフォルト値は、CSS各プロパティ毎に異なる
・間違えると「invalid property value css」エラーが発生するため注意が必要
・「Bootstrap」を利用していると、CSS効果を打ち消したいケースは頻発する
経緯
・当初は、「Bootstrap」CSS自体に修正を加えていた
・どうしてデフォルトでfont-familyなんか指定してんだよー、て感じで
・無視なの？ 英語圏以外の利用者のこととか無視なの？ て感じで、もうガンガン修正しまくり
・その結果、待っていたのは「Bootstrap」バージョンアップ時の対応、という「緩やかな死」だった
・すなわち、何時の間にか「オレオレ仕様」へと変貌を遂げてしまったCSSをこのまま利用し続けるのか、それともバージョンアップした「Bootstrap」CSSとの整合性を取り続けるのか
・文字通り「2択」を迫られる状況
ライブラリCSSコードを直接修正してはいけない
・ライブラリCSSコードを直接修正してしまうと、バージョンアップした時の対応が非常に面倒
・具体的には、バージョンアップする度に、両者の整合性をとる必要が生じてくる
ライブラリ提供CSSを直接変更せずに効果を修正するためには？
・「効果を打ち消す」しかない
ところが…
・この「効果を打ち消すスタイルシート」って、慣れないと結構難しい
・というか、すぐ忘れる
・だから、このエントリーに随時追加していくことにするよ
有りがちな間違い
・「!important」は乱発しない方が良い
・増え過ぎると段々ワケわからなくなってくるので
・「効果を打ち消したい」かつ「読み込む順番を変更できる」場合は、単純に「効果を打ち消すスタイルシート」を後から読み込むだけで良い
・ライブラリCSSコードを直接修正してしまうと、バージョンアップした時の対応が非常に面倒。避けたほうが良い
・ライブラリCSSに手を加えることなく効果を打ち消すためには、CSS各プロパティの初期値を後から再定義すれば良い
・しかしデフォルト値は、CSS各プロパティ毎に異なる
・間違えると「invalid property value css」エラーが発生するため注意が必要
何が問題なの？
・「Bootstrap」を利用していると、CSS効果を打ち消したいケースは頻発する
経緯
・当初は、「Bootstrap」CSS自体に修正を加えていた
・どうしてデフォルトでfont-familyなんか指定してんだよー、て感じで
・無視なの？ 英語圏以外の利用者のこととか無視なの？ て感じで、もうガンガン修正しまくり
・その結果、待っていたのは「Bootstrap」バージョンアップ時の対応、という「緩やかな死」だった
・すなわち、何時の間にか「オレオレ仕様」へと変貌を遂げてしまったCSSをこのまま利用し続けるのか、それともバージョンアップした「Bootstrap」CSSとの整合性を取り続けるのか
・文字通り「2択」を迫られる状況
ライブラリCSSコードを直接修正してはいけない
・ライブラリCSSコードを直接修正してしまうと、バージョンアップした時の対応が非常に面倒
・具体的には、バージョンアップする度に、両者の整合性をとる必要が生じてくる
ライブラリ提供CSSを直接変更せずに効果を修正するためには？
・「効果を打ち消す」しかない
ところが…
・この「効果を打ち消すスタイルシート」って、慣れないと結構難しい
・というか、すぐ忘れる
・だから、このエントリーに随時追加していくことにするよ
有りがちな間違い
・「!important」は乱発しない方が良い
・増え過ぎると段々ワケわからなくなってくるので
・「効果を打ち消したい」かつ「読み込む順番を変更できる」場合は、単純に「効果を打ち消すスタイルシート」を後から読み込むだけで良い
一覧
早見表
効果を打ち消すスタイルシート一覧
normal
| プロパティ | 値 |
|---|---|
| line-height | normal |
100%
| プロパティ | 値 |
|---|---|
| font-size | 100% |
auto
| プロパティ | 値 |
|---|---|
| width | auto |
| margin | auto |
| overflow | auto |
| font-family | auto |
| z-index | auto |
none
| プロパティ | 値 |
|---|---|
| border | none |
| float | none |
| max-width | none |
transparent
| プロパティ | 値 |
|---|---|
| background-color | transparent |
その他
| プロパティ | 値 |
|---|---|
| border-collapse | separate |
| border-spacing | 2px。仕様上のデフォルト値は0だが、Chromeデフォルトは2px |
| position | static |
存在しない
「新たに設定して、既存値を上書きする」しか「打ち消す手段」がない「プロパティ」
| プロパティ | 値 |
|---|---|
| display | ✕ |
「line-height」効果を打ち消すスタイルシートは、「line-height:normal;
line-height:normal;
・「line-height」効果を打ち消すスタイルシートは、「line-height:normal;」
有りがちな間違い
・line-height:100%;
・line-height:auto;
※それって、効果打消しになっていませんから
実際に遭遇した例
・jQueryカウントダウンタイマーを設置したら、一部表示がおかしい
・調査した結果、原因は「Bootstrap」CSS bodyタグに設定されている「line-height:18px;」だった
・そのため、問題箇所に「line-height:normal;」を適用させ、同CSSを「Bootstrap」CSSより後から読み込ませることで対応
「font-size」効果を打ち消すスタイルシートは、「font-size:100%;」？
「margin」効果を打ち消すスタイルシートは、「margin:auto;」
「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」
「border」効果を打ち消すスタイルシートは、「border: none;」
「float」効果を打ち消すスタイルシートは、「float:none;」
「display」効果を打ち消すスタイルシートは、存在しない
display
・「display」効果を打ち消すスタイルシートは、存在しない
有りがちな間違い
・display:normal;
・display:auto;
・display:all;
※そんなプロパティは存在しないので、指定できない
実際に遭遇した例
・既存CSSの後から読み込み、効果を取り消そうとするも出来なかったので、普通に指定して新たな効果を適用
▼既存CSS
display: inline-block;
▼新たな効果を適用するCSS
・プロパティは何でも良い
・要は普通に指定するだけ
display: block;
「max-width」効果を打ち消すスタイルシートは、「max-width:none;」
Task
・「Bootstrap」CSSに記述されている「img { max-width: 100%;}」効果を打ち消したい
元CSS
/* Misc
-------------------------------------------------- */
img {
max-width: 100%;
}
効果を打ち消すCSS
/* Misc
-------------------------------------------------- */
img {
max-width: none!important;
}
「font-family」効果を打ち消すスタイルシートは、「font-family:auto;」
「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」
z-index:auto;
z-index:none;だろうと思い指定したら、見事に「invalid property value css」エラーが発生
・間違えた際のガッカリ感をまたしても味わう
・何時までたっても初期値を覚えられないというか、勘が悪いと言うか、経験値が蓄積されない…
遭遇事例
特定条件下でクリック反応しない
・不定期でクリックできないaタグを発見
・SVGグラフ絡みだったので、絶対JavaScriptの不具合だろうと思い1週間近く調べ倒すも原因不明
「absolute」 × 「z-index」
・最終的に分かったこと
・特定DOMを「absolute」 で固定した上に、「z-index」を指定していた
・「z-index」かよ！
・しかも、わざわざ「z-index」指定する必要ないところで
「z-index:auto;」で影響解除
・無事動作するようになった
・まさかCSSが原因とは夢にも思わなかったよ