HPを作る時、個々のブラウザによって、見え方って違いますよね?
そこで質問です。
HPビルダーで作成の私のサイト。前回作成した時は、ウェブ上に表示した時、
窓の幅を縮めると、自然と横スクロールバーがついて表が乱れる事はなかったんです。
今回更新したら、窓を縮めると、表の中の文字が勝手に改行してしまい、フォームが崩れてしまうのです。
フォームをこのままの形で保ち、表示がはみ出る場合は横スクロールバーを
出したい。こんな時は、どうすればいいのでしょうか??

A 回答 (2件)

要は、ブラウザの横サイズによって折り返しが発生しないようにしたい、という事ですよね? なら以下の方法はいかがですか?




<TABLE>タグを使用していて、その中に記載した文字列・画像を折り返さないようにしたいときは、<TD>タグ内に、NOWRAP属性を書き加えます。
例えば、
<TABLE>
<TR>
<TD NOWRAP>
あああああああああああああああああああああああああああああああああああ
</TD>
</TR>
</TABLE>
とすると、あああああ・・・・の文字が改行されなくなります。


さらに、<TABLE>タグを使用していない文字列(含む画像)を折り返したくない場合は、その範囲を<NOBR>~</NOBR>で囲みます。

<NOBR>あああああああああああああああああああああああああ</NOBR>


あと、ブラウザの大きさや表示フォントの大きさによってTABLEの大きさを変えたくない場合は、
<TABLE WIDTH=*** HEIGHT***>
というように、ピクセル数で指定することも出来ます。

スタイルシートを使えば、もっと高度な技(各行の高さの指定等)もできますが、そこはすぐに答えられない(リファレンスを見ないとわからん・・・)ので、とりあえずこの程度でいかがでしょうか?
    • good
    • 0
この回答へのお礼

ま・さ・に!その通りです。
NOWRAPを今あるソースに加えただけで、希望通りの物が出来ました!
ちなみに、テーブルは勝手にピクセルが設定されていました(^^;)。
(ソコがシロウトでも、なぜか出来てしまうソフトのスゴイ所ですね)
どうもありがとうございました!
本は持ってるんですけど、そういう細かい事は、意外と書いてないんですよね~。
ここはホントに助かります。

お礼日時:2001/10/19 13:13

表の幅指定がピクセル数ではなく%になっているのではないでしょうか。


HPビルダーはあまり触っていませんので(持っているにも関わらず)よく解りませんが、保存時に設定が変わってしまったのではないでしょうか。
HTMLを直接御覧になるのが確実だと思うのですが…。
    • good
    • 0

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

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

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

QIE6で横スクロールバーを消すとIE7では方向キーでのスクロールができなくなります。直し方を教えてください。

ホームページでインラインフレームを使ってるんですが。

IE6だと無意味な所に横スクロールバーがでます。
調べるとoverflow-x: hidden;を追加すれば消えるとあったのでやってみると今度はIE7でキーボードの方向キーでのスクロールができなくなりました。

これはIE7の仕様なのでしょうか?
仕様なら直し方を教えていただきたいのです。

お願いします。

Aベストアンサー

今IEが手元にない環境から見ているので、実際の結果を検証できませんが…推測だけしてみます。

インラインフレームで表示される方のHTMLファイル(http://minatukiryu.blog60.fc2.com/index.php)(以下便宜上(a)ファイルとします)のコードと適用されているCSSを拝見しました。
おそらく、ですが(a)ファイルから参照しているCSS:
http://minatukiryu.blog60.fc2.com/template/a_memo_1/style.css
で、メインのコンテンツを納めるtableに対して設定されている以下のスタイルの
.tb {
(省略)
margin-left : auto;
margin-right : auto;
width : 100%;
(省略)
}
これらの部分がインラインフレーム側((以下便宜上(b)ファイルとします))に横スクロールを出させているのではないかと思います。本来、インラインフレームのwidth属性で820pxという値が決められており、インラインフレーム内のコンテンツ幅がそれより少なければスクロールに関しては初期値の"auto"が適用されますのでこの場合820pxの中での100%という様に解釈されていれば横スクロールは発生しない筈です。IE6以外のモダン・ブラウザではその様にきちんと表示されているのではありませんか?ちなみに今Safariで見ていますが、Safariでは横スクロールは出ていません。
IE6は何かとW3Cの仕様に準拠しない挙動をする問題の多いブラウザですので、本件でも100%や左右マージンの解釈が異なってしまい、インラインフレームの幅よりも内部で表示されるHTMLファイルのコンテンツ幅の方が広い様に勘違いしている為に、本来不要な筈の横スクロールバーが(b)ファイル上で出てしまっているのかもしれません。

(a)ファイルの構成を見る限り、上記の(IE6で不具合を引き起こす原因と仮定している)スタイル部分は削除してしまってもレイアウトにほぼ影響はしないと思われます。一度この部分を削除(あるいは隠す)して、再度IE6での表示を確認されてみてはいかがでしょう。

ちなみに、
> 調べるとoverflow-x: hidden;を追加すれば消えるとあったので

とありますが、そもそもoverflowプロパティというのは「ブロック要素の内容が指定された横幅・高さの領域からはみ出した場合の表示方法を指定」するものですので、"overflow-x: hidden;"が有効になるのは「widthプロパティにより内容領域を指定されたブロック要素が、指定されたサイズよりも内容が大きなサイズをもつ場合」です。
(参考)http://w3g.jp/css/display_position/overflow
今回の場合、(a)ファイルに適用されるCSSの中で
html, body {(省略)overflow-x: hidden;}
としてしまっていますが、これでは「どこがはみ出す対象となるのか」が明確になっておらず定義が意味不明になっています。IE7でキーボード操作によるスクロールに弊害が出てしまっているのは、この妥当でない指定が影響してしまっているのだと思われます。こちらは削除して下さい。

これでだめでしたらこちらの仮定違いということでご容赦下さい。

蛇足ですが、(b)ファイルの方、HTML文書なのにDOCTYPEがなかったり、HTMLとXHTMLの記述が混在してしまっています。CSSやJavaScriptの挙動には、DOCTYPEが関わってくる場合がありますので、この機会に(b)ファイル側のHTMLの文法チェックなどをきちんとしておく事をお奨めしておきます、今後の為に。

今IEが手元にない環境から見ているので、実際の結果を検証できませんが…推測だけしてみます。

インラインフレームで表示される方のHTMLファイル(http://minatukiryu.blog60.fc2.com/index.php)(以下便宜上(a)ファイルとします)のコードと適用されているCSSを拝見しました。
おそらく、ですが(a)ファイルから参照しているCSS:
http://minatukiryu.blog60.fc2.com/template/a_memo_1/style.css
で、メインのコンテンツを納めるtableに対して設定されている以下のスタイルの
.tb {
(省略)
margin-le...続きを読む

Qメニューの横スクロールバーを消したい

色々と探しても解決法が見つからないのでどなたかご教授いただけませんでしょうか。
※無事表示されればそれでいいのでhtmlの記述方法についてのお叱りなどは勘弁して下さい。

ドロップダウンメニューをセンタリング表示しているのですが、
どうあっても横スクロールバーが出てしまいます。
下記サイトではoverflow:hiddenを使用すると書いていますが
使用するとドロップダウンが非表示になってしまうため難しいです。
http://www.coolwebwindow.com/csstips/csstechnic/000241.php

【html】

<div id="global-nav">
<ul class="menu" id="menu">
<li class="a">イメージ画像</a>
<ul>
<li>ドロップダウン</li>
<li>ドロップダウン</li>
<li>ドロップダウン</li>
</ul>
</li>
<li class="a">イメージ画像</a>
<ul>
<li>ドロップダウン</li>
<li>ドロップダウン</li>
</ul>
</li>
<li class="a">イメージ画像</a>
<ul>
<li>ドロップダウン</li>
</ul>
</li>
<li class="a">イメージ画像</a>
<ul>
<li><a href="dl-1.html">ドロップダウン</a></li>
<li><a href="dl-2.html">ドロップダウン</a></li>
<li><a href="dl-3.html">ドロップダウン</a></li>
</ul>
</li>
</ul>
</div>


【css】

div#global-nav {
position:relative;
width: 1000px;
height: 40px;
margin: 0 auto;
background: #999;
}

ul.menu {
  position: relative;
  list-style:none;
  left:50%;
  float:left;
  margin:0;
padding:0;
  text-align: left;
}

ul.menu * {
  margin:0;
  padding:0;
}

ul.menu a {
  display:block;
color:#000;
text-decoration:none;
}

ul.menu li.a {
  position: relative;
left:-50%;
float:left;
}

ul.menu ul {
  position:absolute;
top:40px;
left:0;
background:#d1d1d1;
display:none;
opacity:0;
list-style:none;
}

ul.menu ul li {
  position:relative;
  border-top:none;
  width:180px;
  margin:0;
}

ul.menu ul li a {
display:block;
padding:3px 7px 5px;
background-color:#d1d1d1;
}

ul.menu ul li a:hover {
background-color:#c5c5c5;
}

ul.menu ul ul {
left:180px;
top:-1px;
}

ul.menu .menulink {
width:180px;
}

ul.menu .menulink:hover, ul.menu .menuhover {
background:url(images/header_over.gif);
}



ul.menuの中のleft:50%を消すと横スクロールバーが消える事はわかったのですが、
それだと中央揃えにならないので…。
どうか宜しくお願いします!

色々と探しても解決法が見つからないのでどなたかご教授いただけませんでしょうか。
※無事表示されればそれでいいのでhtmlの記述方法についてのお叱りなどは勘弁して下さい。

ドロップダウンメニューをセンタリング表示しているのですが、
どうあっても横スクロールバーが出てしまいます。
下記サイトではoverflow:hiddenを使用すると書いていますが
使用するとドロップダウンが非表示になってしまうため難しいです。
http://www.coolwebwindow.com/csstips/csstechnic/000241.php

【html】

<div id="global-na...続きを読む

Aベストアンサー

不必要なclass名やidを書き連ねるとHTMLもCSSも煩雑になります。折角のCascading style Sheetなのですからカスケーディングを使わなきゃ・・

・継承するものは継承させる。
・同じプロパティはセレクタのグループ化で一度しか書かない
・セレクタで特定できるものまで、不必要なidやclass名は書かない。
・ひとつのHTML要素に関わる部分は、スクロールなしに見渡せるよう整理する。

 サンプルは外形だけですが、HTMLもスタイルシートもこんな簡単でわかりやすいもので済むはずです。それでいて、スマートホンから幅広ディスプレイに対応しています。(ウィンド幅を伸縮して確認してください。また、固定スタイルにするときは設定を変更してください。)

 まあ、スタイルシートは20~30行程度に抑えるとメンテナンスが楽です。

 プルダウンメニューについて、本来はdispaly:inline-block;とtext-align:centerを組み合わせるべきですが、古いブラウザを考慮するとfloat:leftも致し方ないでしょう。
 
★いずれも、タブが全角スペースに置換してあるので戻すこと。
[HTML]class名のnavはHTML5の要素名、将来HTML5に変更すると気楽なので・・
<div class="nav" id="global-nav">
 <ul>
  <li>イメージ画像</a>
   <ul>
    <li>ドロップダウン</li>
    <li>ドロップダウン</li>
    <li>ドロップダウン</li>
   </ul>
  </li>
  <li>イメージ画像</a>
   <ul>
    <li>ドロップダウン</li>
    <li>ドロップダウン</li>
   </ul>
  </li>
  <li>イメージ画像</a>
   <ul>
    <li>ドロップダウン</li>
   </ul>
  </li>
  <li>イメージ画像</a>
   <ul>
    <li><a href="dl-1.html">ドロップダウン</a></li>
    <li><a href="dl-2.html">ドロップダウン</a></li>
    <li><a href="dl-3.html">ドロップダウン</a></li>
   </ul>
  </li>
 </ul>
</div>

[CSS]子セレクタやinline-blockを理解しない古いブラウザを考慮して長ったらしくなってます。
div.nav ul,div.nav ul li{
 display:block;list-style:none;
 margin:0;padding:0;
 line-height:40px;text-align:center;
}
div.nav ul{
 width:80%;height:40px;
 margin:0 auto;min-width:640px;max-width:1000px;
 background-color:#999;
}
div.nav ul li{width:25%;float:left;position:relative;}
div.nav ul li ul li{float:none;background:#d1d1d1;}
div.nav ul li ul{width:100%;position:absolute;background-color:transparent;}
div.nav ul li ul{display:none;}
div.nav ul li:hover ul{display:block;}
div.nav ul li a{display:block;}

不必要なclass名やidを書き連ねるとHTMLもCSSも煩雑になります。折角のCascading style Sheetなのですからカスケーディングを使わなきゃ・・

・継承するものは継承させる。
・同じプロパティはセレクタのグループ化で一度しか書かない
・セレクタで特定できるものまで、不必要なidやclass名は書かない。
・ひとつのHTML要素に関わる部分は、スクロールなしに見渡せるよう整理する。

 サンプルは外形だけですが、HTMLもスタイルシートもこんな簡単でわかりやすいもので済むはずです。それでいて、スマートホンか...続きを読む

Q【再質問】IE6で、横スクロールバーだけ消したい

#5さんの回答で、一部のページが解決されたようなのですが、
どうも、完全ではないようです。

1.スクロールバーが表示されたり表示されなかったり等不安定
2.表示されたままだったりする。
3.上記どちらも、縦スクロールは出る状態です。

どなたか解決法わかるかたいらっしゃいませんか?

質問元、及びソースはこちらです。
http://okweb.jp/kotaeru_thanks.php3?a=4785482&q=1536205

Aベストアンサー

以前の質問の#3の者ですが、
まず、Win XP SP2 IE6.0 では、
補足で提示して頂いた物では再現(スクロールバーの表示)はしませんでした。
一応、640 * 480 最大化でも検証。

で、せめて再現した実績のあるソースをご提示頂けないでしょうか?
(以前のが、一部を編集して提示との事でしたので・・・。)


あと、改めてご提示頂きたいのが、
1.解像度、及びその表示状態(つまり、表示サイズの明示がないので・・・。)
2.画像のサイズ等(一応、検証時の条件合わせとして。)
3.検証環境。(念の為、サーバにupしての検証か? それともPC上か?)



で、不安定という事でまず考えられるのが、
画像がらみと文字化けですかねぇ~。
画像は読み込めているか否かでなので常に一定という事はないから(画像を表示しない様にして検証可能ですが・・・。)
文字化けは、それまで表示していたページと関わって
文字コードが処理される事もあるので、ある意味不安定な物です。で、HTML タグやスタイルシートのそれ自身というよりその前の方に文字化けがあると、
それ以下はどの様に解釈されるかは運次第・・・。


結局、再現するソースの提示がないと、
原因特定が出来ず、適切な回答は難しいです。
全て推測かあれが出来るこれが出来るの提示止まりとなってしまいます。

以前の質問の#3の者ですが、
まず、Win XP SP2 IE6.0 では、
補足で提示して頂いた物では再現(スクロールバーの表示)はしませんでした。
一応、640 * 480 最大化でも検証。

で、せめて再現した実績のあるソースをご提示頂けないでしょうか?
(以前のが、一部を編集して提示との事でしたので・・・。)


あと、改めてご提示頂きたいのが、
1.解像度、及びその表示状態(つまり、表示サイズの明示がないので・・・。)
2.画像のサイズ等(一応、検証時の条件合わせとして。)
3.検証環境。...続きを読む

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

当方webサイトを制作しています。
大体完成しており、ブラウザチェックをしている段階なのですが
修正したい箇所がありまして、修正方法をどなたか教えていただけますでしょうか。


横幅を960pxで作ったのですが、よくブラウザのサイズを小さくしたときに横スクロールバーが表示されますよね。
ところがFirefoxで確認したところ、横スクロールバー(縦は出ます)が
表示されず、小さくしたら見えていない部分を表示する手段がありません。

960px以下のモニタのユーザへの対処法として、解像度960px以下の場合は(要はページが画面に収まりきらない場合です)
横スクロールバーで、見えていないところも表示できるようにしたいのです。

現状は以下の通りです。

・bodyに幅は指定していません(ウィンドウのサイズを960px以上に大きくしたときでもセンターに表示させるため)
・cssで960pxのサイズ指定をしている箇所はあります。
・IE6では横スクロールが表示されています。
・html上にwidth960pxのimgを置いてみましたが解決にいたりませんでした。

webで調べてみましても、「スクロールバーを消したい」の情報は
あるのですが、「表示させたい」の対処法をみつけることができませんでした。

対処法をご存知の方、どうかよろしくお願いいたします。

当方webサイトを制作しています。
大体完成しており、ブラウザチェックをしている段階なのですが
修正したい箇所がありまして、修正方法をどなたか教えていただけますでしょうか。


横幅を960pxで作ったのですが、よくブラウザのサイズを小さくしたときに横スクロールバーが表示されますよね。
ところがFirefoxで確認したところ、横スクロールバー(縦は出ます)が
表示されず、小さくしたら見えていない部分を表示する手段がありません。

960px以下のモニタのユーザへの対処法として、解像度960px以下...続きを読む

Aベストアンサー

はじめまして

まずは以下のHTML&CSSを試してください。
こちらでテストした結果では、FireFox3で横スクロールバーが表示されました。

もしかしたら「センターに表示させるため」が影響しているのかもしれません。
下記のHTML&CSSでは、
IEでセンタリングするために「Bodyにtext-align : center;」の設定をし、
FireFoxのために「DIVにmargin : 0 auto;」を設定しています。



<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Sample</TITLE>
<STYLE type="text/css">
<!--
body{
text-align : center;
}
.main{
border :1px solid #000000;
width:960px;
margin : 0 auto;
text-align:left;
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class="main">Hello world</DIV>
</BODY>
</HTML>

はじめまして

まずは以下のHTML&CSSを試してください。
こちらでテストした結果では、FireFox3で横スクロールバーが表示されました。

もしかしたら「センターに表示させるため」が影響しているのかもしれません。
下記のHTML&CSSでは、
IEでセンタリングするために「Bodyにtext-align : center;」の設定をし、
FireFoxのために「DIVにmargin : 0 auto;」を設定しています。



<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Sample</TITLE>
<STYLE type="te...続きを読む

Qtableで横スクロールバーが・・

tableの高さがブラウザの表示範囲を超えると
少しだけ右の方に空白ができ、
横スクロールバーが出てきて醜い状態になってしまいます。

タグは、大まかにこのような感じで、
外部スタイルシートを適用させていて、
tableには枠線をつけています。


<body scroll="auto">
<table style="width:720px;" class="枠線、パディング、マージン等">
<tr>
<td colspan="2" style="background-image:url("***.jpg(720x150pxの画像)");
width:720px;height:150px;">
<a href="リンク">リンク</a>
</td>
</tr>
<td colspan="1" width="100%">
<!メニュー部分>
</td>
<td colspan="1">
<!本文部分>
</td>
</tr>
<tr>
<td>
<!著作権表示>
</td>
</tr>
</table>
</body>

本文が少なければ、tableの高さがブラウザの表示範囲の中に収まるので
横スクロールバーは出ませんが、
収まらないときには横スクロールバーが出てしまいます。

横スクロールバーを出さないようにするにはどうすればよいのでしょうか?
分かりにくい箇所があればご指摘をお願いします。
回答をお待ちします。

tableの高さがブラウザの表示範囲を超えると
少しだけ右の方に空白ができ、
横スクロールバーが出てきて醜い状態になってしまいます。

タグは、大まかにこのような感じで、
外部スタイルシートを適用させていて、
tableには枠線をつけています。


<body scroll="auto">
<table style="width:720px;" class="枠線、パディング、マージン等">
<tr>
<td colspan="2" style="background-image:url("***.jpg(720x150pxの画像)");
width:720px;height:150px;">
<a href="リンク">リンク</a>
</td>
</t...続きを読む

Aベストアンサー

scroll="auto"
を消す。


人気Q&Aランキング

おすすめ情報