上下の余白について

このQ&Aのポイント
  • 質問者は、自身のウェブページで使用しているjqueryにより、上下に相当な余白が生じる問題を抱えています。
  • 質問者は、上下の余白を解消する方法を知りたいと求めています。
  • 質問者のウェブページのCSSやファイル構造が初心者には理解しづらいため、外部ファイルの影響を受けずに上下の余白をなくす方法を教えてほしいとしています。
回答を見る
  • ベストアンサー

上下の余白について

下記のサイトのjqueryを自身のHPで使用しているのですが、私自身がマージンを設定しているわけでもないのに上下に相当な余白が入ってしまいます。 http://flowplayer.org/tools/demos/tabs/accordion-custom.html 下記が問題のhpです。上下の黒の部分になります。目測では200pxぐらいです。 http://kazu1213abi.web.fc2.com/others/accordion/accordion.html CSSなども使用しているみたいなのですが、コードを見ても私が初心者の為さっぱり分かりません。 一部(jquery.tools.min.jsとtabs-accordion.css)のファイルはサイトからダウンロードして問題のhtmlファイルと一緒にサーバーにアップしています。 tabs-accordion.cssの中身は、 /* root element for accordion. decorated with rounded borders and gradient background image */ #accordion { background:#333 url(/img/global/gradient/h300.png) 0 0; width: 300px; border:1px solid #333; -background:#666; } /* accordion header */ #accordion h2 { background:#ccc url(/img/global/gradient/h30.png); margin:0; padding:5px 15px; font-size:14px; font-weight:normal; border:1px solid #fff; border-bottom:1px solid #ddd; cursor:pointer; } /* currently active header */ #accordion h2.current { cursor:default; background-color:#fff; } /* accordion pane */ #accordion div.pane { border:1px solid #fff; border-width:0 2px; display:none; height:180px; padding:15px; color:#fff; font-size:12px; } /* a title inside pane */ #accordion div.pane h3 { font-weight:normal; margin:0 0 -5px 0; font-size:16px; color:#999; } と記述されています。もう一つjquery.tools.min.jsがあるのですが、中はごちゃごちゃしたコードが記述されています。 外部ファイルに関係なく強制的に上下の余白を無くす方法など解決方法などはあるでしょうか? 御教授ください。よろしくお願いします。 .

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

  • ベストアンサー
回答No.1

くだんのページには http://static.flowplayer.org/tools/css/standalone.css が指定されていて、そこにおもいっきり body { padding:150px 50px; と書いてあります。消しましょう。

kazu8212
質問者

お礼

ご指摘どおりに書き換えて実行したら解決できました。 本当にありがとうございました。

関連するQ&A

  • ページの上下に同じタブメニューを付けたい

    現在、wordpressにて、タブメニュー入りのページを作っていますが、添付の画像のように、ページの上下に、連動したタブメニューをつける方法を教えてください。 ちなみに、 ヘッダーに↓の記述をし、 <script> <!-- jQuery( function() { jQuery( '#jquery-sample-tabs > ul > li' ) . click( function () { var str = jQuery( 'input', this ) . val(); jQuery( '#jquery-sample-tabs > div' ) . not( str ) . css( 'display', 'none' ); jQuery( str ) . css( 'display', 'block' ); jQuery( this ) . css( { 'backgroundColor': '#F3F3F3', 'border-bottom': 'none' } ); jQuery( '#jquery-sample-tabs > ul > li' ) . not( this ) . css( { 'backgroundColor': '#f60', 'border-bottom': 'solid 1px #F3F3F3' } ); } ) . first() . click(); } ); // --> </script> cssに↓の記述をし、 #jquery-sample-tabs { width:750px; background:#F3F3F3; } #jquery-sample-tabs ul { background:#000; margin: 0; padding: 5px 5px; } #jquery-sample-tabs ul li { display: inline; margin: 1px; padding: 5px 20px; border: solid 1px #888888; border-radius: 5px 5px 0px 0px; background-color: #F3F3F3; cursor: pointer; } #jquery-sample-tabs div { padding: 10px 15px; } HTMLに↓の記述をしています。 <div id="jquery-sample-tabs" class="jquery-sample-tabs"> <ul> <li> <input id="#jquery-sample-tab-1" type="hidden" value="#jquery-sample-tab-1-contents" /> タブ(1) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-2-contents" /> タブ(2) </li> <li> <input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-3-contents" /> タブ(3) </li> </ul> <div id="jquery-sample-tab-1-contents">(1)の内容</div> <div id="jquery-sample-tab-1-contents">(2)の内容</div> <div id="jquery-sample-tab-1-contents">(3)の内容</div> </div> よろしくお願いします。

  • css3でボタンの中にアイコンを表示するには?

    css3でリンクボタンのデザインを作っています。 グラデーションや角の丸め、影の付け方はわかりました。 しかしボタンの中にアイコンを入れる方法がネットを探しても全く見つかりません。 アイコン画像を用意して、どのようにしてボタンの中に表示させればよいのでしょうか? (画像の赤い矢印で示した部分です) 作っているcssは以下のような感じです。 a{   border-top: 1px solid #57b4ff;   border-left: 1px solid #57b4ff;   border-right: 1px solid #0d78ff;   border-bottom: 1px solid #0d78ff;   -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;   -webkit-box-shadow: 1px 1px 2px #a2c1dc;   -moz-box-shadow: 1px 1px 2px #a2c1dc;   background: -moz-linear-gradient(top, #fff, #ccc);   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); } よろしくお願い致します。

    • ベストアンサー
    • CSS
  • CSSの書き方について

    Jquery のポップアッププラグインであるPopboxを使おうとしています。 http://gristmill.github.io/jquery-popbox/ 実装は出来たのですが、下記の改造で戸惑っています。 ●デフォルトでは、クリックしたボタンから吹き出しの形で、ボタンより下にポップアップが表示されます。 ●当方の希望 クリックしたボタンの場所にかかわらず、スマートフォンの表示枠の一番上から表示させたいです。 CSSのどこを弄ると当方の希望の状況になるでしょうか? よろしくお願いいたします。 <style> .popbox { margin:0px auto; text-align:center; position:relative; } .collapse { position:static; } .open { background:#DDD; border:solid 1px #FFF; border-radius:5px; box-shadow: 0px 0px 5px #CCC; background:-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#e8e8e8)); background:-moz-linear-gradient(top,#f4f4f4,#e8e8e8); background:linear-gradient(top,#f4f4f4,#e8e8e8); padding:8px; } .box { width:280px; display:block; display:none; background:#FFF; border:solid 1px #BBBBBB; border-radius:5px; box-shadow:0px 0px 15px #999; position:absolute; } .box a.close { color:red; font-size:12px; font-family:arial; text-decoration:underline; } .arrow { width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid #FFF; position:absolute; left:1px; top:-10px; z-index:1001; } .arrow-border { width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid #BBBBBB; position:absolute; top:-12px; z-index:1000; } </style> <script type='text/javascript' charset='utf-8'> $(document).ready(function(){ $('.popbox').popbox(); }); </script> <h1>PopBox</h1> <div class='popbox'> <a class='open' href='#'> <img src='images/plus.png' style='width:14px;position:relative;'> Click Here! </a> <div class='collapse'> <div class='box'> <div class='arrow'></div> <div class='arrow-border'></div> 表示内容 </div> </div> </div>

    • ベストアンサー
    • CSS
  • Cssで

    次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し2</h2> <h2 class="sample1">見出し2</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }

  • cssのボタンについて(IEで背景が表示されない)

    リンク先を表示するためにcssでボタンを以下のように作製しました。 FireFoxでは正常にきちんと表示されるものの、 IE10で確認したところ、IEでは背景色が表示されませんでした。 そこでzoom: 1;などを足すなどしてみたのですが やはり表示されません。どうしたらいいのかご指南いただけませんか? どうかよろしくお願いいたします。 a.btn { position: relative; background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 2px solid #FFF; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); text-shadow: 0px 0px 3px rgba(0,0,0,0.5); padding: 10px 10px; margin: 4px 2px 4px 2px; }

    • ベストアンサー
    • CSS
  • モバイルサイト<3キャリア>:auでwidth指定が無効化される?

    モバイルサイト<3キャリア>:auでwidth指定が無効化される? 3キャリア共通仕様のHTMLサイトを作成しています。cssはインラインで使用しています。 あ行 あ い う え お か行 か き く け こ... のような「あいうえお表」を挿入したいのですが、タイトルのとおりauで表示が崩れます。 実現したい仕様は添付画像の【docomo,Softbank】のような形で、この2キャリアでは問題なく表示されています。 が、【au】で見ますとそれぞれの要素のwidth指定が無視され、100%表示されてしまっているようです。 該当部分のソースは、以下のとおりです。 <div style="background-color:#FFF; padding:5px; margin:0;"> <div style="background-color:#FFF; padding:5px; margin:0; width:10px; height:15px; display:inline;">あ行</div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><a href="list_a.html"><font color="#FF0066">あ</font></a></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">い</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">う</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">え</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">お</font></div> </div><!--a end--> 思いつくままにスタイルを追加したので、その中に両立しないものがあるのかなと思うのですが、なにぶんまだ不勉強で・・・ tableで組み直すことも考えたのですが、それぞれのboxをborderで囲みたいのと間隔を空けたいため、ソースが今以上に膨大になってしまう気がして踏ん切りがつきません。 ここを直せばいい、tableでも組める等、お知恵をお貸しください。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSを消して表に色を付けたい!!!

    参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「CSSが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> 1.CSSを全て解除しなければいけないのですか? 2.メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか?

  • WPでaタグを使った横並びリストがカラム落ちしない

    WP・css初心者です。 aタグを使って、ページの上部にボタンを並べた横並びリストを作製したいのですが、たくさん並べたときに、スマホのときだけカラム落ちせずに、一行表示で見切れてしまいます。どうしたらいいかアドバイスいただけますと幸いです。 a.btn-ss { white-space: nowrap; color: #999999; font-size: 14px; font-weight: bold; padding: 3px 15px; border: solid 1px #999999; border-radius: 3px; } a.btn-ss:hover { color: #fff; background: #999999; border: solid 1px #999999; text-decoration: none; border-radius: 3px; }

    • 締切済み
    • CSS
  • ホームページ作成

    ナビゲーションを作成中なのですが、教えてください。 CSSで作ってみたんですが一番右と左の白の線の1pxを消したいんですが なにかいい方法ありますか? CSSは #navi { list-style-type:none; width:750px; margin: 0; padding: 0; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; } ul#navi li { float:left; width:150px; font-family: "A-OTF 新ゴ Pr5 EL"; font-size: 14px; } ul#navi li a { display:block; padding-top:5px; padding-bottom:5px; text-align:center; text-decoration:none; color:#FFF; width:149px; border-right-width: 1px; border-right-style: solid; border-right-color: #FFF; background-image: url(../images/templete/navi2.gif); です。 よろしくお願いします。

  • cssでタブの2段重ねの方法を教えてください

    当方、html、css初心者です。javascriptに関しては全くちんぷんかんぷんです。 http://xampp.utun.net/ このようなサンプルがあったのですが、これを改造して、 タブを縦2段でレイアウトしたいのですが、 方法を教えて頂けないでしょうか? CSSソース ----------------------------------------------------------------------- <style type="text/css"> /* ▼(A)表示領域全体 */ div.tabbox { margin: 0px; padding: 0px; width: 400px; } /* ▼(B)タブ部分 */ p.tabs { margin: 0px; padding: 0px; } p.tabs a { /* ▼(B-2)リンクをタブのように見せる */ display: block; width: 5em; float: left; margin: 0px 1px 0px 0px; padding: 3px; text-align: center; } /* ▼(B-3)各タブの配色 */ p.tabs a.tab1 {background-color: blue;color: #000;} p.tabs a.tab2 { background-color: #aaaa00; color:white;} p.tabs a.tab3 { background-color: red; color: white; } p.tabs a.tab4 { background-color: red; color: white;} background-color: #F00; color: white; } p.tabs a:hover { color: yellow; } /* ▼(C)タブ中身のボックス */ div.tab { /* ▼(C-2)ボックス共通の装飾 */ height: 150px; overflow: auto; clear: left; } /* ▼(C-3)各ボックスの配色 */ div#tab1 { border: 2px solid blue; background-color: #ccffff; } div#tab2 { border: 2px solid #aaaa00; background-color: #ffffcc; } div#tab3 { border: 2px solid red; background-color: #ffcccc; } div#tab4 { border: 2px solid red; background-color: #ffcccc; } div.tab p { margin: 0.5em; } </style> ----------------------------------------------------------------------------- 上記の通りです。 ご指導、ご鞭撻の程を宜しくお願いします。

    • 締切済み
    • CSS

専門家に質問してみよう