スクリプトタグのボックスをCSSでかえる

質問

googleadsenseなどのスクリプトタグのボックスをCSSでmarginなど変えることはできないのでしょうか？

回答No.4

ORUKA1951 · ベストアンサー

＞難しくて残念ながらすべてわかりません。

　難しくなんかありません。ある意味とってもわかりやすいです。
　最初にプロパティから入ってしまったから難しいだけです。

[例]必ず樹構造から考えます。
　body
　　|-- div　(1)
　　|　　|-- div (2)
　　|-- div (3)
　　|　　|-- div　(4)
　　|--div (5)
　　　　 |-- div (6)
　　　　　　　|-- div (7)

としたら、
*{}ですべての要素 *全称セレクタで　　　　　 詳細度 0 0 0 0 →すべての要素
div{}ですべて(1) ～ (7) タイプセレクタ×１で詳細度 0 0 0 1 →(1)～(7)のdiv
div div{}は半角スペース(子孫セレクタ)　　 　詳細度 0 0 0 2 →(2)(4)(6)(7)
div div div{}　　　　　　　　　　　　　　　　詳細度 0 0 0 3 →(7)
div>div 子セレクタ 　　　　　　　　　　　　　詳細度 0 0 0 2 →(2)(4)(6)(7)
div+div 隣接セレクタ　　　　　　　　　　　　 詳細度 0 0 0 2 →(3)(5)
body>div 子セレクタ　　　　　　　　　　　　　詳細度 0 0 0 2 →(1)(3)(5)
body div:first-child　擬似クラス　　　　　　 詳細度 0 0 1 2 →(2)
body div:nth-child(2) 擬似クラス　　　　　　 詳細度 0 0 1 2 →(3)　CSS3

とか、別にclass名やidなくても特定できるはずです。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
★5.1 Pattern matching ( http://www.w3.org/TR/CSS2/selector.html#pattern-matching )
　↑原文　CSS2.1

★5.1 パターンマッチ（Pattern matching） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#q1 )
　↑邦訳ただしCSS2

★6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )
　↑原文 CSS2.1 CSS2.1がウェブ標準でCSS2より変更されている。

　一見難しそうですが、慣れたらとても簡単です。

お礼

わからなかったので再質問したのですが、こちらを先に閉じるべきでしたすいません。

回答No.3

ORUKA1951

いえ、javascriptが出力するHTMLです。
＞scriptが書き出すHTMLに対してスタイルシートを書きます。

たとえば、
<div class="section">
<h2>見出し</h2>
<script src="insert.js" type="text/javascript">
</script>
</div>
というHTMLがあり、
insert.jsが
document.write(
'<div id="newBlock">',
'<h2>javascriptで</h2>',
'<p>記事を書く</p>',
'</div>'
);
なら、結果的にHTMLは

<div class="section">
<h2>見出し</h2>
<div id="newBlock">
<script src="insert.js" type="text/javascript">
</script>
<h2>javascriptで</h2>
<p>記事を書く</p>
</div>
</div>
となりますね。
この場合スタイルシートはDOMが変わりますから
　　　　　　　　　　　　　　^^^^^^^^^^^^^^^^^^^
[DOM]は、
DIV　　　　　　　　　　　　　　section
　|-- #text
　|--H2
　|　　└-#text
　|-- #text
　|-- script
　|　　└-#text
　|-- DIV　　　　　　newBlock
　|　　|--H2
　|　　|　└-#text
　|　　└ P
　|　　　└-#text
　└#text
ですよね。firefoxに付属のDOMinspectroで一目瞭然です。(ツール→Web開発にある)
firebugを使うと、javascriptで出力されたHTMLやそれに対するスタイルなどもわかります。
[添付画像]はfirebugでターゲットなる要素を見つけたところ。

よって、
#newBlock{ナンたらかんたら}
#newBlock h2{}
とか指定しなければなりません。

DOMを見られたらわかるように、javascript要素には含まれていません。ですから
javascript|color:red;}
じゃダメなのがわかりますよね。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

難しくて残念ながらすべてわかりません。

とりあえず、firebugでボックスの色が変わるタグをセレクタにすれば、良いのですかね？

classはソースにない場合はどうやってクラス名を要素に付けるのでしょうか？
下記の場合なら、どこでしょうか？

<script type="text/javascript"><!--
google_ad_client = "ca-pub-****76272905****";
/* 縦最大 */
google_ad_slot = "";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

回答No.2

ORUKA1951

script要素ではありません。
scriptが書き出すHTMLに対してスタイルシートを書きます。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

CSSのセレクタはどのように確認すればよいのでしょうか？
下記のようになっています。

<script type="text/javascript"><!--
google_ad_client = "ca-pub-****76272905****";
/* 縦最大 */
google_ad_slot = "";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

またclassは
<script class＝”あああ”　type="text/javascript">
とすれば良いのでしょうか」？

回答No.1

ORUKA1951

できますよ。
　きちんとセレクタを記述してデザインを適用したい要素を指定して、宣言ブロックで指定します。
⇒5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
⇒6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
あたりから・・・

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

script {
margin: 0px auto 0px auto;
}

という風にしたのですが、優先順位が低いからですか？いじりたいmarginは属性の方にはないのですが。