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

CSS

5行で要約

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

一覧

 閲覧数:692 投稿日: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;

 閲覧数:4,672 投稿日: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,436 投稿日: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;」

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

経緯


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


対応


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


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

 閲覧数:5,050 投稿日: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;」

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

border: none;


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


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


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


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

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

float:none;


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

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


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


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

 閲覧数:2,158 投稿日: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;」

 閲覧数:864 投稿日: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;」

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

font-family:auto


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

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

 閲覧数:1,726 投稿日: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タグの閉じタグを付与しない



週間人気ページランキング / 3-22 → 3-28
順位 ページタイトル抜粋 アクセス数
1 Design 0 42
2 LOCK: File currently in use. / マニフェストを読み込めませんでした 10
3 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
4 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
4 16進数カラーコード / 2進数 6
4 navタグで定義している部分だけCSSが効かない【html5】 | HTML5(HTML) 6
5 HLS / HSL 4
5 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 4
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
6 画像大きさ | 他サイト調査(HTML) 2
6 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
6 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2
7 Google Chrome を閉じた際にバックグラウンド アプリの処理を続行する / ハードウェア アクセラレーションが使用可能な場合は使用する 1
7 Chromeで名前を付けて保存する際、ファイルを一つにする方法 1
7 ログイン 1
7 「font-size」効果を打ち消すスタイルシートは、「font-size:100%;」? 1
7 イラスト素材 | デザイン 1
7 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 1
7 36ビットカラー 1
7 RGBの種類 / ビットカラー | RGB(色) 1
2024/3/29 1:01 更新