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

CSS

5行で要約

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

一覧

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

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

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

経緯


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


対応


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


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

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

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

border: none;


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


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


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


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

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

float:none;


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

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


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


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

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

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

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

font-family:auto


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

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

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



週間人気ページランキング / 1-21 → 1-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 42
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 26
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 20
5 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する | CSS 12
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 12
5 GIFアニメーション | 画像 12
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 12
6 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 11
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 10
7 「bgcolor」「background-color」「background」の違い | CSS 10
7 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 10
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 10
7 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 10
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 9
8 ICCプロファイル | カラーマネージメント(色) 9
8 Design 0 9
8 RGBの種類 / ビットカラー | RGB(色) 9
9 「属性」「プロパティ」「アトリビュート」の違い | CSS 8
2023/1/28 1:01 更新