効果を打ち消すスタイルシート

CSS

5行で要約

 状態:-  閲覧数:15,711  投稿日: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」は乱発しない方が良い
・増え過ぎると段々ワケわからなくなってくるので
・「効果を打ち消したい」かつ「読み込む順番を変更できる」場合は、単純に「効果を打ち消すスタイルシート」を後から読み込むだけで良い

一覧

 閲覧数:814 投稿日:2013-04-22 更新日:2015-06-16

早見表


効果を打ち消すスタイルシート一覧


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;

 閲覧数:5,064 投稿日:2013-05-06 更新日:2013-07-26

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%;」?

 閲覧数:1,660 投稿日:2013-05-24 更新日:2013-07-26

経緯


・フォントサイズ固定されているCSS「font-size: 18px;」効果を打ち消したい


試したこと


・font-size:normal;
・font-size:auto;


結果は?


・何れも「Invalid property value.」


仮結論


・しょうがないので「font-size:100%」にしたけど、この統一感のなさは何なの?

「margin」効果を打ち消すスタイルシートは、「margin:auto;」

 閲覧数:838 投稿日:2013-06-02 更新日:2013-07-26

経緯


・includeファイルで指定している「margin-top:45px;」効果を打ち消したい


対応


margin:auto;
<body style="margin:auto">


「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」

 閲覧数:5,650 投稿日:2013-06-09 更新日:2013-07-26

overflow: auto;


・「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」

実際に遭遇した例
・既存CSS読み込んだら、コンテンツが一番下まで表示されなくなった
▼既存CSS
body {
overflow: hidden;
}

▼対応HTML
  <style type="text/css">
 <!--
   body {
     overflow: auto;
   }
 -->
 </style>


「border」効果を打ち消すスタイルシートは、「border: none;」

 閲覧数:981 投稿日:2013-06-09 更新日:2013-07-26

border: none;


・「border」効果を打ち消すスタイルシートは、「border: none;」


実際に遭遇した例
・既存CSSの後から読み込み、効果を取り消す
▼既存CSS
border: 1px solid #ddd;


▼効果を打ち消すCSS
border: none;


「float」効果を打ち消すスタイルシートは、「float:none;」

 閲覧数:1,781 投稿日:2013-06-09 更新日:2013-07-26

float:none;


・「float」効果を打ち消すスタイルシートは、「float:none;」

実際に遭遇した例
・既存CSSの後から読み込み、効果を取り消す
▼既存CSS
	float: left;


▼効果を打ち消すCSS
	float:none;


「display」効果を打ち消すスタイルシートは、存在しない

 閲覧数:2,292 投稿日:2013-07-06 更新日:2014-07-08

display


・「display」効果を打ち消すスタイルシートは、存在しない

有りがちな間違い
・display:normal;
・display:auto;
・display:all;
※そんなプロパティは存在しないので、指定できない

実際に遭遇した例
・既存CSSの後から読み込み、効果を取り消そうとするも出来なかったので、普通に指定して新たな効果を適用
▼既存CSS
display: inline-block;


▼新たな効果を適用するCSS
・プロパティは何でも良い
・要は普通に指定するだけ
display: block;


「max-width」効果を打ち消すスタイルシートは、「max-width:none;」

 閲覧数:996 投稿日:2013-07-26 更新日:2013-07-26

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;」

 閲覧数:909 投稿日:2013-11-06 更新日:2013-11-06

font-family:auto


・「font-family」効果を打ち消すスタイルシートは、存在しないと思っていた
・デフィルト指定できなくて不便だな、とずっと思っていた
・ところが、今日試しに「font-family:auto;」と書いたら、うまくいったっぽい
・何か勘違いしてる?

「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」

 閲覧数:2,302 投稿日:2015-06-16 更新日:2015-06-16

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が原因とは夢にも思わなかったよ


複数CSSファイルを、PHPを利用して1ファイルにする。~ 2018年

HTML5では、inputタグの閉じタグを付与しない



週間人気ページランキング / 4-2 → 4-8
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 14
2 RGB ⇔ Lab | 色変換(色) 10
3 色 カテゴリー 8
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
3 効果を打ち消すスタイルシート | CSS 8
4 16進数カラーコード / 2進数 6
5 RGB ⇔ XYZ / CIE RGB / sRGB(D65) / sRGB(C) / Adobe RGB / NTSC RGB 5
6 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
6 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 4
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 3
7 「bgcolor」「background-color」「background」の違い | CSS 3
7 鉄道会社毎のカラーコード | カラーコード(色) 3
7 「Bootstrapデザイン」✕「円グラフ」解析 | 2系(Bootstrap) 3
8 cluster | タブ系(Chrome 拡張機能) 2
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 2
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
8 画像系ソフトウェアに求める機能 / 各ソフトウェアにおける「既存画像の自動補正」実行例 / 2019年7月8日時点の結論 2
8 HTMLエディタ カテゴリー 2
9 画面キャプチャ 2022 年 | Chrome 拡張機能 1
2025/4/9 1:01 更新