ネットが遅くてイライラしてない!?

初めて自分でXHTML+CSSでサイトを作ろうとしている者です。
bodyの直下に「div id="container"」を置き、containerをCSSで
#container {
margin:0 auto;
overflow: auto;
background-color:#fff;
width :90% ;
height:100%;
}
としています。

この時、containerの右側と下側に、スクロールバーが出現してしまいます。
通常のブラウザのスクロールバーに加えて内側にスクロールバーが二重になってしまっている状態です。

質問ですが、どうすればこの内側のスクロールバーを消せるのでしょうか?

ちなみにOSはXP、ブラウザはfirefoxです。(IE6で見た時は内側のスクロールバーは出ません)

このままだと相当格好悪いので、何とか直したいと思っています。
どなたかご教示頂ければ幸いです。

よろしくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

ovarflow:auto;が使われているためにスクロールバーが出ているわけですが、何故ここでこれを使用しているのかが良く分かりません。

    • good
    • 0
この回答へのお礼

解決しました!ありがとうございました。

>何故ここでこれを使用しているのかが良く分かりません。

お恥ずかしい話ですが、どこかのテンプレからコピってきたものをそのまま使ってました・・・

お礼日時:2007/03/29 19:56

すみません。

当方環境で再現させることができません^^;;
インストーラが嫌いなので以下のFirefox 2.0.0.3 私的ビルド(Visual C++ 2005 SP1 (PGO))のEXEの7-zipを解凍してC:\Program Files\ においた後
http://www1.plala.or.jp/tete009/software.html

上記2.0.0.3を-pオプション付きで起動して普段とは別なプロファイルを作りました。

その後,Firefox 2.0.0.3で以下のソースを読み込ませて見ましたが,再現しませんでした。何か手順間違えてたら突っ込んでください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>サンプル</title>
<style type="text/css">
#container {
margin:0 auto;
overflow: auto;
background-color:red; /* 色はわかりづらいので意図的に変更しています */
width :90% ;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
<p>ほげ</p>
</div>
</body>
</html>

この回答への補足

ごめんなさい、ちょっと分かりません。
実際は外部CSSファイル中にcontainer以外にも様々な指定がありますが・・・
わざわざお手数おかけしてしまい、ありがとうございます。

補足日時:2007/03/29 19:53
    • good
    • 0

body {


width:100%;
height:100%;
overflow:hidden;
}

を追加する。

この回答への補足

お答え頂き、ありがとうございます。
追加してみましたが、外側のスクロールバー(通常のブラウザのバーです)が効かなくなっただけで、内側のバーは消えませんでした。

補足日時:2007/03/29 19:52
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qiframeのスクロールバー非表示

html5、css2.1で作成していますが
スクロールバーを非表示にするのに
scrolling=noにしようと思ったら
html5では有効でなくなったようなので
html5で消す場合はどうしたらよいのか
教えていただけましたら幸いです。

Aベストアンサー

HTML5より追加された<frame>タグで対応できませんでしょうか?
http://www.htmq.com/html/frame.shtml

参考URL:http://www.htmq.com/html/frame.shtml

Q横スクロールバーを表示したい

スクロールバーの色を変更するために下記のタグを埋め込んだ所、
今まで表示されていた横スクロールバーが消えてしまいました。
横スクロールさせないと見えない部分があるので、ぜひ表示させたいです。
どうか教えてください!

Win98se・IE6
HPビルダーでどこでも配置モードを利用しています。

<STYLE type="text/css"><!--body {scrollbar-face-color:#ffffff;
scrollbar-track-color:#ffffff; scrollbar-arrow-color:#C0C0C0;
scrollbar-highlight-color:#808080; scrollbar-shadow-color:#C0C0C0;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
overflow-x : hidden ;} -->
</STYLE>

Aベストアンサー

overflow-x : hidden ;

横スク出しちゃいやん、の印(笑)

overflow-x : auto;
横スク出るなら出てしまえ。

overflow-x : scroll ;
横スク必ず出してやる!

この行がない場合はoverflow-x : auto;と同じ意味です。
・・・言うてもIE互換モードだけだけどー。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qのclass指定が継承されない

<table>に指定したclass指定が、その下の<td>や<tr>に継承されずに困っています。


HTMLを

<table class="sample">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>

とし、
cssを

table, td {
border: 2px #2b2b2b solid;
}

とした場合、新しくhtmlとcssを作ると表自体と全セルに囲み線が作られます。

ですが、今運営しているHPに記述すると、<table>のborderのみしか表示されません。
試しに、<td>にclassを指定しなおしてみると、そのセルにも囲み線が表示されました。
全<td>にclassを指定すれば問題ないのかもしれませんが、それではあまりにも使い勝手が悪いため、何とかhtmlは<table>のみにclassを指定することで全セルに反映させたいと思っています。

考えられる原因としてはどのようなものがありますでしょうか…?

<table>に指定したclass指定が、その下の<td>や<tr>に継承されずに困っています。


HTMLを

<table class="sample">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>

とし、
cssを

table, td {
border: 2px #2b2b2b solid;
}

とした場合、新しくhtmlとcssを作ると表自体と全セルに囲み線が作られます。

ですが、今運営しているHPに記述すると、<table>のborderのみしか表示されません。
試しに、<td>にclassを指定しなおしてみると、そのセ...続きを読む

Aベストアンサー

>borderが継承されないと言う点は理解しているのですが、<table>に対して指定したclassがその下に位置する<td>に継承されないという点で困っております。
 それは「継承」ではありません。
★それは、tdに指定したスタイルが適用されないという事です。
  カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order )

table.sample td{}
は、
・class属性の空白で仕切られた値リストの一つにsampleを持つtable要素の子孫であるtd要素という意味です。詳細度は[0 0 1 2]=12です。
 これが適用されないと言う事は、
・より高い詳細度の指定がある。
  一意セレクタ[0100]とか、スタイル属性[1000]
  より詳細な記述がある。body div.section table td [0 0 1 4]、
・同じ詳細度で後述の指定がある。
・HTMLの文書構造かセレクタの記述に誤りがある。
 の何れかでしょう。

 Web開発されているなら、開発者ツールが豊富なfirefoxお使いだと思いますがそのアドオンにFirebug( https://addons.mozilla.jp/firefox/details/1843 )があります。それでスタイルが適用されない要素を選択すると、カスケードの順番に従ってスタイルが明示されます。
 それを使うのが、最もよくわかる。

>borderが継承されないと言う点は理解しているのですが、<table>に対して指定したclassがその下に位置する<td>に継承されないという点で困っております。
 それは「継承」ではありません。
★それは、tdに指定したスタイルが適用されないという事です。
  カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order )

table.sample td{}
は、
・class属性の空白で仕切られた値リストの一つにsampleを持つtable要素の子孫であるtd要素という意味です。詳細度は[...続きを読む

Qインラインフレームの横スクロールの非表示

インラインフレームの横スクロールの非表示ってどうやるのでしようか?縦のスクロールのみを表示させたいのですが,,,scrolling marginwidth="no" って入れてもだめでした

Aベストアンサー

No.5です。
すみません、言い方が悪かったので再回答します。

inline.htmlをテキストエディタで開いて、
<html>を<html lang="ja" style="overflow-x:hidden;">
(「lang="ja"」はなくても構いません)に書き換えてみて下さい。

inline.htmlの中身を編集してください、ということです。

Qnowrapを指定しても改行されるのですが

一覧表を作り、その内部では改行が行われないようにしたいのですが、
スタイルシートでnowrapを指定(tdやdivなどで)しても、ウィンドウのサイズを変更すると
自動改行が行われてしまいます。
テーブルの幅を85%にし、センター指定していて、ウィンドウが小さくなったときに
できればそちらを先に無視して欲しいのですが、無理なのでしょうか。
競合しないタグでの優先順位について調べてみたのですが、分かりませんでした;
ブラウザの解釈なのでしょうか?ちなみに、確認しているブラウザはIE6です。

初めは
│ ̄│ ̄ ̄ ̄│ ̄│ ̄ ̄ ̄│
│ ̄│ ̄ ̄ ̄│ ̄│ ̄ ̄ ̄│
│ ̄│ ̄ ̄ ̄│ ̄│ ̄ ̄ ̄│
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
の様に、セル二個組からなる表を、半分横に並べようかと思っていたのですが
(表の順序で考えるとおかしいですが;)
縦一列にすれば、よっぽどウィンドウサイズを小さくしない限り自動改行が入ることはなくなるので
どうしても無理であれば、そうしようかとも思っています。ただ、根本的な解決にはなっていないので・・・。
理由が分かる方、どうか教えていただけないでしょうか。

一覧表を作り、その内部では改行が行われないようにしたいのですが、
スタイルシートでnowrapを指定(tdやdivなどで)しても、ウィンドウのサイズを変更すると
自動改行が行われてしまいます。
テーブルの幅を85%にし、センター指定していて、ウィンドウが小さくなったときに
できればそちらを先に無視して欲しいのですが、無理なのでしょうか。
競合しないタグでの優先順位について調べてみたのですが、分かりませんでした;
ブラウザの解釈なのでしょうか?ちなみに、確認しているブラウザはIE6です。

初...続きを読む

Aベストアンサー

これをやると改行されませんよ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>copy</TITLE>
<style type="text/css">
table{width:80%;margin:auto}
#aa{white-space: nowrap;}
#bb{white-space: nowrap;}
#cc{white-space: nowrap;}
</style>
</HEAD>
<BODY>
<table>
<tr><td id="aa">ああああああああああ</td><td>ああああああああああ</td></tr>
</table>
<table>
<tr><td>ああああああああああ</td><td><div id="bb">ああああああああああ</div></td></tr>
</table>
<table>
<tr><td><span id="cc">ああああああああああ</span></td><td>ああああああああああ</td></tr>
</table>
</BODY>
<HTML>

IE6とFirefoxです。

これをやると改行されませんよ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>copy</TITLE>
<style type="text/css">
table{width:80%;margin:auto}
#aa{white-space: nowrap;}
#bb{white-space: nowrap;}
#cc{white-space: nowrap;}
</style>
</HEAD>
<BODY>
<table>
<tr><td id="aa">ああああああああああ</td><td>ああああああああああ</td></tr>
</table>
<table>
<tr><td>ああああああああああ</td><td...続きを読む

QCSSで、文字は左寄せにして、文字全体を中央寄せにする方法

を教えてください!^^;

text-align: left;

で文字を左寄せにすることができることは先ほど調べてわかったのですが、
文字全体を中央寄せにする方法が分かりません^^;

本当に困ってます、どなたか教えてくださいお願いします><

Aベストアンサー

body{
text-align:center;
}

.box{
margin-left:auto;
margin-right:auto;
text-align:left;
}

↑これでどうでしょうか?
画面全体(body)に表示する内容(box)は中央揃えにして、box内に表示する内容は左揃えに・・・というcssです。margin-left;autoとmargin-right:autoは、左右のマージンがそれぞれ最大になるように・・・という記述です。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Qページ間で変数を保持したい

いつもお世話になっております。

今回はhtml間での値渡しについてお聞きしたいです。

現在ある二つのページA,Bを作成していまして、お互いにリンクが張ってあります。
AからBに行く時、Aの中にあるフォームの内容をBに表示したく外部jsファイルでグローバル変数に保持したりなどやってみましたがだめでした。

そもそもこのようなことをjavascriptのみでできるのでしょうか?
また可能ならばどのようにすればよいでしょうか?
ご教授お願いします。

Aベストアンサー

<form action="fB.html" method="get">
とした場合の例ですが、

以下のコードを参考にしてみてください。
------------------------------------------------------------
fA.html
------------------------------------------------------------
<html>
<head>
</head>
<body>
<form action="fB.html" method="get">
<input type="text" name="t" value="textA"></input>
<input type="hidden" name="h" value="hiddenA">
<input type="submit">
</form>
</body>
</html>
------------------------------------------------------------
fB.html
------------------------------------------------------------
<html>
<head>
<script type="text/javascript">
<!--
function init() {
var arr=Array();

var ss = "";
var querys=location.search;
if(querys) {
var q = querys.replace(/^\?/,'').split('&');
for(i=0 ; i<q.length ; i++){
var pair=q[i].split('=');
// arr[pair[0]]=pair[1];
ss += pair[0] + " = " + pair[1] + "\n";
}
}
alert(ss);
}

window.onload= init;

//--></script>
</head>
<body>
</body>
</html>

<form action="fB.html" method="get">
とした場合の例ですが、

以下のコードを参考にしてみてください。
------------------------------------------------------------
fA.html
------------------------------------------------------------
<html>
<head>
</head>
<body>
<form action="fB.html" method="get">
<input type="text" name="t" value="textA"></input>
<input type="hidden" name="h" value="hiddenA">
<input type="submit">
</form>
</b...続きを読む


人気Q&Aランキング