効果を打ち消すスタイルシート | 「CSS」カテゴリー

5行で要約

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

一覧

　閲覧数:826　投稿日: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,083　投稿日: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,675　投稿日: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;」

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

経緯

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

対応

margin:auto;

<body style="margin:auto">

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

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

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

border: none;

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

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

border: 1px solid #ddd;

▼効果を打ち消すCSS

border: none;

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

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

float:none;

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

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

	float: left;

▼効果を打ち消すCSS

	float:none;

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

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

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

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

font-family:auto

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

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

　閲覧数:2,329　投稿日: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	効果を打ち消すスタイルシート	100
2	Chromeをインストール出来ない	39
3	テーブルレスポンシブ	33
4	トップページタイトル表示形式調査	33
5	｢レイヤー」＋「レイヤー効果」をコピーして新規psdにペースト	31
6	タイトルロゴ他サイト調査	31
7	イラスト素材	30
8	画像背景色を透明化するオンラインサービス	29
9	Privateスマートフォンデザインルール	29
10	画像補正プライベート運用ルール	28
11	背景CSS シームレスパターン	28
12	モバイルデザイン9 ／トップページリスト表示	27
13	画像からカラーコードを取得するオンラインツール	27
14	モバイルデザイン5 ／スクロールアニメーション	26
15	デスクトップにChromeのショートカットを作成	26
16	スマートフォン対応	26
17	シークレットモード	26
18	SVGイラスト素材	26
19	色モデルイメージ図	26
20	レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定	25
	2025/4/30 6:23 更新

順位	ページタイトル抜粋	アクセス数
1	鉄道会社毎のカラーコード \| カラーコード(色)	13
2	Inkscape \| ソフトウェア	12
2	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	12
3	ツールチップが表示されないときー	10
4	「東京都」のカラーコード取得は難しい \| カラーコード(色)	6
5	ログイン	4
5	「Create Link」代替拡張機能を探した結果は、「CopyTabTitleUrl」でした。 \| CopyTabTitleUrl(Chrome 拡張機能)	4
5	似顔絵ジェネレーター : 似顔絵メーカー／ NIGAOE MAKER	4
5	RGB ⇔ Lab \| 色変換(色)	4
6	Design 0	3
6	効果を打ち消すスタイルシート \| CSS	3
6	「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 \| カラーコード(色)	3
6	他サイト調査(HTML) カテゴリー	3
6	血の色／ #b30000 ／ #360800 ／ #ff0000 \| カラーコード(色)	3
6	FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 \| Font Awesome(フォント)	3
7	max-width: 100%の効果を打ち消すには、max-width: none; \| CSS	2
7	気が付いたこと	2
7	別方法	2
7	キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス \| イラスト参考(デザイン)	2
7	「bgcolor」「background-color」「background」の違い \| CSS	2
	2025/4/30 1:01 更新