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

CSS

5行で要約

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

一覧

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

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

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

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

経緯


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


対応


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


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

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

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

border: none;


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


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


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


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

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

float:none;


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

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


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


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

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

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

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

font-family:auto


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

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

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



週間人気ページランキング / 7-26 → 8-1
順位 ページタイトル抜粋 アクセス数
1 画面キャプチャ | Chrome 拡張機能(ブラウザ) 51
2 RGB ⇔ Lab | 色変換(色) 46
3 血の色 / #b30000 / #360800 / #ff0000 | 色 31
4 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
5 RGBの種類 / ビットカラー | RGB(色) 24
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 23
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 21
8 Design 0 20
9 「bgcolor」「background-color」「background」の違い | CSS 15
10 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 12
11 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 11
11 HSLとHSVの違い | 色変換(色) 11
12 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 10
13 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 9
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 9
13 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 9
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 9
13 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
14 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
2021/8/2 1:01 更新