質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

17806閲覧

特定の要素のスタイルシートを無効化して新たにスタイルを適用する方法を探しています

mido

総合スコア14

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/08/02 07:02

編集2016/08/02 07:45

ワードプレスでテーマをカスタマイズしています。
特定の要素だけデザインを変える必要があります。

その際、スタイルの継承を上書きすればスタイルが変更されることは分かっているのですが、かなりたくさんのプロパティがありややこしいです。

これを特定の要素だけリセットcssのようにスタイルをリセットして、改めて好きなスタイルを適用できる簡単な方法を探しています。

jqueryまたは、styleタグにscoped属性を付けることで解決できるものなのでしょうか?
知っている方がいましたらご教授下さい。

こんな感じはダメでしょうか?

<div class="example"> <style scoped> * { all: initial } @import url('newStyle.css'); </style> <input type="example" value="送信"> </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/02 07:53

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
guest

回答3

0

CSS のカスケード処理、詳細度の計算

CSSではカスケード処理による上書きを基本としている為、定義したスタイルを消すことは出来ません。

[JavaScript] document.styleSheets でセレクタ適用範囲を変更する

特定の要素に適用済の全スタイルを消す手順

  1. document.styleSheets で全てのスタイルをリストアップする
  2. リストアップしたセレクタを Element.prototype.matches で対象の要素に適用されるか確認し、適用されるなら 対象のセレクタを含まないセレクタの生成手順 の 1. へ移動し、そうでなければ 3. へ進む
  3. 次のスタイルを評価し、存在するなら 2. へ戻り、存在しなけれら終了する

対象のセレクタを含まないセレクタの生成手順

  1. 対象の要素を E とし、対象のセレクタを S1 とする
  2. S1 を元に対象の要素が適用されないセレクタ S2 を生成する
  3. document.querySelectorAll(S1) の評価値を ELEMENTS1 とし、document.querySelectorAll(S2) の評価値を ELEMENTS2 とする
  4. ELEMENTS1.length - ELEMENTS2.length === 1 が真であり、かつ差分となる要素が E1 であるなら 5. へ進み、そうでなければ 2. へ戻る
  5. 対象のセレクタを書き換え、特定の要素に適用済の全スタイルを消す手順 の 3. へ進む

ただし、この方法には次の制約があります。

  • 書き換えたセレクタの詳細度が変化した場合にカスケード処理に影響が出る

各セレクタの詳細度の差を大きくしてカスケード処理に影響が出ないようにする工夫が必要になります。

[JavaScript] style属性でデフォルトスタイルシートに上書きする

  1. 対象の要素を E1 とし、document.cloneNode(true) の評価値を D とする
  2. E1 を参照可能ならセレクタ文字列を探し、SELECTOR とする
  3. D.querySelector(SELECTOR) の評価値を E2 とする
  4. D のドキュメント上から全てのstyle要素、link[rel=stylesheet] 要素を削除する
  5. D のドキュメント上に存在する全ての要素の style 属性を削除する
  6. E2 の computedStyle を参照し、STYLE とする
  7. E1.style に STYLE を適用する

この方法には次の制約があります。

    1. と 3. の STEP 間でDOMツリーに動的な変更が加えられた場合、E1 と E2 の同一性を保証できない可能性がある

setInterval で定期的にDOMに変更を加えるような実装でもなければ影響はないと思いますので、「document.styleSheets でセレクタ適用範囲を変更する」と比べれば影響範囲は小さいと思われます。

まとめ

「スタイルを消す」というカスケードスタイルシート(CSS)と異なる概念を持ち込もうとしているので、どうやっても実装に無理が出てしまいます(完璧な手段はありません)。
普通に考えればCSSの仕様内でカスケード処理させるのが順当です。

やむを得ない事情があるという事ですので、十分に事前調査した上で副作用がある事を承知の上で実装することをお勧めします。
どちらの方法をとるにしても CSS と DOM について十分な深い知識が必要になります。

Re: mido さん

投稿2016/08/02 10:18

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mido

2016/08/09 11:47

スクリプトでやる方法の提案ありがとうございました。 適用されているスタイルを取得して、初期化してから、適用ということになると思うのですが、もっと簡単にできるのでは?と思っていただけに、現実は複雑なのだと思い知らされました。
guest

0

ベストアンサー

本来であれば詳細度の高いセレクタで指定すれば上書きできるのですが、それをいちいち調べたくないということですよね?

リセットしたい要素にclass="reset"でもつけて、

.reset { margin: 0!important; padding: 0!important; ・・・略 }

って全部のプロパティをリセットしてやったものを書いておくのはどうでしょうか?

①reset.cssがあればreset.css
②テーマのCSS
③.reset{}
④自分のCSS
の順序で記述することになりますかね。

④は、

.reset.hoge { margin:10px!important; padding:20px!important; }

のように。

しかしこんなことをするくらいなら「特定の要素」のセレクタを突き止めて修正したほうが早くてキレイ、あとで困らない、と思います。

投稿2016/08/02 07:24

NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mido

2016/08/02 07:48

継承されるプロパティが予測できないこともあり、やはり一旦全てリセットしてから、新たにスタイルを適用したいと考えています。
guest

0

特定の要素だけリセットcssのようにスタイルをリセットして

というのは難しいと思います。
デベロッパーツールでちまちま修正するのが保守の手間を含め結局低コストな気がします。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2016/08/02 07:28

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mido

2016/08/02 07:46

諸事情があってダメなのです。 リセットして、新たにスタイルを適用できる方法を探しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問