ベストアンサー

スクリプトタグのボックスをCSSでいじる方法

2012/07/10 17:37

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

htmlcss123
お礼率66% (194/293)

CSS
回答数7
ありがとう数7

みんなの回答 （7）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/07/14 14:59 回答No.6

＞この時はこのタグを使った方が良いというのも仕様書にあるのですか？　もちろんです。それが一番重要です。　そもそも、HTMLはHyper Text Markup Language の略で、ひとつの文書を、それを構成する要素(Element)に分解し、それぞれが、どんな要素であるかをマークアップするメタ言語といわれるものです。　具体的には、 <h1>ここは見出し-heading--</h1> <p>ここは段落--paragraph--</p> <ol> <li>これはリストの項目--list item--</li> <li>これはリストの項目--list item--</li> </ol> <p>ここから<strong>重要</strong>です。ここも<em>すこし強調--emphasis--</em>です。</p> というふうになね。　HTML4.01では、９０個程度あります。それから非推奨のものを除くと７５個程度、絶対に使う<html><body><head>や、ほとんど使わないものを除けば数十個しかありません。わざわざ『最低限このタグは知っておいた方が良い』と区別する必要すらない数です。　あなたはすでに、その半分は知っているはずです。　大事なことは、繰り返しますが「ひとつの文書を、それを構成する要素(Element)に分解し、それぞれが、どんな要素であるかをマークアップする」ことだけです。　ここに、デザインの要素はまったく入っていません。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 　タグで足りなければ、divやspanにid名やclass名をつけてマークアップします。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より　idやclass名も、文書の要素をマークアップする手段なのです。　たとえば、 <div class="header"> 　<h1>ぺーじの見出し</h1> 　<p> 　　googleadsenseなどのスクリプトタグのボックスをCSSでmarginなど変えることはできないのでしょうか？　</p> 　<p> 　　うまくいきません。　</p> 　とするのです。　そしてスタイルシートでは p{margin:0;line-height:1.6em;text-indent:1em;} div header{color:blue;} とかしてみてください。　仕様書なんて、すべて覚える必要はありません。必要なときどこを読めば良いかわかればよいです。なんども繰り返していたら、自然に覚えちゃいます。 ★みんな、そうやって覚えてきたのですよ。まあ、老化防止とでも思って。

質問者

お礼 2012/07/14 23:31

ありがとうございます。お忙しい中大変ありがとうございました。 script { margin: 0px auto 100px auto !important; } script ins { display:block !important; margin: 0px auto 100px auto !important; padding: 0px 0px 0px 0px !important; width: 500px !important; } としても結局何も変化がありません。 <ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px"> このタグがinsの一番親なのでアドセンスのボックスの下にmarginを付けたいなら、CSSをつければいいのですよね？ display:inline-table; があるのでインラインになってしまって結果的に適応されないのでしょうか？もう正直分からないのでdivで囲っちゃおうかと思っちゃいます。

その他の回答 (6)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/07/15 09:11 回答No.7

＞としても結局何も変化がありません。　結局あなたは、私の回答をまったく読んでない。　スクリプトタグのボックスをCSSでかえるの回答No.2 ( http://okwave.jp/qa/q7580337.html#a2 ),回答No.3 ( http://okwave.jp/qa/q7580337.html#a3 )で＞scriptが書き出すHTMLに対してスタイルシートを書きます。と回答しています。　javascriptが動作した後のHTMLは <script*****> <script> <ins style="display:table-cell****>★★javascriptが書き出すHTML★★</ins> <ins style="display:table-cell****>★★javascriptが書き出すHTML★★</ins> 　となっているとのことでしたよね。( http://okwave.jp/qa/q7582722.html#a3 への補足)ということはHTMLの樹構造は |-- scritt |-- ins |-- ins となっているとということですね。scriptになにを指定しようが、その外にあるins要素には一切無効です。　insの内容上の例で言うところの「★★javascriptが書き出すHTML★★」についてスタイルを書くためには、セレクタでこのins要素を特定しなければなりません。　(セレクタ-selectorとは選択(select)する方法--選択子) 　ここで、scriptに隣接している要素を指定するには script + ins{ 　と隣接セレクタ/兄弟セレクタ + を使わなければなりません。　さらにその兄弟でしたら script + ins + ins{ 　ですね。 →5.7 隣接セレクタ（Adjacent sibling selectors） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#adjacent-selectors ) 　ここで、ins自体はそのstyle属性でdisplay:table-cell と書かれていますから、これはもう動かせないので、 script + ins{ script + ins + ins{ にたいしてスタイル指定をすれば良いのです。　その仕組みを理解するために、スクリプトタグのボックスをCSSでいじる方法の回答No.3で ( http://okwave.jp/qa/q7582722.html#a3 )でサンプルまで作って理解できるようにしたはずです。スクリプトタグのボックスをCSSでかえる - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7580337.html ) スクリプトタグのボックスをCSSでいじる方法 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7582722.html ) 　の質問と回答をとにかく読んでください。折角回答してもらっても読まなきゃわかるはずがありません。　

質問者

お礼 2012/07/15 18:57

ありがとうございます。お忙しい中大変ありがとうございました。お陰様で、何とかなりました。ただhttp://allergy.6.ql.bz/tokusyu.htmlこちらのアドセンスもブロック要素になってしまうせいか、せっかく横に並んでいたのに縦になってしまいました。色々やりましたが、 script+ins { display:block !important; margin: 0px auto 100px auto !important; padding: 0px 0px 0px 0px !important; width: 400px !important; } をbase.cssから消してtokusyu.css以外に入れるしかないですね。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/07/13 16:08 回答No.5

＞insはインライン要素ではないのですね。　いいえ、この場合はインライン要素です(注)が、No.3の補足であなた自身が示されたように <ins style="display:inline-table; 　とstyle属性(詳細度 A=1)で、block要素に書き換えられていますから、さらに加える必要はないのです。 (注) ins要素【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからこの2要素(DEL/INS)は、HTMLの常識に反し、ブロックレベル要素としてもインライン要素としても機能する(同時にはならない)。段落中の1つ以上の語を含むこともできるし、段落やリスト、表など1つ以上のブロックレベル要素を含むこともできる。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-ins )］より　この場合(No.3の補足)は、インライン要素ですから、style属性でblockにしています。　この問題が解決したら、一度仕様書を最初から最後まで目を通してください。後で必要なとき、どこを探せばよいかわかる程度に・・　そうしないと、非効率的ですし上達は望めません。

質問者

お礼 2012/07/14 13:02

ありがとうございます。お忙しい中大変ありがとうございました。この時はこのタグを使った方が良いというのも仕様書にあるのですか？すべては覚えられないので、最低限このタグは知っておいた方が良いという事があるサイトなどありましたら、恐縮ですが教えてください。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/07/12 18:27 回答No.4

＞fireBugの下記の部分がjavaが作りだしたHTMLなのでしょうか？　firefoxの場合、ウィンドウの右クリックでソース表示を見た内容と、firebugで見た内容が異なればそれがそうです。 <ins style="** ＞insタグは恐らくインライン要素だとおもうので、　二つの理由で難しいです。 1) style属性で指定してありますから、style属性での指定は詳細度がa=1となりますから、#(一意セレクタ:b=1)でも、.(クラスセレクタ:c=1)でも上書きはできません。 2) style属性で display:inline-table; border:none; height:600px; margin:0; padding:0; position:relative; visibility:visible; width:160px として指定されていますから、＞言われたような方法かDIVで囲めばCSSを適用できるということですね。　とはなりません。　これに勝つ唯一の方法は、important!宣言です。 ★CSSがうまくいかない。 - Webデザイン・CSS - 教えて！gooの回答の2 ( http://okwave.jp/qa/q7582718.html#a2 )で記した詳細度の指定方法をよく読んで理解してください。　ところが、スタイルシートには最重要宣言と出所というカスケーディング機能が用意されていて、 1)ブラウザの持つデフォルトのスタイルシート具体的には→HTML 4.0におけるスタイルシートの例 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html ) 2)ユーザー指定のスタイルシート--いわゆるブラウザで指定しているフォントとか 3)著者指定のスタイルシート　　詳細度とか出現順番とか・・いいまで説明してきたもの 4)著者指定の重要宣言されたスタイルシート　　宣言の後にimportant!をつける 5)ユーザー指定のスタイルシート　　宣言の後にimportant!をつける　　視覚障害者がハイコントラストの大きな文字を指定するとか--IEだとインターネットオプションのユーザー補助での指定にあたります。firfoxなどでは率直にユーザーのスタイルシートに書き加えればよい。の順番で後のものほど優先されますから。　あなたのスタイルシートで、 ins{margin:10px 20px 30px 40px !important;} ins+ins{margin: 0;border !important:solid 1px gray !important;} とすれば、スタイルが指定できるはずです。　もちろんinsが他の場所で使われていたら、別途子孫セレクタなどで特定する必要があります。--というか通常は将来のことをかんがえてそうする。　いずれにしても、カスケーディングは身につけてください。 ★本件とは別件ですが、デザインがtableを使ってされています。これは止めましょう。　他にも、とても多くの間違いがHTML自体にあります。　できるだけ、はやくまっとうなHTMLを学びなおしてください。　

質問者

お礼 2012/07/13 15:41

ありがとうございます。お忙しい中大変ありがとうございました。 ins{margin:10px 20px 30px 40px !important;} ins+ins{margin: 0;border !important:solid 1px gray !important;} insはインライン要素ではないのですね。やってみます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/07/12 12:23 回答No.3

No.1です。具体的な例を挙げて説明するとわかると思います。＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから(注)タブは＿に置換してあるので戻してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<script src="insert.js" type="text/javascript"> ＿＿</script> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまでというHTML(Shif-_JIS)と、＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから document.write( '<h2>javascriptで挿入されたHTMLにスタイル</h2>', '<p>このように、javascriptで記事が挿入された場合、その挿入されたHTMLに対してスタイルシートを指定します。そのためには単にHTMLソースだけでなく、<strong>javascript動作後のHTML</strong>を確認しなければなりません。</p>' ); ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまでというスクリプトファイル(Shift_JIS)を用意して、HTMLを開いてください。そして、HTMLの  の間にスタイルを書きます。  このように、あくまでjavascript--googleadsenseの出力後のHTMLに対してスタイルを書きます。そのためには、firefoxのfireBugというツールを使うと良いでしょう。 ★セレクタの書き方は身につけてください。 div.section script+h2 ← sectionDIV内のscriptに隣接したh2 div.section script+h2+p ← sectionDIV内のscriptに隣接したh2に隣接したp div.section script+h2+p strong ← sectionDIV内のscriptに隣接したh2に隣接したp内のstrong 　このように、javascript動作後のHTMLさえわかればナンとでもなります。 ★とにかく上記HTMLを実際に表示してみて、理解してください。それをしなけりゃ先に一歩も進めません。

質問者

お礼 2012/07/12 17:16

fireBugの下記の部分がjavaが作りだしたHTMLなのでしょうか？ <ins style="display:inline-table;border:none;height:600px;margin:0;padding:0;position:relative;visibility:visible;width:160px"> <ins id="aswift_0_anchor" style="display:block;border:none;height:600px;margin:0;padding:0;position:relative;visibility:visible;width:160px"> insタグは恐らくインライン要素だとおもうので、言われたような方法かDIVで囲めばCSSを適用できるということですね。

kamepanman
ベストアンサー率43% (19/44)

2012/07/11 20:47 回答No.2

adsenseのスクリプトタグにラッパーエレメント追加してはどうでしょうか？ <div> <script></script> </div> もしくは、CSSでsideのpaddingをつかいましょう！後者のが正しいかもしれませんね！！

質問者

お礼 2012/07/11 23:55

divで囲むのはありですね。＞CSSでsideのpaddingをつかいましょう！これはどういうことですか？具体的に教えてください。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/07/10 22:27 回答No.1

すでに回答しました。「スクリプトタグのボックスをCSSでかえる ( http://okwave.jp/qa/q7580337.html )」　スクリプトが書き出すHTMLを確認して、セレクタを使ってデザインしたい要素(Element--タグで括られている)を選択し、そのスタイルを記述します。　セレクタの書き方は、一見複雑ですが、極めて単純です。わからなければ調べてください。 →5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )

スクリプトタグのボックスをCSSでいじる方法