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

CSS

5行で要約

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

一覧

 閲覧数:746 投稿日: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,911 投稿日: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,569 投稿日: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;」

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

経緯


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


対応


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


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

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

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

border: none;


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


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


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


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

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

float:none;


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

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


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


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

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

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

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

font-family:auto


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

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

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



週間人気ページランキング / 10-5 → 10-11
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 48
2 RGB ⇔ Lab | 色変換(色) 12
3 Design 0 9
4 16進数カラーコード / 2進数 8
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 5
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 5
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 5
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
7 鉄道会社毎のカラーコード | カラーコード(色) 4
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
8 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
8 8ビットカラー / インデックスカラー / パレットカラー 3
8 「bgcolor」「background-color」「background」の違い | CSS 3
2024/10/12 1:01 更新