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

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

FirefoxのStylish について

現在いくつかのサイト閲覧時の表示レイアウトを変更するために Stylish にて自作の定義を作っているのですが ｃｓｓを理解していないこともあり(基本的に全く理解してません） どうしても自己解決ができずに悩んでいる点があります もしわかる人がいたらどんな書き方すれば対処できるのかを教えてください （もしくはどう頑張っても対処不可のものがある？） 使っているアドオンとしては 他に FireDebug　と Adblock Plus(以降Adblock表記) があり とりあえず現状は合わせ技で対処してますが可能であれば 現在　Adblock にて非表示にしている部分を　Stylish 管理にしたいと思っています 内容 Firedebugにて htmlの項目として以下の定義がなされている部分を height 0 もしくは非表示 に変更したい(そのスペースを詰めたい） <li Style=”float:left;width:728px;margin-left:8px;height:110px;"> （データ的には該当領域には広告画像が表示されます） ・Firedebug上からのスタイル変更はできています(確認にしかならない） ・AdBlock にて 以下の定義で 非表示にすると対応はできています サイト名##LI[style="float:left;width:728px;margin-left:8px;height:110px;"] 　　↑ の事から height 0 でも非表示でもどちらでもできればいいと考えています ですがこれをStylish側で対処させようとしてもうまくいきません 試したこと １．Firedebug にて 標準の element.style ｛ height が効いているようだったので 　　そのままそれをコピーしてheight:0 !important; を追加 　　（他のサイトでそのような書き方で変わるところもありました） ２．他のパターンでできている #や.の定義と同様にしてdisplay: none !important; を追加 ３．FireDebug で階層を開いていくと <div class=”クラス名” の定義もあったので 　　（他のものは大抵その記載で非表示にできている） 　　そのクラス名でdisplay: none !important記載追加 　　　　この場合 FireDebug で確認すると サイズが変更されているので 　　　　別のものになってしまっているように思える ※ 上記 コピペなどしているため記載ミスがあるかもしれませんが 　　stylish上でのお試し時にエラーは出ていません なんとなく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

  • FireFoxで確認するとliがずれます

    webページを作成していてリスト部分が下にずれてしまうのに困っています。 添付図のようにIEで見るとちゃんと置きたい位置に収まってくれるのですが、 firefoxでは収まってくれません。 ご教授頂けたら幸いです。 タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div><!-- /gNavi --> </div> スタイルシート #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } 素人作成のため乱雑の作成内容で恐縮ですが、 アドバイス頂けると幸いです。

    • ベストアンサー
    • HTML
  • <li>の黒い点を消したい。

    宜しくお願いします。 スタイルシートで<li>を使用しボタンを表示させているのですが、IEの場合は問題ないのですが、ファイアフォックスの時、ボタン画像の横に黒い点が表示されてしまいます。 これを消すにはどうすれば良いでしょうか？ #navibar { height: 70px; width: 840px; margin-right: auto; margin-left: auto; padding-bottom: 10px; } #navibar li { float: left; height: 40px; width: 140px; } お願いします。

    • ベストアンサー
    • HTML
  • Firefoxでheight:100%がきかない？

    ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側（2カラム内包）*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（左側）*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（右側）*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>

  • IE6で画像の下に余白が入ってしまいます。

    CSSを使ってレイアウトをしているのですが、 <ul> <li>画像</li> <li>画像</li> <li>画像</li> </ul> でなぜか画像ごとに、下の部分に少しだけ余白ができてしまいます。 CSSでmarginやpaddingを0にしたり、 http://www.happy-crossing.com/tagmemo/log/eid11.html にあるようにvertical-align:bottomにしたり・・・ それでもなぜか下の余白が表示されています。 こちらの方は治ったみたいなのですが・・・ 他のブラウザはいろいろ見ましたが、余白などなく表示されていました。 Dreamweaver上でも少し余白が見えています・・・ お心当たりのある方がいらっしゃいましたら、どうかよろしくお願致します。 CSSは以下のように記述しています。 ul { float: left; margin: 0px; padding: 0px; list-style: none; margin-top: 45px; } li { width: 150px; background-repeat: no-repeat; padding-left: 13px; padding-bottom: 0px; height: 140px; float: left; vertical-align: bottom; margin-bottom: 0px; }

    • ベストアンサー
    • HTML
  • Firefox Stylish 1.2.4のCSS

    Firefox Stylish 1.2.4のCSSを記入するテキストエリアが表示されません。 理由は、 iframe{ display:none !important;} 自体を指定している為だと思いますが、毎回無効化すると表示されるので・・・ （前バージョンのStylish 1.2.3までは有効でも表示されていましたので、 今バージョンでiframeを採用したのでしょうか？・・・） それで、 解決方法をしては、Stylish自身を例外指定とすれば良いのですが、 iframe{ display:none !important;} @-moz-document ○○○○ { iframe:not([style*="display:"]){ display:inline !important;} } この ○○○○ 部分のセレクタが分かりません・・・ または、その他のセレクタでもOKです。　　ご教授下さい。

  • safariだけCSSが崩れてしまいます

    safariだけCSSが崩れてしまいます。 初心者ですが、教えて下さい。 コンテンツ部分の中に、画像(説明文付き)を横並びに３列並べて表示するためにfloatで指定してあります。 下記のように並べたいのですが、safari以外のブラウザでは全てうまく表示されるのに、safariだけ2と３が下に落ちて崩れてしまいます。 1 2 3 4 5 6 どのようにしたら横に並んでくれるのか、わかりません。。 どうかお詳しい方、ご教授下さい。 ______________________________________ #secondary { float:left; width:705px; padding:10px 0 0 15px; margin:0; } .index .module { float:left; width:210px; margin:0 17px 0 0; padding:0 4px; text-align:left; } .galleries { background:#eee; float:left; width:100%; margin:0 0 15px; position:relative; } .gallery .galleries { float:left; position:relative; width: 720px; margin:0 0 15px; padding:0; list-style:none; padding-top:10px; line-height:1.4em; } .gallery .galleries .thumb { float:left; margin:0 10px 10px 0; } .index .galleries { margin-bottom:5px; } .galleries ul { float:left; margin-left:0; margin-bottom:0; list-style:none; text-align:left; } .galleries li { background-image:none; float:left; position:relative; width:220px; height:6.4em; overflow:hidden; margin-bottom:0; padding:75px 0 1.6em 15px; } .archive .galleries li { height:10.5em; } .galleries h3 { margin:0 10px 0 4px; font-size:100%; } .galleries h3 a, .galleries a.img, .galleries h3 a:visited { border-width:0; } .galleries .img { position:absolute; top:4px; left:15px; } .galleries .img img { display:block; } .galleries p { margin:0 10px 0 4px; } .galleries div { margin:0 4px; } .gal { background:url("../images/bg_gal.gif") 11px 0px no-repeat; margin:0; } html>body .gal { background-image:url("../images/bg_gal.png"); }

    • 締切済み
    • CSS
  • text-indentが効かない。。。

    こんにちわ。みなさまのアドバイスにいつも助けられ感謝の毎日ですが、またしても困ってしまったのでご助言いただければ幸いです。 HTMLのヘッダー部に「お問い合わせ」や「アクセス」などの小さなナビゲーションを作り、CSSで以下のように定義しました。 .tnavi 　　　{width: 285px; height: 31px; margin:0 0 0 60px; list-style: none; } .tnavi li　　{float:left; margin-right:2px; text-indent:-9999px;} .tnavi li a　{width:93px; height:31px; display:block;} 表示はgif画像を出すつもりなのですが、画像の上に思い切り「お問い合わせ」や「アクセス」とリンクテキストが表示されています。aタグ側にもとりあえず定義してみましたが変わりありません。 他に確認すべき項目ありますか？

    • ベストアンサー
    • HTML
  • IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）

    こんにちは、質問させて下さい。 現在　li　タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • IEでは指定の位置に配置してくれません

    添付図のようにしたいのですが、 IEでは右に空白ができてしまい配置したいところに配置できません。 図のFireFox確認時の方が配置したい位置に配置できている正です。 タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div><!-- /gNavi --> </div> CSS /* レイアウト設定ここから */ #pageBody { width: 740px; margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: auto; } #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #topFlContens { width: 740px; height: 320px; margin: 0px; padding: 0px; } #box { width: 740px; height: 550px; margin-top: 20px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding: 0px; } /* レイアウト設定ここまで */ #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi ul { margin: 0px; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } Web初心者のため、アドバイス頂けると幸いです。

    • ベストアンサー
    • HTML
  • IEでのCSS適用方法について。

    IEでのCSS適用方法について。 <lu><li>にスタイルを適用したいのですが、IEだけ適用されません。 バージョンは８です。 CSSは以下のように書いています。 #footer lu.list1 { float: left; margin: 0; height: 150px; width: 400px; } #footer lu.list2 { float: left; margin: 0; height: 150px; width: 400px; } #footer lu li { list-style-type: none; border-bottom: 1px dotted #ccc; height: 2em; text-indent: 1em; } HTMLは以下のように書いています。 <div id="footer"> <lu class="list1"> <li>Information</li> <li>○○○○○</li> <li>○○○○○</li> <li>○○○○○</li> <li>○○○○○</li> <li>○○○○○</li> </lu> <lu class="list2"> <li>&nbsp;</li> <li>○○○○○</li> <li>○○○○○</li> <li>○○○○○</li> <li>○○○○○</li> <li>&nbsp;</li> </lu> </div> セレクタの指定の仕方でしょうか。 何度やっても思うようにスタイルを適用できません。 どなたか、ご教授のほどお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する