• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：FirefoxのStylish について）

FirefoxのStylishで表示レイアウトを変更する方法

このQ&Aのポイント
  • FirefoxのStylishを使用して、サイトの表示レイアウトを変更していますが、CSSの理解が十分でないため、問題が解決できません。
  • 現在、FireDebugとAdblock Plusを使用して一部の部分を非表示にしていますが、Stylishで管理したいと考えています。
  • 具体的には、Firedebugで特定の定義を見つけて、heightを0に変更したいと思っていますが、Stylishではうまく機能しませんでした。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

firebugですね。はにすいしいこなきなんて知らない。 HTML/CSSが両方見れている状況で、スタイルシート側の余白を右クリックして「新しいスタイル」にして、隠したい要素を指定してdisplay:none;でよい。 li[style=”float:left;width:728px;margin-left:8px;height:110px;"]{display:none;} とか、それがdiv.header内にあれば div.header ol li{display:none;} !important 　は最重要宣言になってしまう。カスケーディング上特殊な扱い。 CSSは、カスケーディングスタイルシートと銘打つくらい 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) 　の二つを知らないと、まったく利用できない。 ＞<div class=”クラス名” の定義もあったので 　このように、本来「文書に構造を付加するための( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」DIVをデザインのために記述するという失敗をすることになる。

koi1234
質問者

お礼

＞firebugですね。 ご指摘のようにfiredebugはfirebugの書き間違いです ＞はにすいしいこなきなんて知らない タイプミスなのか何を書かれてるか理解できません li[style="float:left;width:728px;margin-left:8px;height:110px;"] {display:none !important;} はすでに試していたはずなんですが（試したこと２の項目で） 改めて試したところなぜか今回は機能してしまいました ちょっと？？？？？？状態です(入力ミスでもしたんだと思うけど） ＞!important ＞　は最重要宣言になってしまう。カスケーディング上特殊な扱い。 http://www.authority-site.com/2010/05/firefox/how-to-make-stylish-css.html を参考にしていますがCSSの適用順に関係する項目で !important を付けなければ、ウェブページの指定が優先されてしまうということなので どちらにしてもそれで悩まないようにとするために 必要がなくても 必ずつけるようにしています つけることで動かないということもあるという事でしょうか？ 　　上記 URL以外にも他のCSS説明ページや 　　他のユーザが作って公開されているスタイルに書かれている 　　いくつかの方法とを組み合わせながら試行錯誤しています ちなみに今回　!important をつけない状態（書いていただいてる内容）も 確認してみましたが li[style="float:left;width:728px;margin-left:8px;height:110px;"] {display:none;} では消えませんでした　　回答そのまま貼り付けは構文エラーになりました 実は現在他にも同様な現象が出ているものがあるのですが そちらはまたちょっと事情が違うのでもう少し試行錯誤してみたいと思います 一応簡単に書いてみると adblock　では　##.jhasvdjhas　の定義で消えている stylish　では　.jhasvdjhas {display:none !important} 書いても消えない （とりあえず今回改めてやってみましたがやはり対応不可のまま） ↑どちらかというと今回質問した項目と比べると 他の方法で消せている記載と ほとんど同じような状態のはずなんでこっちの方が簡単なはずなんだけどなぜか消えない 回答ありがとうございました

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

firebugの名前が出ていたので、質問を誤解していたかも。 　あくまであなたが特定のサイトの表示を変更したいということとしたら、firefoxの場合はuserContent.cssの編集になります。 ＞li[style="float:left;width:728px;margin-left:8px;height:110px;"] {display:none;} では消えませんでした　回答そのまま貼り付けは構文エラーになりました＞ ★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　で調べたら分かるように構文エラーはありません。他の原因でしょう。 ＞.jhasvdjhas {display:none !important} 　詳細度が[0,0,1,0]ですね。 li[style="float:left;width:728px;margin-left:8px;height:110px;"] 　だと、詳細度は[0,0,1,1]です。 　当然ですが、それ以上詳細度の高い設定が他にあれば、上書きでません。 たとえば、 <body> 　<div class="article"> 　　<div class="header"> 　　　<div class="nav" id="globalNabi"> 　　　　<ol> 　　　　　<li> [HTML5] <body> 　<article> 　　<header> 　　　<nav id="globalNabi"> 　　　　<ol> 　　　　　<li> 　というDOMでしたら div.header div.nav ol li:first-child{ /* 詳細度[0,0,3,4] */ header nav ol li:first-child{ /* 詳細度[0,0,1,4] */ 　それで効かなければ div.header div.globalNavi ol li:first-child{ /* 詳細度[0,1,3,4] */ header nav#globalNavi ol li:first-child{ /* 詳細度[0,1,1,4] */ 　とする。 　著者の重要宣言は、他の場所での通常宣言を上書きするための機構ですが、詳細度の差を越えて上書きしてしまうため、注意しないとならなくなります。 [例] div.header p{color:red;/* 文書のヘッダ(クラスセレクタ)内のp要素は赤 [0,0,1,1] */ p{ color:blue;} /* p要素(タイプセレクタ)は青[0,0,0,1] */ 　これだと、ふたつの指定が離れていても、とても分かりやすい。 div.header p{color:red;/* 文書のヘッダ(クラスセレクタ)内のp要素は赤 [0,0,1,1] */ p{ color:blue !important;} /* p要素(タイプセレクタ)は青[0,0,0,1] */ 　この場合、ふたつの設定が離れていると分かりづらくなる。 ★stylishで、ユーザー用スタイルシートを作成する場合は、御指摘のように、ユーザースタイルシートに!importantを付けて、サイト側の指定を上書きする必要があります。 　⇒6.4.1 カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order ) 　サイト別に指定する場合は 　⇒ユーザスタイルシートによるカスタマイズ(1) - えむもじら( http://level.s69.xrea.com/mozilla/index.cgi?id=20070114_sdfx2_2#toc-site-style ) @-moz-document url-prefix(http://oshiete.goo.ne.jp/){ 　　body { background-color: #ddf !important; } }

koi1234
質問者

補足

＞特定のサイトの表示を変更したい 趣旨としてはそういう事です(ユーザ用スタイルシート設定の質問） firebug は要素などの確認のために使っている というだけです （こちらも細かな使用方法は理解していません） 公開するつもりもありませんし自分の嗜好依存での変更なので めちゃくちゃな書き方だろうが 多少レイアウトが崩れようが特に問題となるようなこともありません 本サイトの表示も質問と回答以外はかなり消しまくり 空きスペース分の幅を質問・回答表示のエリアに含めるようにしてしまっています ＞構文エラーはありません。他の原因でしょう あんまり深い意味はなかったのですが " の表記が間違ってるために（先頭が”で記載）エラーになったということです 最初はそのまま貼り付けて　お試し　したのですはエラーで実行できませんでした 画面の表示フォントなどの関係で始め見分けができずにちょっと悩みましたが 再度自分で定義しなおしたときに気が付きました ＞ユーザー用スタイルシートを作成する場合は、御指摘のように、 ＞ユーザースタイルシートに!importantを付けて、 ＞サイト側の指定を上書きする必要があります。 現状の方法で問題ないということで理解しました 全文ちゃんと読むのは後になるのでとりあえず補足にて

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. その他(ソフトウェア)

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する